@layer components {
  .changelog { display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 3.5rem); }

  .changelog__release {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-block-start: 1.75rem;
    border-block-start: 1px solid var(--pw-border);
    &:first-child { padding-block-start: 0; border-block-start: 0; }
  }

  .changelog__head { display: flex; align-items: baseline; gap: .9rem; margin-block-end: .5rem; }
  .changelog__ver {
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-lg);
    color: var(--pw-fg-strong);
  }
  .changelog__ver--old { color: var(--pw-fg-meta); }
  .changelog__date {
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-2xs);
    letter-spacing: var(--pw-track-eyebrow);
    text-transform: uppercase;
    color: var(--pw-fg-faint);
  }

  .changelog__section {
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-2xs);
    font-weight: 400;
    letter-spacing: var(--pw-track-eyebrow);
    text-transform: uppercase;
    color: var(--pw-primary-soft);
    margin-block: 1rem .35rem;
  }
  .changelog__items {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding-inline-start: 1.15rem;
    & li { list-style: disc; color: var(--pw-fg-subtle); line-height: 1.65; }
    & code {
      font-family: var(--pw-font-mono);
      font-size: .9em;
      color: var(--pw-fg-strong);
      overflow-wrap: anywhere;
    }
  }
  .changelog__none { color: var(--pw-fg-faint); font-size: var(--pw-fs-sm); }
}