/* Blok: Kaarten */
.card-grid{ display:grid; gap:var(--sp-4); }
.card-grid--auto{ grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
@media (min-width:640px){
	.card-grid--2, .card-grid--3, .card-grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1000px){
	.card-grid--3{ grid-template-columns:repeat(3,1fr); }
	.card-grid--4{ grid-template-columns:repeat(4,1fr); }
}

.card{
	position:relative; display:flex; flex-direction:column;
	background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
	overflow:hidden;
	transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-strong); }
.card__media{ aspect-ratio:16/11; overflow:hidden; }
.card__img{ width:100%; height:100%; display:block; }
.card__img--cover{ object-fit:cover; }
.card__img--contain{ object-fit:contain; }
.card__body{ padding:var(--sp-3) var(--sp-3) var(--sp-4); display:flex; flex-direction:column; gap:.7rem; flex:1; }
.card__title{ font-size:var(--fs-h4); }
.card__text{ color:var(--ink-soft); }
.card__foot{ margin-top:auto; padding-top:.5rem; }

/* Kaarten op een donkere band */
.band .card{ background:var(--inset); border-color:var(--band-hair); }
.band .card__title{ color:#fff; }
.band .card__text{ color:rgba(255,255,255,.74); }