#topImage{
    display: flex;
    justify-content: center;
}
#topImage img{
    width: 100%;    
    padding-bottom: 80px;
}



/* mobile: 1 rij voor foto's */
.vertical{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 25px;
    text-align: center;

    padding-bottom: 25px;
}
.vertical img{
    max-width: 90%;
    margin: auto;   /* Ensure the image itself centers */
}

.horizontal{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 25px;
    text-align: center;

    padding-bottom: 25px;
}
.horizontal img{
    max-width: 90%;
    margin: auto;
}

.video{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 25px;
    text-align: center;
}
.video video{
    width: 90%;
    margin: auto;
}



.sim{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 25px;
    text-align: center;

    padding-bottom: 25px;
}
.sim img{
    max-width: 90%;
    margin: auto;
}



.setup{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 25px;
    text-align: center;

    padding-bottom: 25px;
}
.setup img{
    max-width: 90%;
    margin: auto;
}


/* 2 rijen voor foto's */
@media (min-width: 550px){
    #topImage img{
        max-width: 90%;
    }    

    .vertical{
        grid-template-columns: repeat(2, 1fr);
    }
    .vertical img{
        padding-bottom: 25px;
    }
    
    .horizontal{
        grid-template-columns: repeat(2, 1fr);
    }
    .horizontal img{
        padding-bottom: 25px;
    }
    
    .video{
        grid-template-columns: repeat(2, 1fr);
    }

    .sim{
        grid-template-columns: repeat(2, 1fr);
    }
    .sim img{
        padding-bottom: 25px;
    }

    .setup{
        grid-template-columns: repeat(2, 1fr);
    }
    .setup img{
        padding-bottom: 25px;
    }
}

/* 3 rijen voor foto's */
@media (min-width: 800px){
    #topImage img{
        max-width: 80%;
    }

    .sim{
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 4 rijen voor foto's */
@media (min-width: 1200px){
    .vertical{
        grid-template-columns: repeat(4, 1fr);
    }

    #topImage img{
        max-width: 1000px;
    }
}


/* 5 rijen voor foto's */
@media (min-width: 1500px){
    .setup{
        grid-template-columns: repeat(5, 1fr);
    }

    #topImage img{
        max-width: 1500px;
    }
}