p.main {
    text-align: left;
}

.triple-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 "
            "img2 img3 ";
    grid-column-gap: 4.8vw;
    grid-row-gap: 2vw;
    margin-top: 4em;
    margin-bottom: 3em;
}

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

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

.img1 {
    grid-area: img1;
    width: 100%;
}

.img2 {
    grid-area: img2;
    width: 100%;
}

.img3 {
    grid-area: img3;
    width: 100%;
    align-self: end;
}

.text1 {
    grid-area: text1;
}

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

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

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

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

@media (max-width: 800px) {
    .triple-img-grid,
    .triple-img-grid.text-left {
        grid-template-columns: auto;
        grid-template-rows: repeat(4, auto);
        grid-template-areas:
            "text1"
            "img1"
            "img2"
            "img3";
        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;
    }
}