/* Werkzaamheden */
.werkzaamheden {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 16px;
    grid-row-gap: 0px;
}

.werk1 {
    text-align: left;
    grid-area: 1 / 1 / 2 / 2;
}

.werk2 {
    text-align: left;
    grid-area: 1 / 2 / 2 / 3;
}

.werk3 {
    text-align: left;
    grid-area: 1 / 3 / 2 / 4;
}

/* logo's */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(7, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    align-items: center;
}

.logo_grid1 {
    grid-area: 1 / 1 / 2 / 2;
}

.logo_grid2 {
    grid-area: 1 / 2 / 2 / 3;
}

.logo_grid3 {
    grid-area: 1 / 3 / 2 / 4;
}

.logo_grid4 {
    grid-area: 2 / 1 / 3 / 2;
}

.logo_grid5 {
    grid-area: 2 / 2 / 3 / 3;
}

.logo_grid6 {
    grid-area: 2 / 3 / 3 / 4;
}

.logo_grid7 {
    grid-area: 3 / 1 / 4 / 2;
}

.logo_grid8 {
    grid-area: 3 / 2 / 4 / 3;
}

.logo_grid9 {
    grid-area: 3 / 3 / 4 / 4;
}

.logo_grid10 {
    grid-area: 4 / 1 / 5 / 2;
}

.logo_grid11 {
    grid-area: 4 / 2 / 5 / 3;
}

.logo_grid12 {
    grid-area: 4 / 3 / 5 / 4;
}

.logo_grid13 {
    grid-area: 5 / 1 / 6 / 2;
}

.logo_grid14 {
    grid-area: 5 / 2 / 6 / 3;
}

.logo_grid15 {
    grid-area: 5 / 3 / 6 / 4;
}

.logo_grid16 {
    grid-area: 6 / 1 / 7 / 2;
}

.logo_grid17 {
    grid-area: 6 / 2 / 7 / 3;
}

.logo_grid18 {
    grid-area: 6 / 3 / 7 / 4;
}

.logo_grid19 {
    grid-area: 7 / 1 / 8 / 2;
}

.logo_grid20 {
    grid-area: 7 / 2 / 8 / 3;
}

.logo_grid21 {
    grid-area: 7 / 3 / 8 / 4;
}

.logo_grid22 {
    grid-area: 8 / 1 / 9 / 2;
}

.logo_grid23 {
    grid-area: 8 / 2 / 9 / 3;
}

.logo_grid24 {
    grid-area: 8 / 3 / 9 / 4;
}

.logo_grid25 {
    grid-area: 9 / 1 / 10 / 2;
}

.logo_grid26 {
    grid-area: 10 / 2 / 10 / 3;
}

.logo_grid27 {
    grid-area: 11 / 3 / 10 / 4;
}

/* Responsive styles */
@media screen and (max-width: 780px) {
    .werkzaamheden {
        display: block;
        grid-template-columns: unset;
        grid-template-rows: unset;
        grid-column-gap: unset;
        grid-row-gap: unset;
        align-items: start;
    }

    .werk1,
    .werk2,
    .werk3 {
        float: left;
        width: 100%;
        grid-area: unset;
        margin-bottom: 1.5rem;
    }
}

@media screen and (max-width: 640px) {
    .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(11, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        align-items: center;
    }

    .logo_grid1 {
        grid-area: 1 / 1 / 2 / 2;
    }

    .logo_grid2 {
        grid-area: 1 / 2 / 2 / 3;
    }

    .logo_grid3 {
        grid-area: 2 / 1 / 3 / 2;
    }

    .logo_grid4 {
        grid-area: 2 / 2 / 3 / 3;
    }

    .logo_grid5 {
        grid-area: 3 / 1 / 4 / 2;
    }

    .logo_grid6 {
        grid-area: 3 / 2 / 4 / 3;
    }

    .logo_grid7 {
        grid-area: 4 / 1 / 5 / 2;
    }

    .logo_grid8 {
        grid-area: 4 / 2 / 5 / 3;
    }

    .logo_grid9 {
        grid-area: 5 / 1 / 6 / 2;
    }

    .logo_grid10 {
        grid-area: 5 / 2 / 6 / 3;
    }

    .logo_grid11 {
        grid-area: 6 / 1 / 7 / 2;
    }

    .logo_grid12 {
        grid-area: 6 / 2 / 7 / 3;
    }

    .logo_grid13 {
        grid-area: 7 / 1 / 8 / 2;
    }

    .logo_grid14 {
        grid-area: 7 / 2 / 8 / 3;
    }

    .logo_grid15 {
        grid-area: 8 / 1 / 9 / 2;
    }

    .logo_grid16 {
        grid-area: 8 / 2 / 9 / 3;
    }

    .logo_grid17 {
        grid-area: 9 / 1 / 10 / 2;
    }

    .logo_grid18 {
        grid-area: 9 / 2 / 10 / 3;
    }

    .logo_grid19 {
        grid-area: 10 / 1 / 11 / 2;
    }

    .logo_grid20 {
        grid-area: 10 / 2 / 11 / 3;
    }

    .logo_grid21 {
        grid-area: 11 / 1 / 12 / 2;
    }

    .logo {
        margin: 0 6%;
    }
}

@media screen and (max-width: 360px) {
    .grid {
        display: block;
        grid-template-columns: unset;
        grid-template-rows: unset;
        grid-column-gap: unset;
        grid-row-gap: unset;
        align-items: start;
    }

    .logo_grid1,
    .logo_grid2,
    .logo_grid3,
    .logo_grid4,
    .logo_grid5,
    .logo_grid6,
    .logo_grid7,
    .logo_grid8,
    .logo_grid9,
    .logo_grid10,
    .logo_grid11,
    .logo_grid12,
    .logo_grid13,
    .logo_grid14,
    .logo_grid15,
    .logo_grid16,
    .logo_grid17,
    .logo_grid18,
    .logo_grid19,
    .logo_grid20,
    .logo_grid21 {
        float: left;
        width: 100%;
        grid-area: unset;
    }
}