@media screen and (max-width: 799px) {
   
    h1{
        font-size: 12vw;
    }
   
   
    .product-grid {
       
        display: grid;
        grid-auto-columns: 1fr;
        grid-auto-rows: 92vw 16vw 310vw   100vw 100vw 80vw 120vw  80vw 120vw 100vw 150vw  120vw 120vw   30vw 50vw 120vw 40vw 20vw     110vw 110vw 110vw 110vw 110vw 110vw 110vw 110vw 110vw 110vw 110vw 110vw 110vw 110vw 110vw 110vw 110vw 110vw 110vw 48vw ;
        grid-template-areas:
      
        'b'
        '.'
        'a'
        'ak'
        'j'
        'n'
        'i'
        'm'
        
      
   
       
        
        
        
    
        'aj'
        'l'


        'e'    
        'f'

        'g'
       
        'ah'
        'ai' 

        'h' 
               
        
        '.'
        'c'

        'o'
        'p'
        'q'
        'r'  
        's'
        't'
        'u'
        'v'
        'w'
        'x'
        'y'  
        'z'
        'aa'
        'ab'
        'ac'
        'ad'
        'ae'
        'af'
        'ag'

        '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: l;
    }
    .stacked:nth-child(10) {
        grid-area: m;
    }
    .stacked:nth-child(11) {
        grid-area: n;
    }
    
    
    
    .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;
    }
    .stacked:nth-child(21) {
        grid-area: x;
    }
    .stacked:nth-child(22) {
        grid-area: y;
    }
    .stacked:nth-child(23) {
        grid-area: z;
    }
    .stacked:nth-child(24) {
        grid-area: aa;
    }
    .stacked:nth-child(25) {
        grid-area: ab;
    }
    .stacked:nth-child(26) {
        grid-area: ac;
    }
    .stacked:nth-child(27) {
        grid-area: ad;
    }
    .stacked:nth-child(28) {
        grid-area: ae;
    }
    .stacked:nth-child(29) {
        grid-area: af;
    }
    .stacked:nth-child(30) {
        grid-area: ag;
    }

    .stacked:nth-child(31) {
        grid-area: ah;
    }
    
    .stacked:nth-child(32) {
        grid-area: ai;
    }

    .stacked:nth-child(33) {
        grid-area: i;
    }
    
    .stacked:nth-child(34) {
        grid-area: j;
    }

    .stacked:nth-child(35) {
        grid-area: aj;
    }

    .stacked:nth-child(36) {
        grid-area: ak;
    }

}
    
  
.erdbank_size {height: 55vh}


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

.product-grid {
   
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 24vh;
    grid-template-areas:
    '. . . a a a a a a'
    'b b b a a a a a a'
    'b b b a a a a a a'
    'b b b a a a a a a'
    '. . . . . . . . .'
    'ak ak ak ak ak ak ak ak ak'
    'ak ak ak ak ak ak ak ak ak'
    'ak ak ak ak ak ak ak ak ak'
    'ak ak ak ak ak ak ak ak ak'
    'j j j j i i i i i'
    'j j j j i i i i i'
    'j j j j i i i i i'
    'm m m m m n n n n'
    'm m m m m n n n n'
    'm m m m m n n n n'
    'aj aj aj aj l l l l l'
    'aj aj aj aj l l l l l'
    'aj aj aj aj l l l l l'
    'e e e f f f g g g'
    'e e e f f f g g g'
    'e e e f f f g g g'
    'e e e f f f g g g'
    'e e e f f f g g g'
    '. . . ah ah ai ai ai ai'
    '. . . . . . . . .' 
    '. . h h h h h . .'
    '. . h h h h h . .'
    '. . . . . . . . .'
    '. . . c c c . . .'
    'o o o p p p q q q'
    'o o o p p p q q q'
    'o o o p p p q q q'
    'r r r s s s t t t'
    'r r r s s s t t t'
    'r r r s s s t t t'
    'u u u v v v w w w'
    'u u u v v v w w w'
    'u u u v v v w w w'
    'x x x y y y z z z'
    'x x x y y y z z z'
    'x x x y y y z z z'
    'ab ab ab ac ac ac ad ad ad'
    'ab ab ab ac ac ac ad ad ad'
    'ab ab ab ac ac ac ad ad ad'
    'aa aa aa aa aa aa aa aa aa'
    'aa aa aa aa aa aa aa aa aa'
    'aa aa aa aa aa aa aa aa aa'
    'aa aa aa aa aa aa aa aa aa'
    'ae ae ae af af af ag ag ag'
    'ae ae ae af af af ag ag ag'
    'ae ae ae .  d  .  ag ag ag'


   
    
    
   

   
   

    
    
    
    ;

    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: l;
}
.stacked:nth-child(10) {
    grid-area: m;
}
.stacked:nth-child(11) {
    grid-area: n;
}



.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;
}
.stacked:nth-child(21) {
    grid-area: x;
}
.stacked:nth-child(22) {
    grid-area: y;
}
.stacked:nth-child(23) {
    grid-area: z;
}
.stacked:nth-child(24) {
    grid-area: aa;
}
.stacked:nth-child(25) {
    grid-area: ab;
}
.stacked:nth-child(26) {
    grid-area: ac;
}
.stacked:nth-child(27) {
    grid-area: ad;
}
.stacked:nth-child(28) {
    grid-area: ae;
}
.stacked:nth-child(29) {
    grid-area: af;
}
.stacked:nth-child(30) {
    grid-area: ag;
}
.stacked:nth-child(33) {
    grid-area: i;
}

.stacked:nth-child(34) {
    grid-area: j;
}

.stacked:nth-child(35) {
    grid-area: aj;
}

.stacked:nth-child(36) {
    grid-area: ak;
}

.stacked:nth-child(31) {
    grid-area: ah;
}

.stacked:nth-child(32) {
    grid-area: ai;
}

}