.media-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: var(--image-container-fixed-height, 100%);
  background-color: var(--image-container-background-color, var(--color-text-environmental));
}

.media-container.media--adapt {
  height: 0;
}

.media-container.media--fill {
  height: 100%;
  padding-top: 0;
}

.media-container__video,
.media-container__image,
.media-container__iframe,
.media-container__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.media-container__external {
  position: absolute;
  inset: 0;
}

.media-container__iframe {
  z-index: 1;
}

.media-container__poster {
  z-index: 0;
}