.image-carousel {
    max-width: 100%; /* Zorgt ervoor dat de carousel niet breder wordt dan zijn container */
    margin: auto; /* Centreert de carousel indien nodig */
}

.image-carousel .main-image {
    width: 600px; /* Gebruik een vaste breedte voor grotere schermen */
    height: 0;
    padding-bottom: 100%; /* Zorgt ervoor dat de hoogte evenredig is aan de breedte voor een vierkant */
    position: relative;
    overflow: hidden;
    margin-bottom: 30px; /* Ruimte tussen de hoofdafbeelding en de thumbnails */
}

.image-carousel .main-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Zorgt ervoor dat de afbeelding de container vult zonder vervorming */
}

.image-carousel .thumbnail-images {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.image-carousel .thumbnail-images img {
    width: 24%;
    height: 130px; /* Behoudt de vierkante vorm voor de thumbnails */
    object-fit: cover;
    cursor: pointer;
}

/* Media queries voor responsive design */

/* Voor schermen kleiner dan 768px (tablets en mobiele apparaten in landscape) */
@media (max-width: 768px) {
    .image-carousel .main-image {
        width: 90%; /* Gebruik een percentage om de hoofdfoto kleiner te maken op kleinere schermen */
        margin: 0 auto; /* Zorg ervoor dat het gecentreerd blijft */
    }
    
    .image-carousel .thumbnail-images img {
        width: 22%; /* Verklein de thumbnails een beetje voor kleinere schermen */
    }
}

/* Voor schermen kleiner dan 480px (mobiele telefoons in portrait) */
@media (max-width: 480px) {
    .image-carousel .main-image {
        width: 100%; /* Gebruik volledige breedte voor de hoofdfoto op mobiele telefoons */
        margin: 0 auto; /* Zorg ervoor dat het gecentreerd blijft */
        margin-bottom: 20px; /* Voeg hier wat extra ruimte toe onder de hoofdfoto */
    }
    
    .image-carousel .thumbnail-images {
        flex-wrap: wrap; /* Zorg dat de thumbnails onder elkaar vallen op zeer kleine schermen */
    }

    .image-carousel .thumbnail-images img {
        width: 48%; /* Verklein de thumbnails voor mobiele telefoons */
        margin-bottom: 10px; /* Zorg voor wat ruimte tussen de rijen thumbnails */
    }
}