.media-container {
  position: relative;
  flex: 1 0 50%;
}

.media-container .media-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-container .media-image img,
.media-container .media-image svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-container .media-image .default-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: rgb(0 0 0 / 30%);
}

.media-container .media-video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-container .media-video .video-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-container .media-video theme-video-media {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 30%);
}

.media-container .media-video theme-video-media video,
.media-container .media-video theme-video-media iframe {
  width: 100%;
  height: 100%;
  object-fit: var(--video-object-fit, cover);
}

.media-container .media-video theme-video-media[style*="aspect-ratio"] {
  --video-object-fit: contain;

  height: auto;
  aspect-ratio: var(--aspect-ratio);
}

.media-container .media-video .theme-video-media {
  width: 100%;
  height: 100%;
}

.media-container .media-video .theme-video-media--empty {
  height: 100%;
}

.media-container .media-video .theme-video-media__poster {
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 30%);
}

.media-container .media-video .theme-video-media__poster img,
.media-container .media-video .theme-video-media__poster svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-container .media-video .theme-video-media__media {
  width: 100%;
  height: 100%;
}

.media-container .media-video .theme-video-media__media video,
.media-container .media-video .theme-video-media__media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-container .media-video .default-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: rgb(0 0 0 / 30%);
}

.media-container .media-group-wrapper {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 100%;
}

.media-container .media-group-content {
  position: relative;
  display: flex;
  align-self: flex-end;
}

.media-container .media-group-text-container {
  display: flex;
  flex-direction: inherit;
  gap: inherit;
  align-items: inherit;
  justify-content: inherit;
  width: inherit;
  height: inherit;
}

.media-container .media-text-mask {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.media-container .media-text-mask-deep {
  background: linear-gradient(
    360deg,
    rgb(0 0 0 / 60%) 0%,
    rgb(0 0 0 / 0%) 91.7%
  );
}

.media-container .media-text-mask-light {
  background: linear-gradient(
    356.5deg,
    rgb(255 255 255 / 60%) 17.48%,
    rgb(255 255 255 / 0%) 96.92%
  );
}

.media-container .media-mask {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: rgb(0 0 0 / calc(var(--media-mask-opacity) / 100));
}

@media (max-width: 959px) {
  .media-group-wrapper {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    width: 100%;
    height: 100%;
  }

  .media-group-wrapper .media-group-text-container {
    display: flex;
    flex-direction: inherit;
    gap: inherit;
    align-items: inherit;
    justify-content: inherit;
  }
  .media-container--text-below-image .media-image,
  .media-container--text-below-image .media-video {
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: auto;
  }

  .media-container--text-below-image .media-image img,
  .media-container--text-below-image .media-image svg,
  .media-container--text-below-image .media-image theme-video-media,
  .media-container--text-below-image .media-image .theme-video-media,
  .media-container--text-below-image .media-image .default-image,
  .media-container--text-below-image .media-video img,
  .media-container--text-below-image .media-video svg,
  .media-container--text-below-image .media-video theme-video-media,
  .media-container--text-below-image .media-video .theme-video-media,
  .media-container--text-below-image .media-video .default-image {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 450px;
    object-fit: cover;
  }

  .media-container--text-below-image .media-image .media-group-wrapper,
  .media-container--text-below-image .media-video .media-group-wrapper {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    background-color: inherit;
  }

  .media-container--text-below-image
    .media-image
    .media-group-wrapper
    .media-group-content,
  .media-container--text-below-image
    .media-video
    .media-group-wrapper
    .media-group-content {
    width: auto;
    height: auto;
  }
}