@charset "UTF-8";

.gallery {
  display: grid;
  gap: 0.5em;
  grid-template-columns: repeat(2, 1fr);

  margin: auto;

}

.gallery > button {
  aspect-ratio:  4 / 3;
  width: 100%;
  border: none;
  padding: 0;
}
.gallery button img {
  width: 100%;
  height: 100%;
}
.gallery > button:is(:hover,:focus) {
  transform: scale(2 , 2);
  transform-origin: center center;
  z-index:1;
  outline: 2px solid blue; /* medium solid DarkTurquoise; */
}

/* Sobald ein Button den Fokus hat, nicht mehr auf :hover reagieren */
.gallery:has(button:focus) button:hover:not(:focus) {
  transform: none;
  z-index: unset;
  outline: unset;
}

@media only screen and (max-width: 749px) {
  .gallery > button:is(:hover,:focus) {
    &:nth-of-type(2n+1) { transform-origin: center left; }
    &:nth-of-type(2n+0) { transform-origin: center right; }
  }
}
@media only screen and (min-width: 750px) {
  .gallery {     grid-template-columns: repeat(3, 1fr);
  }
  .gallery > button:is(:hover,:focus) {
    &:nth-of-type(3n+1) { transform-origin: center left; }
    &:nth-of-type(3n+0) { transform-origin: center right; }
  }
}
  
@media only screen and (min-width: 1200px) {
  .gallery {     grid-template-columns: repeat(4, 1fr);
  }
  .gallery > button:is(:hover,:focus) {
    &:nth-of-type(4n+1) { transform-origin: center left; }
    &:nth-of-type(4n+0) { transform-origin: center right; }
  }
}