:root {
  /*General Variables*/
  --thumbnailBackgroundColor: rgb(9, 9, 9);
}

#galleryList {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: var(--defaultGap);
}

#galleryList li {
  width: 100%;
  aspect-ratio: 1/1;
}

#galleryList button {
  all: unset;
  cursor: zoom-in;
  filter: brightness(1);
  transition: filter 0.2s;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#galleryList button:hover,
#galleryList button:focus-visible {
  filter: brightness(1.1);
}

#galleryList button:focus-visible {
  outline: var(--focusColor) solid var(--focusSize);
  outline-offset: 3px;
}

#galleryList button:active {
  filter: brightness(1.2);
}

#galleryList img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

  @media (min-width: 2000px) {
    #galleryList {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
  }

  @media (min-width: 4000px) {
    #galleryList {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
  }

  @media (max-width: 1300px) {
    #galleryList {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }

  @media (max-width: 950px) {
    #galleryList {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

  @media (max-width: 600px) {
    #galleryList {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #galleryList button {
      transition: filter 0.2s linear;
    }
  }