@layer components {
  .hub-hero { padding-block-end: clamp(2.5rem, 5vw, 4rem); }
  .hub-hero .hero__title {
    margin-block: 1.1rem .9rem;
    font-size: clamp(3.2rem, 7vw, 5.6rem);
  }
  .hub-hero .lead { max-inline-size: 34rem; }

  .hub-rows { padding-block-end: clamp(3rem, 6vw, 5rem); }

  .hub-row {
    display: grid;
    grid-template-columns: minmax(20rem, 1fr) minmax(22rem, 1.05fr);
    gap: 2rem clamp(3rem, 8vw, 8rem);
    align-items: center;
    padding-block: clamp(3rem, 6vw, 4.5rem);
    border-block-start: 1px solid var(--pw-border-soft);
  }

  .hub-row__kicker {
    display: flex;
    align-items: center;
    gap: .9rem;
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-2xs);
    letter-spacing: var(--pw-track-eyebrow);
    text-transform: uppercase;
    color: var(--pw-primary-soft);
  }
  .hub-row__kicker .icon {
    inline-size: 1rem;
    block-size: 1rem;
    stroke: currentColor;
  }

  .hub-row__title {
    margin-block: .9rem 1rem;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 300;
    letter-spacing: var(--pw-track-snug);
    line-height: 1.05;
  }
  .hub-row__title a { color: var(--pw-fg-strong); transition: color .18s; }
  .hub-row__title a:hover { color: var(--pw-primary-soft); }

  .hub-row__desc {
    max-inline-size: 30rem;
    color: var(--pw-fg-meta);
    line-height: 1.65;
  }

  .hub-row__links { display: grid; align-content: center; }

  .hub-row__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1.05rem;
    border-block-end: 1px solid var(--pw-border-soft);
    font-size: var(--pw-fs-base);
    color: var(--pw-fg-subtle);
    transition: color .18s, padding-inline-start .18s;
  }
  .hub-row__link:hover {
    color: var(--pw-fg-strong);
    padding-inline-start: .4rem;
  }

  .hub-row__arrow {
    color: var(--pw-fg-faint);
    transition: color .18s, translate .18s;
  }
  .hub-row__link:hover .hub-row__arrow {
    color: var(--pw-primary-soft);
    translate: .25rem 0;
  }


  @media (width < 52rem) {
    .hub-row { grid-template-columns: 1fr; gap: 1.5rem; }
    .hub-row__links { align-content: start; }
  }
}