.gallery {
    --g: 0px;
    
    display: grid;
    aspect-ratio: 1;
    grid: auto-flow 1fr/repeat(3,1fr);
    gap: var(--g);
  }

  .gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale();
    cursor: pointer;
    transition: .5s
  }

  .gallery img:hover {
    filter: grayscale(0);
  }

  .bild {
    transition: transform 0.3s ease;
    cursor: pointer;
  }

  .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 100;
    justify-content: center;
    align-items: center;
  }

  .overlay img {
    max-width: 90%;
    max-height: 90%;
    border: 5px solid #D9DECA;
    /*border: 5px solid #575859;*/
    border-radius: 6px;
    cursor: pointer;
    background-color: #575859;
    /*background-color: D9DECA;*/
    filter: grayscale(0);
    object-fit: contain;
  }

  #imgControl1:checked ~ #overlay1,
  #imgControl2:checked ~ #overlay2,
  #imgControl3:checked ~ #overlay3,
  #imgControl4:checked ~ #overlay4,
  #imgControl5:checked ~ #overlay5,
  #imgControl6:checked ~ #overlay6,
  #imgControl7:checked ~ #overlay7,
  #imgControl8:checked ~ #overlay8,
  #imgControl9:checked ~ #overlay9,
  #imgControl10:checked ~ #overlay10,
  #imgControl11:checked ~ #overlay11,
  #imgControl12:checked ~ #overlay12,
  #imgControl13:checked ~ #overlay13,
  #imgControl14:checked ~ #overlay14,
  #imgControl15:checked ~ #overlay15,
  #imgControl16:checked ~ #overlay16,
  #imgControl17:checked ~ #overlay17,
  #imgControl18:checked ~ #overlay18,
  #imgControl19:checked ~ #overlay19,
  #imgControl20:checked ~ #overlay20,
  #imgControl21:checked ~ #overlay21,
  #imgControl22:checked ~ #overlay22,
  #imgControl23:checked ~ #overlay23,
  #imgControl24:checked ~ #overlay24,
  #imgControl25:checked ~ #overlay25,
  #imgControl26:checked ~ #overlay26 {
    display: flex;
  }

  @media(max-width: 372px) {
    .gallery {
      grid: auto-flow 1fr/repeat(1,1fr);
    }
  }
  
  @media(min-width: 373px) {
    .gallery {
      grid: auto-flow 1fr/repeat(1,1fr);
    }
  }
  
  @media(min-width: 400px) {
    .gallery {
      grid: auto-flow 1fr/repeat(1,1fr);
    }
  }
  
  @media(min-width: 600px) {
    .gallery {
      grid: auto-flow 1fr/repeat(1,1fr);
    }
  }
  
  @media(min-width:750px) {
    .gallery {
      grid: auto-flow 1fr/repeat(2,1fr);
    }
  }
  
  @media(min-width: 800px) {
    .gallery {
      grid: auto-flow 1fr/repeat(3,1fr);
    }
  }