@layer components {
  .dig-cta-strip {
    background: var(--dig-color-primary);
    color: var(--dig-color-white);
  }

  .dig-cta-strip__inner {
    display: grid;
    grid-template-columns:
      minmax(0, 1.5fr)
      minmax(18rem, 0.5fr);
    align-items: end;
    gap: clamp(2.5rem, 6vw, 6rem);

    padding-block: clamp(4rem, 7vw, 6rem);
  }

  .dig-cta-strip__copy {
    max-width: 62rem;
  }

  .dig-cta-strip__eyebrow {
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);

    color: color-mix(in srgb, var(--dig-color-white) 65%, transparent);

    font-family: var(--dig-font-mono);
    font-size: var(--dig-font-size-xs);
    font-weight: var(--dig-font-weight-semibold);
    letter-spacing: var(--dig-letter-spacing-mono);
    text-transform: uppercase;
  }

  .dig-cta-strip__title {
    max-width: 54rem;
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);

    color: var(--dig-color-white);

    font-size: clamp(2rem, 3.6vw, 3.75rem);
    font-weight: var(--dig-font-weight-bold);
    line-height: var(--dig-line-height-tight);
    letter-spacing: var(--dig-letter-spacing-tight);
    text-wrap: balance;
  }

  .dig-cta-strip__subtitle {
    max-width: 48rem;
    margin: 0;

    color: color-mix(in srgb, var(--dig-color-white) 72%, transparent);

    font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
    line-height: var(--dig-line-height-body);
  }

  .dig-cta-strip__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--dig-spacing-sm);
  }

  .dig-cta-strip__actions .dig-btn {
    min-width: 11rem;
  }

  .dig-cta-strip__secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--dig-spacing-xs);

    color: var(--dig-color-white);

    font-size: var(--dig-font-size-small);
    font-weight: var(--dig-font-weight-semibold);
    text-decoration: none;

    opacity: 0.75;

    transition:
      opacity var(--dig-transition-fast),
      gap var(--dig-transition-fast);
  }

  .dig-cta-strip__secondary:hover,
  .dig-cta-strip__secondary:focus-visible {
    gap: var(--dig-spacing-sm);
    opacity: 1;
  }

  @media (max-width: 48rem) {
    .dig-cta-strip__inner {
      grid-template-columns: 1fr;
      align-items: start;
      gap: clamp(2rem, 8vw, 3rem);

      padding-block: clamp(3.5rem, 12vw, 5rem);
    }

    .dig-cta-strip__actions {
      width: 100%;
    }

    .dig-cta-strip__actions .dig-btn {
      width: 100%;
    }
  }
}