/** === RONDELL === **/

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
  grid-template-rows: repeat(3, 1fr); /* Erstellt drei Zeilen mit gleicher Höhe */
  gap: 10px; /* Setzt den Abstand zwischen den Elementen */
  width: 1800px; /* Maximale Breite des Grids, kann angepasst werden */
  margin: auto; /* Zentriert das Grid horizontal */
  margin-bottom: 100px;
  margin-top: 100px;
  transform: scale(0.9);
}

.gallery__item {
  display: block; /* a-Elemente als Block, um die volle Zelle zu füllen */
  width: 100%; /* Breite auf 100% der Zelle setzen */
  height: 100%; /* Höhe auf 100% der Zelle setzen */
  border-radius: 15px;
  transition: .3s ease;

}

.gallery__item:hover {
  transform: scale(0.97);
  cursor: zoom-in;
}

.gallery__item img {
  width: 593.32px;
  height: 439.67px;
  object-fit: cover; /* Bild anpassen und zuschneiden, um das Seitenverhältnis zu erhalten */
  border-radius: 15px; /* Stellen Sie sicher, dass das Bild auch abgerundete Ecken hat */
  transition: opacity 0.3s ease; /* Korrektur für die Transition von opacity */
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.2);
}

.gallery__item img:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}






@media screen and (max-width: 1900px) {




  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
    grid-template-rows: repeat(3, 1fr); /* Erstellt drei Zeilen mit gleicher Höhe */
    gap: 10px; /* Setzt den Abstand zwischen den Elementen */
    width: 1400px; /* Maximale Breite des Grids, kann angepasst werden */
    margin: auto; /* Zentriert das Grid horizontal */
    margin-bottom: 100px;
  }

  .gallery__item img {
          width: 460px;
          height: 340.86px;
      }

}


@media screen and (max-width: 1430px) {



  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
    grid-template-rows: repeat(3, 1fr); /* Erstellt drei Zeilen mit gleicher Höhe */
    gap: 10px; /* Setzt den Abstand zwischen den Elementen */
    width: 1200px; /* Maximale Breite des Grids, kann angepasst werden */
    margin: auto; /* Zentriert das Grid horizontal */
    margin-bottom: 100px;
  }

  .gallery__item img {
        width: 393.32px;
        height: 291.45px;
    }
}


@media screen and (max-width: 1260px) {



  .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
    grid-template-rows: repeat(5, 1fr); /* Erstellt drei Zeilen mit gleicher Höhe */
    gap: 10px; /* Setzt den Abstand zwischen den Elementen */
    width: 1000px; /* Maximale Breite des Grids, kann angepasst werden */
    margin: auto; /* Zentriert das Grid horizontal */
    margin-bottom: 100px;
  }

  .gallery__item img {
        width: 495px;
        height: 366.8px;
    }
}



@media screen and (max-width: 1060px) {

  .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
    grid-template-rows: repeat(5, 1fr); /* Erstellt drei Zeilen mit gleicher Höhe */
    gap: 10px; /* Setzt den Abstand zwischen den Elementen */
    width: 800px; /* Maximale Breite des Grids, kann angepasst werden */
    margin: auto; /* Zentriert das Grid horizontal */
    margin-bottom: 100px;
  }

  .gallery__item img {
          width: 395px;
          height: 297.7px;
      }

}


@media screen and (max-width: 830px) {

  .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Erstellt drei Spalten mit gleicher Breite */
    grid-template-rows: repeat(5, 1fr); /* Erstellt drei Zeilen mit gleicher Höhe */
    gap: 10px; /* Setzt den Abstand zwischen den Elementen */
    width: 600px; /* Maximale Breite des Grids, kann angepasst werden */
    margin: auto; /* Zentriert das Grid horizontal */
    margin-bottom: 100px;
  }

  .gallery__item img {
          width: 286.15px;
          height: 212.04px;
      }

}

/*
@media screen and (max-width: 630px) {
.gallery {
  width: 525.0042px;
}

.gallery__item img {
        width: 238.460px;
        height: 176.70px;
    }


  }

    @media screen and (max-width: 540px) {
    .gallery {
      width: 400px;
    }

    .gallery__item img {
            width: 190.764px;
            height: 141.358px;
        }
}


@media screen and (max-width: 418px) {
.gallery {
  width: 350px;
}

.gallery__item img {
        width: 166.9185px;
        height: 132.68825px;
    }
}


@media screen and (max-width: 368px) {
.gallery {
  width: 300px;
}

.gallery__item img {
        width: 141px;
        height: 112px;
    }
}

@media screen and (max-width: 356px) {
.gallery {
  width: 200px;
}

.gallery__item img {
        width: 100px;
        height: 72px;
    }
}

*/



@media screen and (max-width: 660px) {


  .gallery {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(9, 1fr);
    gap: 10px;
    width: 400px;
    margin: auto;
    margin-bottom: 100px;
  }

  .gallery__item img {
      width: 388px;
      height: 287.51px;
  }

}



@media screen and (max-width: 460px) {

  .gallery {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(9, 1fr);
    gap: 10px;
    width: 350px;
    margin: auto;
    margin-bottom: 100px;
  }


  .gallery__item img {
        width: 339.5px;
        height: 251.58px;
    }

}





@media screen and (max-width: 366px) {

  .gallery {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(9, 1fr);
    gap: 10px;
    width: 280px;
    margin: auto;
    margin-bottom: 100px;
  }


  .gallery__item img {
        width: 271.6px;
        height: 201.264px;
    }

}