@media screen and (max-width: 799px) {
  
    p{
        font-size: 1.2em;
    
    }
    .product-grid {
       
        display: grid;
        grid-auto-columns: 1fr;
        grid-auto-rows: 20vw 2850vw   ;
        grid-template-areas:
       
        
        '.'
        'a'
        
      

        ;
    
        grid-gap: 2px;
    }
    
    
    
    
    /* Einzelne Projekte unter Projects */
    

    .stacked:nth-child(1) {
        grid-area: a;
    }
    
    .stacked:nth-child(2) {
        grid-area: b;
    }
    
    .stacked:nth-child(3) {
        grid-area: c;
    }
    
    .stacked:nth-child(4) {
        grid-area: d;
    }
    
    
    
    .stacked:nth-child(5) {
        grid-area: e;
    }
    
    .stacked:nth-child(6) {
        grid-area: f;
    }
    
    .stacked:nth-child(7) {
        grid-area: g;
    }
    
    
    
    .stacked:nth-child(8) {
        grid-area: h;
    }
    
    
    .stacked:nth-child(9) {
        grid-area: i;
    }
    .stacked:nth-child(10) {
        grid-area: j;
    }
    .stacked:nth-child(11) {
        grid-area: k;
    }
    
    
    
    .stacked:nth-child(12) {
        grid-area: o;
    }
    .stacked:nth-child(13) {
        grid-area: p;
    }
    .stacked:nth-child(14) {
        grid-area: q;
    }
    .stacked:nth-child(15) {
        grid-area: r;
    }
    .stacked:nth-child(16) {
        grid-area: s;
    }
    .stacked:nth-child(17) {
        grid-area: t;
    }
    .stacked:nth-child(18) {
        grid-area: u;
    }
    
    .stacked:nth-child(19) {
        grid-area: v;
    }
    .stacked:nth-child(20) {
        grid-area: w;
    }
    
    
    
    }
    

    @media screen and (min-width: 800px) {
.product-grid {
   
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 108vh;
    grid-template-areas:
    '. . . a a a a a a'
    '. . . a a a a a a'
    '. . . a a a a a a'
    '. . . . . . . . .'
    '. . . . . . . . .'
    '. . . . . . . . .'
    '. . . . . . . . .'
    '. . . . . . . . .'
    '. . . . . . . . .'
    '. . . . . . . . .'
    '. . . . . . . . .'
    '. . . . . . . . .'
   
    
    
 
    
    
    ;

    grid-gap: 4px;
}




/* Einzelne Projekte unter Projects */


.stacked:nth-child(1) {
    grid-area: a;
}

.stacked:nth-child(2) {
    grid-area: b;
}

.stacked:nth-child(3) {
    grid-area: c;
}

.stacked:nth-child(4) {
    grid-area: d;
}



.stacked:nth-child(5) {
    grid-area: e;
}

.stacked:nth-child(6) {
    grid-area: f;
}

.stacked:nth-child(7) {
    grid-area: g;
}



.stacked:nth-child(8) {
    grid-area: h;
}


.stacked:nth-child(9) {
    grid-area: i;
}
.stacked:nth-child(10) {
    grid-area: j;
}
.stacked:nth-child(11) {
    grid-area: k;
}



.stacked:nth-child(12) {
    grid-area: o;
}
.stacked:nth-child(13) {
    grid-area: p;
}
.stacked:nth-child(14) {
    grid-area: q;
}
.stacked:nth-child(15) {
    grid-area: r;
}
.stacked:nth-child(16) {
    grid-area: s;
}
.stacked:nth-child(17) {
    grid-area: t;
}
.stacked:nth-child(18) {
    grid-area: u;
}

.stacked:nth-child(19) {
    grid-area: v;
}
.stacked:nth-child(20) {
    grid-area: w;
}



}