* {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

img {
    inline-size: 100%;
}

form > div{
    margin: 0;
    padding: .5em;
    display: grid;
    grid-template-columns: 6fr 4fr 6fr;
    grid-template-rows: auto auto;
    column-gap: .3em;
    border: 1px solid black;
}

div img{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    inline-size: 100%;
    max-block-size: 100px;
    max-height: 100%;
}

div p{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    margin: 10px 0 0 0;
}

.bovenaan p,
.verdelen p{
    font-weight: bold;
}

.Kop1{
    grid-column: 1 / 2;
}

.Kop2{
    grid-column: 2 / 3;
}

.Kop3{
    grid-column: 3 / 4;
}

div h3{
    grid-column: 1 / 3;
    grid-row: 2 / 3; /*De h3's op een nieuwe rij, zodat het niet over de afbeeldingen loopt*/
}

label{
    grid-column: 3 / 4;
    margin-block-start: .5em;
}

.verdelen label,
.verdelen p {
    grid-column: span 3; /* Hiermee wordt de label over alle drie de kolommen uitgebreid */
    margin-block-start: .5em;
}


/* Algemene stijl voor inputvelden */
input[type="number"] {
    width: 80px;
    padding: 5px;
}

button.btn.success {
    padding: 15px 30px; 
    font-size: 18px; 
    background-color: #dc3545; 
    color: white; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer;
}

button.btn.success:hover {
    background-color: #D72504; 
}

@media screen and (min-width: 768px){
    form > div{
        margin: 0;
        grid-template-columns: 300px 100px auto;
    }

    input[type="number"] {
        width: 100px;
    }

    .verdelen label {
        grid-column: span 2; /* Hiermee wordt de label over twee kolommen uitgebreid op grotere schermen */
    }
}