.gallery {
  position: fixed;
  bottom: 15px;
  right: 15px;
  left: 15px;

  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-items: flex-end;
  gap: 15px;
}

.box {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;

  background: rgb(250, 250, 250);
  padding: 5px;
  box-sizing: border-box;
}

.box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  transition:
    filter 0.3s ease,
    transform 0.3s ease;
}

@media screen and (max-width: 600px) {
  .gallery {
    position: static;
    margin-bottom: 0px;
    padding: 0px;
    justify-items: center;
    margin-top: 15px;

    grid-template-columns: 1fr 1fr;
  }
  .box {
    padding: 0px;
    border: 5px solid #dce7cb;
  }

  /* only the first 4 images in the 2×2 */
  .box:nth-child(n + 5) {
    display: none;
  }
}