/* Portfolio index. Tokens and chrome come from tokens.css / site.css. */
.portfolio-index { padding-block: var(--s-7) var(--s-8); }
.portfolio-index__intro { display: grid; gap: var(--s-3); max-width: 42rem; margin-bottom: var(--s-7); }
.portfolio-index__intro .lead { color: var(--fog); }
.portfolio-index__grid { display: grid; gap: var(--s-7); }
.portfolio-card { margin: 0; }
.portfolio-card__link {
  display: grid;
  gap: var(--s-5);
  color: inherit;
  text-decoration: none;
}
.portfolio-card__plate { margin: 0; aspect-ratio: 3 / 2; }
.portfolio-card__body { display: grid; justify-items: start; gap: var(--s-4); }
.portfolio-card__body .lead { max-width: 46ch; }
.portfolio-card__body p { max-width: 58ch; }
.portfolio-card__credits {
  font-family: var(--font-type);
  font-size: max(12px, var(--fs-micro));
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fog);
}
@media (min-width: 56.25rem) {
  .portfolio-card__link {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: var(--s-7);
  }
}