/* Thumbnail cards — an image on the shared collection card. Tokens come from design.css. */

.case-grid .thumb-card {
  display: flex;
  flex-direction: column;
}

.card-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
  margin-bottom: var(--space-3);
  border: 1px solid var(--line);
  background: var(--bg);
}

.thumb-card p { margin-bottom: var(--space-3); }

/* Keep every "Open" link on the same baseline across a row. */
.thumb-card .open {
  align-self: flex-start;
  align-items: center;
  margin-top: auto;
}

/* A full-width feature card sets its thumbnail beside the text instead of above it. */
@media (min-width: 901px) {
  .case-grid .thumb-card.feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    grid-template-rows: repeat(4, auto) 1fr;
    column-gap: var(--space-5);
  }
  .thumb-card.feature > * { grid-column: 1; }
  .thumb-card.feature .card-thumb {
    grid-column: 2;
    grid-row: 1 / span 5;
    align-self: center;
    margin-bottom: 0;
  }
  .thumb-card.feature .open {
    align-self: end;
    justify-self: start;
  }
}