.cards {
  display: grid;
  gap: calc(var(--spacing) * 4);

  @media (width >= 40rem) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  article {
    border-radius: var(--radius-xl);
    border: var(--stroke-border) solid var(--color-border-base-secondary);
    background-color: var(--rest);
    padding: calc(var(--spacing) * 6);
    transition: background-color 120ms var(--ease-out);

    &:hover {
      background-color: var(--hover);
    }
  }

  .name {
    font-family: var(--font-mono);
    font-size: var(--text-body-code);
    color: var(--color-text-base);
  }

  dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: calc(var(--spacing) * 4);
    row-gap: calc(var(--spacing) * 1);
    margin-block-start: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
  }

  dt {
    color: var(--color-text-base-secondary);
  }

  dd {
    font-family: var(--font-mono);
    color: var(--color-text-base-secondary);
  }
}