media-break #volume {
  transform: none;
  display: none;
  margin: 30px auto 10px auto;
}

media-break #volume .icon {
  height: 30px;
  width: 30px;
  cursor: pointer;
  background-color: var(--tc);
  -webkit-mask: var(--volume-off);
  mask: var(--volume-off);
}

media-break .volume-on {
  -webkit-mask: var(--volume-on) !important;
  mask: var(--volume-on) !important;
}

media-break .video-container {
  max-height: 80%;
  margin: 0 auto;
}

media-break video {
  max-height: 100%;
  max-width: 100%;
  object-fit: var(--media-break-object-fit, cover);
}

media-break .img-container {
  max-height: 80%;
}

media-break img {
  height: 100%;
  width: 100%;
  object-fit: var(--media-break-object-fit, cover);
}

media-break .caption {
  text-align: center;
  margin: 15px;
}

@media only screen and (max-width: 600px) {
  media-break .caption {
    text-align: left;
    margin: var(--page-padding);
  }
}