p.main {
    text-align: left;
}

.img-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
            "img1 text1"
            "img2 img3 "
            "img4 img5 ";
    grid-column-gap: 4.8vw;
    grid-row-gap: 3vw;
    margin-top: 4em;
    margin-bottom: 4.5em;
}

.img-grid.text-left {
    grid-template-areas:
            "text1 img2"
            "img3  img2"
            "img3  img1";
}

.img-grid p {
    line-height: 1.8;
    font-size: 1em;
}

.img-grid img {
    width: 100%;
}

.img1 {
    grid-area: img1;
}

.img2 {
    grid-area: img2;
}

.img3 {
    grid-area: img3;
}

.img4 {
    grid-area: img4;
}

.img5 {
    grid-area: img5;
}

.text1 {
    grid-area: text1;
}

.text1.bg-white {
    background-color: var(--white);
    padding: 1.5em 1em;
}

.anchor {
    position: absolute;
    top: -7em;
}

@media (max-width: 1040px) {
    .img-grid,
    .img-grid.text-left {
        grid-template-columns: 2fr 1fr 1fr 2fr;
        grid-template-rows: 20vw auto;
        grid-template-areas:
            "img1  img2  img2  img3"
            "text1 text1 text1 text1"
            "img4  img4  img5  img5";
        grid-column-gap: 2vw;
        grid-row-gap: 4vw;
    }

    .text1 p {
        margin: 0;
    }

    .img1,
    .img2,
    .img3 {
        width: auto;
        height: 100%;
    }
}

@media (max-width: 600px) {
    .img-grid,
    .img-grid.text-left {
        grid-template-columns: auto;
        grid-template-rows: repeat(4, auto);
        grid-template-areas:
            "img1"
            "text1"
            "img2"
            "img3"
            "img4"
            "img5";
        margin-top: 4vw;
        margin-bottom: 4vw;
    }

    .img1,
    .img2,
    .img3 {
        width: min(569px, 100%);
        height: auto;
        justify-self: center;
    }

    p.main {
        margin-bottom: 2.5em;
        text-align: left;
    }
}