/* Cards

A simple cards style. */

.cards {
  --grid-group-column-min: 200px;
  --grid-group-gap: 1.5rem;

  display: grid;
  gap: var(--grid-group-gap);

  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-group-column-min), 100%), 1fr));

  /* Add vertical rhythm margins. */
  margin-block: var(--spacing-m);
}

.card {
  padding: var(--spacing-xs);
  border: 1px solid var(--color-border);

  & > * {
    &:first-child {
      margin-block-start: 0;
    }

    &:last-child {
      margin-block-end: 0;
    }
  }
}

.card--highlight {
  border-color: var(--color-highlight);
}

.card--featured {
  grid-row: span 2;
  grid-column: span 2;
}

.card--gutter {
  padding-inline: var(--gutters);
}