@layer components {
  .ec-hero {
    --hero-under-chrome: 8rem;

    scroll-margin-block-start: var(--hero-under-chrome);
    padding-block-start: var(--ec-section-py-sm);
    background: var(--ec-bg-white);
  }

  .ec-hero__inner {
    display: grid;
    gap: var(--ec-space-24);
    align-items: end;
  }

  .ec-hero__visual {
    align-self: start;
  }

  .ec-hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--ec-space-24);
  }

  .ec-hero__text {
    display: flex;
    flex-direction: column;
    gap: var(--ec-space-12);
  }

  .ec-hero__title {
    color: var(--ec-text-primary);
    font-size: clamp(2.5rem, 1.86rem + 2.74vw, var(--ec-size-h1));
    font-weight: var(--ec-weight-black);
    line-height: var(--ec-leading-h1);
  }

  .ec-hero__title-accent {
    color: var(--ec-text-accent);
  }

  .ec-hero__lede {
    color: var(--ec-text-secondary);
    font-size: var(--ec-size-lg);
    line-height: var(--ec-leading-body-lg);
  }

  .ec-hero__card {
    padding: var(--ec-space-4);
    border-radius: var(--ec-radius-xl);
    background: var(--ec-bg-accent-light);
  }

  .ec-hero__reassurance {
    justify-content: center;
    padding-block: var(--ec-space-6);
  }

  @media (width >= 60rem) {
    .ec-hero__inner {
      grid-template-columns: minmax(0, 499fr) minmax(0, 765fr);
      column-gap: calc(var(--ec-space-32) * 2);
    }
  }
}