@import "variables";

.gallery {
  display: grid;
  grid-auto-flow: row dense;
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2em 2em;

  img {
    max-width: 100%;
  }
}

.gallery:has(img:hover) img:not(:hover) {
  filter: brightness(0.5) contrast(0.5);
}

@media not (prefers-reduced-motion) {
  .gallery img:hover {
    position: relative;
    border: 2px ridge var(--accent);
    transform: scale(1.7) translate(0, 25px);
    z-index: 200;
  }
}