@layer galery{
   .gallery {
      display: flex;
      flex-wrap: wrap;
      gap:5px;
      inline-size: 100%;
      justify-content: center;
      background-color: var(--grijs-t);
      padding: 0.5rem;
      margin-block-start: 1rem;
   }
   .blokje{
      border: 6px solid var(--background-color);
      inline-size: 300px;
      block-size: 300px;
      overflow: hidden;
      border-radius: 5px;
      transition: all 0.3s ease-in-out;
   }
   .blokje:hover, .blokje:focus{
      border-color: var(--geel);
      scale: 1.03;
   }
   .blokje img{
      object-fit: cover;
      object-position: center;
      aspect-ratio: 1/1;
   }
}
@layer showpanel{
   
   .overlay{
      display: none;
      position:fixed;
      inset-block-start:0;
      inset-inline-start: 0;
      inline-size: 100%;
      block-size: 100vh;
      z-index: 50;
      background-color: var(--zwart-t);
      place-content: center;
      overflow: hidden;
   }

   /* Foto in de lightbox */
   #showfoto img {
   max-width: 100%;
   max-height: 100vh;
   object-fit: contain;
   display: block;
   margin: 0 auto;

   /* animatie bij tonen */
   opacity: 0;
   transform: scale(0.95);
   transition: opacity 0.4s ease, transform 0.9s ease;
   }

   /* zodra de foto geladen is */
   #showfoto img.show {
   opacity: 1;
   transform: scale(1);
   }

   .lichtbox-btn{
      position: fixed;
      inline-size: fit-content;
      block-size: fit-content;
      inset-inline-end: 10px;
      inset-block-start: 10px;
      background-color: var(--background-color);
      color: var(--blauw);
      border-radius: 50%;
      padding: 5px 10px;
      font-size: 30px;
      line-height:  30px;
      z-index: 99;
      cursor: pointer;
   }
   #prev.lichtbox-btn{
      inset-block-start: 80px;
      inset-inline-start: 10px;
   }
   #next.lichtbox-btn{
      inset-block-start: 80px;
   }
}