/*ganzes albumg*/
div.album {
    max-width:1000px;
    margin-left:auto;
    margin-right:auto;
    background-color:black;
    padding:50px;
}


/*9*9 wuerfel*/
div.grid-gallerie {
    display: grid;
    grid-template-columns: repeat(3,180px); 
    grid-template-rows: repeat(3,180px);
    grid-auto-flow: dense;
    gap: 15px;
    justify-content:center;
    align-items: center;
    width:540px;
    margin-left:auto;
    margin-right:auto; 
    margin-bottom:100px;
 

   
}

.grid-gallerie img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0px;
    margin:0px;
    max-width:none;
}

.grid-gallerie img.gross {
    grid-column: span 2;
    grid-row: span 2;
    background-color:red;
 
}
.grid-gallerie img.hoch {
    grid-row:  span 3;
    grid-column: span 1;
  }

.grid-gallerie img.breit {
    grid-row: span 1;
    grid-column: span 2;
   
}

.grid-gallerie h1 {
     font-family: sans-serif;
     margin-left:auto;
     margin-right:auto;
     
    
     
    
}

/*für die wuerfel mit den ueberschriften*/
.grid-gallerie div.wurfel{
     height:100%;
     width:100%;
      display: flex;
  align-items: center;
  justify-content: center
     
}


@media all and (max-width:700px){
    
    div.grid-gallerie {
       grid-template-columns: repeat(2,180px);  
       grid-template-rows: repeat(5,180px);
       width:auto;
     justify-items:center;

       
    }   
    .grid-gallerie div.wurfel{
        grid-row-start: 1;
        grid-column:span 2;
       
    }
    
    
}

.grid-gallerie .thumb:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   filter: brightness(110%);
} 

@media all and (max-width:500px){
    
    div.grid-gallerie {
       grid-template-columns: repeat(1,180px);  
       grid-template-rows: repeat(9,180px);
       width:auto;
       
    }  
    
     .grid-gallerie div.wurfel{
        grid-row-start: 1;
        grid-column:span 1;
       
    }
    
}