@media screen and (max-width: 799px){
    .product-grid {
       
        display: grid;
        grid-auto-columns: 1fr;
        grid-auto-rows: 92vw 16vw 320vw     170vw 120vw 140vw 150vw 80vw 60vw 60vw 120vw    30vw 20vw     40vw 80vw 80vw 80vw 80vw 100vw 100vw 80vw 80vw 80vw 80vw 80vw    48vw  ;
        grid-template-areas:
       
        
        'b'
        '.'
        'a'

        'g'
        'j'
        'e'
        'i'
        'k'         
        'f'        
        'h'       
        'l'

        '.'
        'c'

        'm'
        'n'
        'o'
        'p'
        'q'
        'r'  
        's'
        't'
        'u'
        'v'
        'w'
        'x'
        'd'

        ;
    
        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: l;
}

.stacked:nth-child(13) {
    grid-area: m;
}

.stacked:nth-child(14) {
    grid-area: n;
}

.stacked:nth-child(15) {
    grid-area: o;
}

.stacked:nth-child(16) {
    grid-area: p;
}

.stacked:nth-child(17) {
    grid-area: q;
}
.stacked:nth-child(18) {
    grid-area: r;
}

.stacked:nth-child(19) {
    grid-area: s;
}

.stacked:nth-child(20) {
    grid-area: t;
}

.stacked:nth-child(21) {
    grid-area: u;
}

.stacked:nth-child(22) {
    grid-area: v;
}

.stacked:nth-child(23) {
    grid-area: w;
}

.stacked:nth-child(24) {
    grid-area: x;
}






}



@media screen and (min-width: 800px) {

.product-grid {
   
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 22vh;
    grid-template-areas:
    '. . . a a a a a a'
    '. . . a a a a a a'
    'b b . a a a a a a'
    'b b . . . . . . .'
    
    'g g g j j j j j j'
    'g g g j j j j j j'
    'g g g j j j j j j'   
    'g g g i i i i i i'
    'g g g i i i i i i'
    'g g g i i i i i i'
    'k k k k k e e e e'
    'k k k k k e e e e'
    'k k k k k e e e e'
    'h h h l l l l l l'
    'h h h l l l l l l'
    'h h h l l l l l l'
    'h h h f f f f f f'
    'h h h f f f f f f'
    'h h h f f f f f f'

    '. . . . . . . . .'
    '. . . c c c . . .'
    'm m m n n n o o o'
    'm m m n n n o o o'
    'p p p n n n r r r'
    'p p p q q q r r r'
    'p p p q q q r r r'
    's s s t t t u u u'
    's s s t t t u u u'
    's s s . d . u u u'
    'v v v w w w x x x'
    'v v v w w w x x x'
    
    
   

   
   

    
    
    
    ;

    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: l;
}

.stacked:nth-child(13) {
    grid-area: m;
}

.stacked:nth-child(14) {
    grid-area: n;
}

.stacked:nth-child(15) {
    grid-area: o;
}

.stacked:nth-child(16) {
    grid-area: p;
}

.stacked:nth-child(17) {
    grid-area: q;
}
.stacked:nth-child(18) {
    grid-area: r;
}

.stacked:nth-child(19) {
    grid-area: s;
}

.stacked:nth-child(20) {
    grid-area: t;
}

.stacked:nth-child(21) {
    grid-area: u;
}

.stacked:nth-child(22) {
    grid-area: v;
}

.stacked:nth-child(23) {
    grid-area: w;
}

.stacked:nth-child(24) {
    grid-area: x;
}







}