/* Blok: Assortiment */
.asrt-head{
	display:flex; flex-wrap:wrap; gap:var(--sp-3);
	align-items:flex-end; justify-content:space-between; margin-bottom:2.6rem;
}
.asrt-head__link{ flex:none; padding-bottom:.3rem; }

.asrt{ display:grid; gap:var(--sp-4); }
@media (min-width:640px){ .asrt{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){
	.asrt--3{ grid-template-columns:repeat(3,1fr); }
	.asrt--4{ grid-template-columns:repeat(4,1fr); }
}

.asrt__item{
	display:flex; flex-direction:column; overflow:hidden;
	background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
	color:inherit; text-decoration:none;
	transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
a.asrt__item:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-strong); color:inherit; }

.asrt__media{
	aspect-ratio:var(--asrt-ratio, 16/11);
	overflow:hidden;
	background:var(--asrt-media-bg, var(--mist));
}
.asrt__img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
a.asrt__item:hover .asrt__img{ transform:scale(1.04); }

/* Vrijstaande productfoto: helemaal in beeld, met lucht eromheen. De foto
   raakt de rand van de kaart dan niet, want een stoel die tegen de rand aan
   staat leest als afgesneden — precies wat we hier wilden voorkomen.
   Ook geen zoom bij hover: een vrijstaande foto die opschaalt binnen zijn
   eigen vlak ziet er onrustig uit. */
.asrt--fit-contain .asrt__img{ object-fit:contain; padding:var(--sp-2); }
a.asrt--fit-contain .asrt__item:hover .asrt__img,
.asrt--fit-contain a.asrt__item:hover .asrt__img{ transform:none; }

.asrt__body{ padding:var(--sp-3) var(--sp-3) var(--sp-4); display:flex; flex-direction:column; gap:.6rem; flex:1; }
.asrt__count{ color:var(--ink-mute); }
.asrt__title{ font-size:var(--fs-h4); color:var(--ink); }
.asrt__text{ color:var(--ink-soft); font-size:.96rem; }
.asrt__link{ margin-top:auto; padding-top:.4rem; }

/* Eerste kaart groot */
@media (min-width:1000px){
	.asrt--feature{ grid-auto-rows:auto; }
	.asrt--feature .asrt__item:first-child{ grid-column:span 2; grid-row:span 2; }
	.asrt--feature .asrt__item:first-child .asrt__media{ aspect-ratio:16/10; }
	.asrt--feature .asrt__item:first-child .asrt__title{ font-size:var(--fs-h3); }
	.asrt--feature.asrt--4 .asrt__item:first-child{ grid-column:span 2; grid-row:span 1; }
}

.band .asrt__item{ background:var(--inset); border-color:var(--band-hair); }
.band .asrt__title{ color:#fff; }
.band .asrt__text{ color:rgba(255,255,255,.74); }
.band .asrt__media{ background:var(--asrt-media-bg, var(--band-hair)); }
.band .asrt__count{ color:rgba(255,255,255,.6); }