@layer sections{.mozaiek{gap:var(--space-2);grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(9rem,14vw,15rem);margin:0;padding:0;display:grid}.mozaiek--mozaiek .mozaiek__tile:first-child{grid-area:span 2/span 2}.mozaiek--mozaiek:has(>:nth-child(5)) .mozaiek__tile:nth-child(4){grid-row:span 2}.mozaiek--mozaiek:not(:has(>:nth-child(5))) .mozaiek__tile:nth-child(4){grid-column:span 2}.mozaiek--strook{gap:var(--space-2);scroll-snap-type:x mandatory;padding-block-end:var(--space-2);display:flex;overflow-x:auto}.mozaiek--strook .mozaiek__tile{aspect-ratio:4/5;scroll-snap-align:start;flex:0 0 clamp(16rem,32vw,26rem)}.mozaiek__tile{border-radius:var(--radius-lg);background:var(--color-surface-tint);position:relative;overflow:hidden}.mozaiek__tile img{object-fit:cover;block-size:100%;inline-size:100%;transition:transform 1.2s var(--ease-out), filter var(--dur-traag)}.mozaiek__tile:hover img{transform:scale(1.05)}.mozaiek__caption{inset-inline:var(--space-2);z-index:3;inline-size:fit-content;max-inline-size:calc(100% - 2 * var(--space-2));white-space:nowrap;text-overflow:ellipsis;border-radius:var(--radius-pill);background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--on-light-text);font-size:var(--text-small);font-weight:var(--weight-ui);opacity:0;transition:opacity var(--dur-basis) var(--ease-out), translate var(--dur-basis) var(--ease-out);padding:.5rem .875rem;display:block;position:absolute;inset-block-end:var(--space-2);overflow:hidden;translate:0 .5rem}.mozaiek__tile:hover .mozaiek__caption,.mozaiek__tile:focus-within .mozaiek__caption{opacity:1;translate:0}@media (hover:none){.mozaiek__caption{opacity:1;translate:0}}@media not (min-width:48rem){.mozaiek{grid-template-columns:repeat(2,minmax(0,1fr))}}}
