/* 2026-08-21 v1.3
 * - Added 40px vertical spacing around the mobile collage.
 * 2026-08-21 v1.2
 * - Recreated the supplied three-part clip-path composition on mobile.
 * - Kept the existing desktop grid and image rotation unchanged.
 * 2026-08-21 v1.1
 * - Moved reusable atmosphere collage presentation out of PHP.
 */
.sfeerfoto-collage { box-sizing:border-box; display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,1fr); grid-template-rows:repeat(2,minmax(0,1fr)); gap:clamp(10px,1vw,20px); width:100%; max-width:146dvh; max-height:100dvh; margin:auto; aspect-ratio:1.46/1; padding:80px; background:#f6f3ec; }
.sfeerfoto-collage figure { min-width:0; min-height:0; margin:0; overflow:hidden; }
.sfeerfoto-collage figure:first-child { grid-row:1/span 2; }
.sfeerfoto-collage img { display:block; width:100%; height:100%; object-fit:cover; opacity:1; transition:opacity .7s ease; transition-delay:var(--sfeerfoto-collage-delay,0ms); }
.sfeerfoto-collage figure:nth-child(2) img { --sfeerfoto-collage-delay:160ms; }
.sfeerfoto-collage figure:nth-child(3) img { --sfeerfoto-collage-delay:320ms; }
.sfeerfoto-collage.is-faded img { opacity:0; }
@media (max-width:719px) {
    .sfeerfoto-collage {
        position:relative;
        display:block;
        width:100%;
        max-width:620px;
        height:auto;
        max-height:none;
        aspect-ratio:1;
        margin:40px auto;
        padding:0;
        overflow:hidden;
    }
    .sfeerfoto-collage figure,
    .sfeerfoto-collage figure:first-child {
        position:absolute;
        width:48.3871%;
        height:48.3871%;
        grid-row:auto;
    }
    .sfeerfoto-collage figure:nth-child(1) {
        top:0;
        left:3.2258%;
        clip-path:polygon(0 0,100% 0,100% 33.3333%,86.6667% 33.3333%,86.6667% 100%,0 100%);
    }
    .sfeerfoto-collage figure:nth-child(2) {
        top:19.3548%;
        left:48.3871%;
    }
    .sfeerfoto-collage figure:nth-child(3) {
        top:51.6129%;
        left:3.2258%;
        clip-path:polygon(0 0,86.6667% 0,86.6667% 40%,100% 40%,100% 100%,0 100%);
    }
}
@media (prefers-reduced-motion:reduce) { .sfeerfoto-collage img{transition:none} }