@layer components {
  .archive-header {
    border-bottom: var(--border-default);
    padding: 40px 0 16px;
  }

  .archive-header__masthead {
    align-items: flex-end;
    display: grid;
    gap: var(--space-5);
    grid-template-columns: auto minmax(280px, 0.5fr) auto;
    justify-content: space-between;
    margin-bottom: 32px;
  }

  .archive-header__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    margin: 0 0 6px;
    text-transform: uppercase;
  }

  .archive-header__title {
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.9;
    margin: 0;

    a {
      color: inherit;
      text-decoration: none;
    }
  }

  @media (width <= 48rem) {
    .archive-header__masthead {
      align-items: flex-start;
      grid-template-columns: 1fr auto;
      margin-bottom: 24px;
    }

    .archive-search {
      grid-column: 1 / -1;
      grid-row: 2;
    }
  }
}