/**


 _____       _           _ _ 
|  __ \     | |         (_|_)
| |  \/ __ _| | ___ _ __ _ _ 
| | __ / _` | |/ _ \ '__| | |
| |_\ \ (_| | |  __/ |  | | |
 \____/\__,_|_|\___|_|  |_| |
                         _/ |
                        |__/ 
*/


/* --------------------------------------------------------- Galerij hoodtext */
.section-1 {
    background-color: #22333b00;
    color: white;
    padding-top: 5%;
    text-align: center;
}

.section-1 blockquote {
    font-size: 5em;
    font-style: italic;
}

.section-1 p {
    color: white;
    padding-bottom: 5%;
}

/* --------------------------------------------------------- Galerij sectie */
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 5%;
    box-sizing: border-box; /* Zorgt ervoor dat de elementen niet buiten de container vallen */
}

.image-container {
    display: flex;
    gap: 2em;
    flex-wrap: wrap; /* Zorgt ervoor dat afbeeldingen onder elkaar vallen als er niet genoeg ruimte is */
    justify-content: center; /* Zorgt voor uitlijning van de afbeeldingen */
    width: 100%;
}

.image-container img {
    width: 30%;
    height: auto;
    max-width: 100%; /* Zorg ervoor dat de afbeeldingen niet groter worden dan hun container */
}

/* Animatie */
.image-container {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.image-container.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ------------------------------ MOBILE-FRIENDLY STYLES ------------------------------ */

/* Als het scherm kleiner is dan 768px (tablet/telefoon) */
@media (max-width: 768px) {

    /* Section 1 */
    .section-1 {
        margin-top: 30%;
    }

    .section-1 blockquote {
        font-size: 3em; 
    }

    .section-1 p {
        font-size: 1em;
    }

    /* Galerij */
    .gallery {
        flex-direction: column; /* Zet de afbeeldingen onder elkaar */
        gap: 1em; /* Ruimte tussen de afbeeldingen */
        width: 100%;
        padding: 0 5%; /* Kleine padding aan de zijkanten */
    }

    .image-container img {
        width: 100%; /* Zorg ervoor dat de afbeelding de volledige breedte benut */
    }
}

/* Als het scherm kleiner is dan 480px (mobiel) */
@media (max-width: 480px) {

    /* Section 1 */
    .section-1 blockquote {
        font-size: 2.5em; 
    }

    .section-1 p {
        font-size: 0.9em; 
    }

    /* Galerij */
    .gallery {
        gap: 1.5em; /* Ruimte tussen de afbeeldingen op klein scherm */
    }

    .image-container img {
        width: 100%; /* Zorg ervoor dat de afbeeldingen nog groter zijn op kleinste schermen */
    }
}