.card__frame {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
}

.gallery--card .gallery__slide {
  aspect-ratio: 3 / 4;
}

.card__name {
  margin-top: var(--s-4);
  font: 400 22px/1.25 var(--serif);
  color: var(--ivory);
}

.card__name a {
  transition: color var(--duration-quick) var(--ease);
}

.card__name a:hover {
  color: var(--gold);
}

.card__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-2);
  font: 500 11px/1.4 var(--sans);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}

@media (hover: hover) {
  .card__frame:is(:hover, :has(:focus-visible)) .gallery__front {
    opacity: 0;
  }
}

@media (width <= 899px) {
  .card__name {
    margin-top: var(--s-3);
    font-size: 19px;
  }
}