/*------------------------------------*\
    
    Contained Image + Text Block
    Standard-height media with rounded corners inside container-fluid.
    Figma: idk-bcd-redesign-jb-edits-CURRENT (Half Text and Half Standard Media, Cover - White).

    Layout:
    - Through 1024px: stacked, image above text (DOM text first, flex column-reverse).
    - 1025px+: row, text and media with 32px gap; media fixed width scales at 1367px.
    - contained-image-text--media-right: text left, image right (default row).
    - contained-image-text--media-left: row-reverse, image left, text right.
    - contained-image-text--image-contain: img height auto, object-fit contain,
      border-radius on the img (frame is not clipped).

    Breakpoints align with half-image-text (1025 desktop) and custom-properties
    (768 tablet band, 1367 large desktop image width).

\*------------------------------------*/

.contained-image-text {
  width: 100%;
  padding-top: var(--section-margins);
  padding-bottom: var(--section-margins);
}

.contained-image-text--bg-white {
  background-color: var(--color-white);
}

.contained-image-text--bg-off-white {
  background-color: var(--color-off-white);
}

.contained-image-text__flex {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 52px;
}

.contained-image-text__text,
.contained-image-text__media {
  position: relative;
  flex: 1 1 100%;
  min-width: 0;
}

.contained-image-text__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}



.contained-image-text__media {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.contained-image-text__media-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 20px;
  aspect-ratio: 664 / 350;
}

.contained-image-text__media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.contained-image-text--image-contain .contained-image-text__media-frame {
  overflow: visible;
  border-radius: 0;
  aspect-ratio: auto;
  height: auto;
}

.contained-image-text--image-contain .contained-image-text__media-frame img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 20px;
}

.date {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-paragraph-light);
  text-transform: uppercase;
  font-size: 18px;
  line-height: 90%;
  letter-spacing: 2px;
  font-weight: 700;
  margin-bottom: var(--paragaph-spacing);
}
.date i {
  font-size: 35px;
    background: -webkit-linear-gradient(#44D62C, #009CDE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


@media (min-width: 768px) and (max-width: 1119px) {
  .contained-image-text__media-frame {
    aspect-ratio: auto;
    height: 350px;
    max-width: 664px;
    margin-left: auto;
    margin-right: auto;
  }

  .contained-image-text--image-contain .contained-image-text__media-frame {
    height: auto;
  }
}

@media (min-width: 1200px) {
  .contained-image-text__flex {
    flex-direction: row;
    align-items: stretch;
    gap: 32px;
  }

  .contained-image-text--media-left .contained-image-text__flex {
    flex-direction: row-reverse;
  }

  .contained-image-text__text {
    flex: 1 1 0;
    justify-content: center;
  }

  .contained-image-text--media-right .contained-image-text__text {
    padding-right: 52px;
  }

  .contained-image-text--media-left .contained-image-text__text {
    padding-left: 52px;
    padding-right: 0;
  }

  .contained-image-text__media {
    flex: 0 0 auto;
    align-self: stretch;
    align-items: stretch;
    justify-content: center;
    width: auto;
  }

  .contained-image-text--image-contain .contained-image-text__media {
    align-items: center;
  }

  .contained-image-text__media-frame {
    width: 604px;
    max-width: 100%;
    height: 100%;
    min-height: 320px;
    aspect-ratio: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .contained-image-text--image-contain .contained-image-text__media-frame {
    height: auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .contained-image-text--image-contain .contained-image-text__media-frame img {
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1367px) {
  .contained-image-text__media-frame {
    width: 728px;
  }
}