#main-wrap {
    display: grid;
    grid-template-areas: ". . main . .";
    grid-template-columns: var(--main-margin) 1fr minmax(auto, var(--main-max-width)) 1fr var(--main-margin);
    margin-top: var(--site-header-margin);
}

.main{
    grid-area: main;
    display: grid;
    grid-template-areas: "hero" "text" "text2" "text3";
    grid-gap: 2vmin
}
div.main div:nth-child(n+2){
  padding:3vh;
}

@media(min-width: 499.3px) {
    .main{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto repeat(3, fit-content(0));
        grid-template-areas: "hero hero" "text text" "text2 text2" "text3 text3";
    }

}

@media(min-width: 799.3px) {
    .main{
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto repeat(2, fit-content(0)) auto auto fit-content(0);
        grid-template-areas: "hero hero hero" "text text text" "text2 text2 text2" "text3 text3 text3";
    }

}

.text{
    grid-area:text;
}
.text2{
    grid-area:text2;
}
.text3{
    grid-area:text3;
}
.hero{
    grid-area:hero;
}