.cav-image-with-text {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  gap: 3.2rem;
  justify-content: center;
  margin-inline: auto;
  max-inline-size: 128rem;
  padding-block: 8rem;

  &.cav-image-with-text--image-first {
    flex-direction: row;
  }

  &.cav-image-with-text--text-first {
    flex-direction: row-reverse;
  }

  & > .cav-image-with-text__image-content {
    align-items: center;
    display: flex;
    flex-grow: 1;
    gap: 1.6rem;
    max-inline-size: max(48rem, min(50cqi, 64rem));
    padding-inline: 1.6rem;
    position: relative;

    &::before {
      background-size: cover;
      block-size: 24rem;
      content: "";
      position: absolute;
      inline-size: 24rem;
    }

    & video {
      z-index: 1;
      aspect-ratio: 16/9;
      object-fit: cover;
    }

    &.cav-image-with-text__image-content--swatch-end-end::before {
      inset-block-end: -7.2rem;
      inset-inline-end: -7.2rem;
    }

    &.cav-image-with-text__image-content--swatch-end-start::before {
      inset-block-end: -7.2rem;
      inset-inline-start: -7.2rem;
    }

    &.cav-image-with-text__image-content--swatch-start-end::before {
      inset-block-start: -7.2rem;
      inset-inline-end: -7.2rem;
    }

    &.cav-image-with-text__image-content--swatch-start-start::before {
      inset-block-start: -7.2rem;
      inset-inline-start: -7.2rem;
    }

    &.cav-image-with-text__image-content--swatch-1::before {
      background-image: url("swatch-1.png");
    }

    &.cav-image-with-text__image-content--swatch-2::before {
      background-image: url("swatch-2.png");
    }

    &.cav-image-with-text__image-content--swatch-3::before {
      background-image: url("swatch-3.png");
    }

    &.cav-image-with-text__image-content--swatch-4::before {
      background-image: url("swatch-4.png");
    }

    &.cav-image-with-text__image-content--swatch-5::before {
      background-image: url("swatch-5.png");
    }

    &.cav-image-with-text__image-content--swatch-6::before {
      background-image: url("swatch-6.png");
    }

    & > .cav-image:only-child {
      inline-size: 100%;
    }
    
    &:has(.cav-image--mask-tombstone-wide) {
      max-inline-size: max(48rem, min(62.5cqi, 80rem));
    }
    
    &:has(.cav-image:nth-of-type(2)) {
      max-inline-size: max(48rem, min(56.25cqi, 72rem));

      & > .cav-image:nth-of-type(1) {
        inline-size: calc((100% * 2 / 3) - (1.6rem * 2 / 3))
      }

      & > .cav-image:nth-of-type(2) {
        inline-size: calc((100% / 3) - (1.6rem / 3))
      }
    }
  }

  & > .cav-image-with-text__text-content {
    display: flex;
    flex-basis: 0;
    flex-direction: column;
    flex-grow: 999;
    gap: 4.8rem;
    justify-content: center;
    min-inline-size: calc(100% / 3);
    padding-block: 1.6rem;
    padding-inline: 3.2rem;

    &.cav-image-with-text__text-content--center {
      align-items: center;
      text-align: center;
    }

    &.cav-image-with-text__text-content--start {
      align-items: start;
      text-align: start;
    }

    & > * {
      max-inline-size: 32rem;
    }

    & > *:has(~ .cav-accordion) {
      max-inline-size: unset;
    }
  }
}

.shopify-section:first-child .cav-image-with-text__text-content {
  @media (max-width: 767px) {
    order: -1;
  }
}

@media (max-width: 767px) {
  .cav-image-with-text > .cav-image-with-text__image-content:has(.cav-image:nth-of-type(2)) {
    scale: 137.5%;
    transform-origin: bottom right;
  }

  .cav-image-with-text > .cav-image-with-text__text-content > * {
    margin-inline: auto;
  }
}

.cav-image-with-text:has(iframe) {
  display: block;
}

.cav-image-with-text:has(iframe) .cav-image-with-text__image-content {
  display: block;
  max-inline-size: 96rem;
  margin-inline: auto;
}

.cav-image-with-text:has(iframe) .cav-image-with-text__image-content::before {
  display: none;
}

.cav-image-with-text iframe {
  aspect-ratio: 16 / 9;
  inline-size: 100%;
  max-inline-size: 100%;
  border-radius: 0.4rem;
}