@layer components {
  .catalog {
    display: grid;
    gap: var(--space-s);
    margin-block: var(--space-m) var(--space-3xl);
  }

  .catalog > div {
    display: grid;
    gap: var(--space-2xs) var(--space-inline-xl);
    padding-block-end: var(--space-s);
    border-block-end: 1px solid var(--card-border);
  }

  @media (min-width: 48rem) {
    .catalog > div { grid-template-columns: minmax(0, 20ch) minmax(0, 1fr); }
  }

  .catalog dt { font-weight: 700; }
  .catalog dt a { color: var(--ink); text-decoration-color: var(--blip); }
  .catalog dt a:hover { color: var(--blip-text); }
  .catalog dd { margin: 0; color: var(--ink-soft); }

  .card--screen img {
    display: block;
    inline-size: 200px;
    max-inline-size: 100%;
    margin-block-end: var(--space-m);
    background: var(--glass);
    image-rendering: pixelated;
    box-shadow: 0 0 0 4px var(--glass-bezel), 0 0 0 5px var(--card-border);
  }
}