/* Reset & Basis */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #ffffff;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    padding: 40px 24px;
}

/* Logo */
.logo {
    text-align: center;
    margin-bottom: 40px;
}

.logo img {
    max-width: 100px;
    width: 100%;
    height: auto;
}

/* Masonry grid */
.masonry {
    column-count: 4; /* Verander dit naar 3 of 4 om te vergelijken */
    column-gap: 30px; /* Tip: 50px is erg breed voor 4 kolommen, 30px oogt vaak rustiger */
    width: 100%;
}

.masonry img {
    width: 100% !important; /* Forceert de afbeelding in de kolombreedte */
    height: auto !important; /* Zorgt dat de verhouding intact blijft (niet indrukken) */
    display: block;
    margin-bottom: 30px; /* Zorg dat de witruimte onder gelijk is aan de column-gap */

    
    /* Start situatie: onzichtbaar */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Eind situatie: geladen */
.fade-in-img.is-loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 900px) {
    .masonry { column-count: 2; }
}

@media (max-width: 500px) {
    body { padding: 24px 16px; }
    .masonry { column-count: 1; }
}