@layer components {

  .cta-imagery {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
    isolation: isolate;
  }

  .cta-imagery::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
      ellipse 70% 120% at 50% 140%,
      color-mix(in oklch, var(--primary-dark) 60%, transparent) 0%,
      transparent 70%
    );
    pointer-events: none;
    z-index: 0;
  }

  .cta-imagery::after {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 1px;
    background: color-mix(in oklch, var(--white) 12%, transparent);
    pointer-events: none;
    z-index: 0;
  }

  .cta-imagery {
    border-block-end: 1px solid color-mix(in oklch, var(--white) 8%, transparent);
  }

  .cta-imagery__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: center;
    gap: calc(var(--container-gap) * 1.5);
  }

  .cta-imagery__content {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
    max-inline-size: 52ch;
  }

  .cta-imagery__eyebrow {
    display: inline-block;
    align-self: flex-start;
    inline-size: fit-content;
    margin: 0;
    font-size: var(--text-s);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide-caps);
    text-transform: uppercase;
    color: var(--white);
    line-height: var(--leading-none);
    padding-block-end: var(--space-2xs);
    background-image: linear-gradient(to right, var(--primary-light) 0%, var(--secondary) 100%);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% var(--line-thick);
  }

  .cta-imagery__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--heading-m);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--white);
    text-wrap: balance;
  }

  .cta-imagery__subheading {
    margin: 0;
    font-size: var(--text-l);
    line-height: var(--leading-relaxed);
    color: color-mix(in oklch, var(--white) 78%, transparent);
    max-inline-size: 48ch;
  }

  .cta-imagery__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin-block-start: var(--space-s);
  }

  .cta-imagery__media {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: var(--space-m);
    min-block-size: 26rem;
  }

  .cta-imagery__media-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-l);
    background: transparent;
    will-change: transform;
    -webkit-mask-image: radial-gradient(ellipse 110% 110% at 50% 50%, #000 55%, transparent 100%);
            mask-image: radial-gradient(ellipse 110% 110% at 50% 50%, #000 55%, transparent 100%);
  }

  .cta-imagery__media-item--tall {
    grid-column: 1;
    grid-row: 1 / span 2;
    aspect-ratio: 3 / 4;
  }

  .cta-imagery__media-item--top {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: 4 / 3;
  }

  .cta-imagery__media-item--bot {
    grid-column: 2;
    grid-row: 2;
    aspect-ratio: 4 / 3;
  }

  .cta-imagery__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.78) brightness(0.88);
    mix-blend-mode: luminosity;
    opacity: 0.92;
  }

  .cta-imagery__media-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(
        ellipse 90% 90% at 50% 50%,
        transparent 40%,
        color-mix(in oklch, var(--primary-ultra-dark) 65%, transparent) 100%
      ),
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--primary) 25%, transparent) 0%,
        transparent 35%,
        transparent 65%,
        color-mix(in oklch, var(--primary-ultra-dark) 55%, transparent) 100%
      );
    pointer-events: none;
  }

  @media (max-width: 60em) {
    .cta-imagery__inner {
      grid-template-columns: 1fr;
      gap: var(--container-gap);
    }

    .cta-imagery__media {
      min-block-size: 0;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
    }

    .cta-imagery__media-item--top,
    .cta-imagery__media-item--bot {
      display: none;
    }

    .cta-imagery__media-item--tall {
      grid-column: 1;
      grid-row: 1;
      aspect-ratio: 16 / 10;
    }

    .cta-imagery__actions .btn {
      flex: 1 1 auto;
      justify-content: center;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cta-imagery__media-item,
    .cta-imagery__canvas {
      will-change: auto;
      transform: none !important;
    }
  }

  .cta-imagery--canvas {
    background: var(--primary-ultra-dark);
  }

  .cta-imagery--canvas::before {
    background:
      linear-gradient(
        90deg,
        var(--primary-ultra-dark) 0%,
        var(--primary-ultra-dark) 32%,
        color-mix(in oklch, var(--primary-ultra-dark) 94%, transparent) 46%,
        color-mix(in oklch, var(--primary-ultra-dark) 65%, transparent) 65%,
        color-mix(in oklch, var(--primary-ultra-dark) 25%, transparent) 88%,
        transparent 100%
      ),
      linear-gradient(
        180deg,
        color-mix(in oklch, var(--primary-ultra-dark) 35%, transparent) 0%,
        transparent 30%,
        transparent 70%,
        color-mix(in oklch, var(--primary-ultra-dark) 45%, transparent) 100%
      );
    z-index: 1;
  }

  .cta-imagery--canvas .cta-imagery__inner {
    grid-template-columns: minmax(0, 1fr);
    min-block-size: 28rem;
    align-items: center;
  }

  .cta-imagery--canvas .cta-imagery__content {
    position: relative;
    z-index: 2;
    max-inline-size: 48ch;
  }

  .cta-imagery__canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    will-change: transform;
  }

  .cta-imagery__canvas-img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center right;
    display: block;
    filter: saturate(0.85) brightness(0.92);
  }

  @media (max-width: 60em) {
    .cta-imagery--canvas .cta-imagery__inner {
      min-block-size: 0;
    }

    .cta-imagery--canvas::before {
      background:
        linear-gradient(
          180deg,
          color-mix(in oklch, var(--primary-ultra-dark) 78%, transparent) 0%,
          color-mix(in oklch, var(--primary-ultra-dark) 72%, transparent) 100%
        );
    }

    .cta-imagery--canvas .cta-imagery__canvas-img {
      object-position: center;
      opacity: 0.7;
    }
  }

}