.seite-grid {
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0px auto 50px;
    height: 100%;
    text-align: center;
    gap: 8px;
}

.seite-grid-oben {

}

.seite-grid-mitte{

}

.seite-grid-unten{

}

.mitte-grid{
    display: grid;
    grid-template-columns: 50px 1fr 50px;
    grid-template-rows: 1fr;
    height: 100%;
    text-align: center;
}

.mitte-grid-galerie {
    display:grid;
    grid-template-columns: repeat(12,1fr);
    grid-gap:1em;
}

.featured figure {
    position: relative;
    padding: 0;
    margin: 0;
}

.featured figure:hover {
    opacity: 1;
}


.featured img {
    display: block;
    width: 100%; 
    transform: translateZ(0);
    object-fit:cover;
    cursor: zoom-in;
    
}

.featured img:hover {
   opacity:0.3;
}

.zoom { 
    transition: transform .2s;   
}
  
.zoom:hover {
    -ms-transform: scale(1.04); /* IE 9 */
    -webkit-transform: scale(1.04); /* Safari 3-8 */
    transform: scale(1.04); 
}


.verschoben { /* nicht genutzt vielleicht nützlich */
    transform: translate3d(0px, 80px, 0px);
}



@media screen and (max-width: 700px) {
    .featured figure.skizzenbuchsmall {
        grid-column:span 6!important
    }
     .featured figure {
        grid-column:1/span 12!important
    }
    .mitte-grid{
        grid-template-columns: 16px 1fr 16px;
    }
    .verschoben {
        transform: translate3d(0px, 0px, 0px);
    }  
}

@media   screen and (max-width: 1200px) {
  @media screen and (min-width: 700px) {
      .featured figure.skizzenbuchsmall{
        grid-column:span 2!important;
    }
    
  }
}


.image-container {
  position: relative;
  max-height: 260px;
  cursor: pointer;
  margin: 00px;
  }
  
 .overlaysketchbooksmall {
    
    position: absolute;
    top: 0%;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;  
    transition: .5s ease;
    background-color: #fffdfd;
  
  }

  .overlaysketchbooksmall:hover {
    opacity: 0.9;    
  }
  
  
  .image-text-sketchbooksmall {
    color: #3c3c3c;
    font-size: 15 px;
    position: absolute;   
    top: 50%;
    left: 5%;
     -webkit-transition: all 400ms ease-out;
      -moz-transition: all 400ms ease-out;
      -o-transition: all 400ms ease-out;
      -ms-transition: all 400ms ease-out;
      transition: all 400ms ease-out;
  }

   .overlaysketchbooksmall:hover .image-text-sketchbooksmall {
    top: 50%;
  
  }

  @media screen and (max-width: 700px)  {
 .overlaysketchbooksmall {     
        opacity: 1; 
        background-color: #d8d8d800;    
          
    }   
    #image-sketchbooksmall {
      opacity: 0.5;
    }
    .image-text-sketchbooksmall {
    color: #151515;
    font-size: 20px;
    text-align: center;  
     }

  }