@layer ec.pages {
  .ec-catalog-hero {
    padding-block: var(--ec-space-8) var(--ec-space-6);
  }

  .ec-catalog-hero__panel {
    display: grid;
    gap: var(--ec-space-6);
    padding: var(--ec-space-8);
    border-radius: var(--ec-radius-2xl);
    background: linear-gradient(
      110deg,
      var(--ec-sys-color-primary-pressed) 0%,
      var(--ec-sys-color-primary-hover) 55%,
      var(--ec-sys-color-primary) 100%
    );
    color: var(--ec-sys-color-on-primary);
    box-shadow: var(--ec-elevation-3);
  }

  .ec-catalog-hero__copy {
    display: grid;
    max-width: 68ch;
    gap: var(--ec-space-3);
  }

  .ec-catalog-hero__eyebrow {
    font-size: var(--ec-type-label-md-size);
    font-weight: var(--ec-font-weight-extrabold);
    letter-spacing: 0.08em;
    line-height: var(--ec-type-label-md-line);
    text-transform: uppercase;
  }

  .ec-catalog-hero__title {
    color: var(--ec-sys-color-on-primary);
    font-size: var(--ec-type-display-lg-size);
    font-weight: var(--ec-font-weight-extrabold);
    line-height: var(--ec-type-display-lg-line);
    letter-spacing: -0.04em;
  }

  .ec-catalog-hero__description {
    color: var(--ec-sys-color-on-primary);
    font-size: var(--ec-type-body-lg-size);
    line-height: var(--ec-type-body-lg-line);
    opacity: 0.9;
  }

  .ec-catalog-main {
    padding-block-end: var(--ec-space-9);
  }

  @media (max-width: 839px) {
    .ec-catalog-hero__panel {
      padding: var(--ec-space-6);
    }
  }

  @media (max-width: 479px) {
    .ec-catalog-hero {
      padding-block-start: var(--ec-space-5);
    }

    .ec-catalog-hero__panel {
      padding: var(--ec-space-5);
      border-radius: var(--ec-radius-xl);
    }
  }
}