#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";
    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";
    }

}

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

}

@media(min-width: 1259.3px) {
    .main {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, fit-content(0)) auto minmax(0, 1fr);
        grid-template-areas: "hero hero hero hero" "text text text text" "text2 text2 text2 text2";
    }
}
.hero{
    grid-area:hero;
}
.text{
    grid-area:text;
}
.text2 {
    grid-area: text2;
}
.photo-wrap{
  display:flex;
  justify-content:center;
  height:70vmin;
  margin:5vmin;
}
.photo-modena{
    background: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1)), url(/images/modena.jpg);  
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    height:100%;
    border-radius: 20px 3px;
    box-shadow:4px 3px 7px var(--main-artistic-color);
}