@layer components {
  .releases-hero {
    padding-block: 0;
    border-block-end: 1px solid var(--pw-border);
  }
  .releases-hero__copy {
    display: flex;
    max-inline-size: 68rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.35rem;
    padding-block: clamp(3rem, 5vw, 4.5rem) clamp(3.5rem, 6vw, 5.5rem);
  }
  .releases-hero .hero__title {
    max-inline-size: 16ch;
    margin: 0;
    font-size: clamp(2.75rem, 5vw, 4.75rem);
    line-height: .96;
    text-align: start;
    text-wrap: balance;
  }
  .releases-hero .lead {
    max-inline-size: 45rem;
    margin: 0;
    text-align: start;
    text-wrap: pretty;
  }

  .releases-section {
    padding-block: clamp(3rem, 6vw, 5.5rem);
  }
  .releases-layout {
    display: grid;
    grid-template-columns: minmax(17rem, .65fr) minmax(0, 1.35fr);
    gap: clamp(3rem, 8vw, 7rem);
    max-inline-size: 68rem;
  }
  .releases-intro {
    align-self: start;
  }
  .releases-label,
  .release-entry__body > span {
    display: block;
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-2xs);
    letter-spacing: var(--pw-track-eyebrow);
    text-transform: uppercase;
  }
  .releases-label {
    color: var(--pw-secondary-soft);
  }
  .releases-intro h2 {
    margin: .75rem 0 1.25rem;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 300;
    letter-spacing: var(--pw-track-snug);
    line-height: 1.08;
    text-wrap: balance;
  }
  .releases-intro p {
    margin: 0 0 1.25rem;
    color: var(--pw-fg-meta);
    line-height: 1.7;
  }
  .releases-intro a {
    color: var(--pw-primary-soft);
    transition: color .2s, translate .2s;

    &:hover {
      color: var(--pw-fg-strong);
      translate: .2rem 0;
    }
  }

  .releases-feed {
    border-block-start: 1px solid var(--pw-border-soft);
  }
  .release-entry {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: start;
    padding-block: 1.75rem;
    border-block-end: 1px solid var(--pw-border-soft);
  }
  .release-entry time,
  .release-entry > strong {
    font-family: var(--pw-font-mono);
    font-variant-numeric: tabular-nums;
  }
  .release-entry time {
    padding-block-start: .25rem;
    font-size: var(--pw-fs-2xs);
    letter-spacing: .03em;
    color: var(--pw-fg-faint);
  }
  .release-entry__body > span {
    margin-block-end: .4rem;
    color: var(--pw-fg-faint);
  }
  .release-entry__body h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2.3vw, 1.9rem);
    font-weight: 350;
    line-height: 1.15;
  }
  .release-entry__body h2 a {
    color: var(--pw-fg-strong);
  }
  .release-entry__body p {
    max-inline-size: 42rem;
    margin: .55rem 0 0;
    font-size: var(--pw-fs-sm);
    line-height: 1.55;
    color: var(--pw-fg-meta);
  }
  .release-entry > strong {
    padding-block-start: .1rem;
    font-size: var(--pw-fs-md);
    font-weight: 400;
    color: var(--pw-primary-soft);
  }
  .releases-empty {
    padding-block: 2rem;
    color: var(--pw-fg-faint);
  }

  @media (width < 52rem) {
    .releases-layout {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (width < 40rem) {
    .releases-hero__copy {
      padding-block: 2.5rem 3.5rem;
    }
    .releases-hero .hero__title {
      font-size: clamp(2.5rem, 11vw, 3.25rem);
    }
    .release-entry {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: .75rem 1rem;
    }
    .release-entry time {
      grid-column: 1 / -1;
    }
  }
}