.gallery {
  margin: 1.7em 0 3.25em;
  padding: 1em 0.5em 0.5em;
  overflow: hidden;
  width: 100%;

  display: grid;
  grid-template-rows: repeat(3, minmax(125px, 30vw));
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  gap: 0.8em;
}

.gallery__img {
  border-radius: 20px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% top;
  box-shadow: 0 2.5px 7px rgba(190, 190, 190, 1);
  position: relative;
  bottom: 15px;
  opacity: 0;

  animation: showImage 1.2s ease-in;
  animation-fill-mode: forwards;
}

.gallery__img--one {
  grid-column: 1 / span 2;
  grid-row: 1 / span 1;
}

.gallery__img--two {
  grid-column: 2 / span 2;
  grid-row: 2 / span 1;
  animation-delay: 0.5s;
}

.gallery__img--three {
  grid-column: 1 / span 2;
  grid-row: 3 / span 1;
  animation-delay: 1s;
}

.gallery__img--four {
  grid-column: 3 / span 2;
  grid-row: 3 / span 2;
  animation-delay: 1.5s;
}

.gallery__img--five {
  grid-column: 3 / span 2;
  grid-row: 1 / span 1;
  animation-delay: 0.5s;
}

.gallery__img--six {
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
  animation-delay: 1s;
}

.gallery__img--seven {
  grid-column: 2 / span 2;
  grid-row: 4 / span 1;
  animation-delay: 2.4s;
}

.gallery__img--eight {
  grid-column: 2 / span 2;
  grid-row: 5 / span 1;
  animation-delay: 2.6s;
}

.gallery__img--nine {
  grid-column: 1 / span 1;
  grid-row: 5 / span 1;
  animation-delay: 2.7s;
}

.gallery__img--ten {
  grid-column: 1 / span 2;
  grid-row: 6 / span 1;
  animation-delay: 2.8s;
}

.gallery__img--eleven {
  grid-column: 3 / span 2;
  grid-row: 6 / span 1;
  animation-delay: 2.9s;
}

.gallery__img--twelve {
  grid-column: 1 / span 1;
  grid-row: 7 / span 2;
  animation-delay: 3s;
}

.gallery__img--thirteen {
  grid-column: 2 / span 1;
  grid-row: 7 / span 1;
  animation-delay: 3.1s;
}

.gallery__img--fourteen {
  grid-column: 3 / span 1;
  grid-row: 7 / span 1;
  animation-delay: 3.2s;
}

.gallery__img--fifteen {
  grid-column: 2 / span 2;
  grid-row: 8 / span 1;
  animation-delay: 3.3s;
}

.gallery__img--sixteen {
  grid-column: 1 / span 2;
  grid-row: 9 / span 1;
  animation-delay: 3.4s;
}

.gallery__img--seventeen {
  grid-column: 3 / span 1;
  grid-row: 9 / span 2;
  animation-delay: 3.5s;
}

.gallery__img--eighteen {
  grid-column: 1 / span 1;
  grid-row: 10 / span 1;
  animation-delay: 3.5s;
}

.gallery__img--nineteen {
  grid-column: 2 / span 1;
  grid-row: 10 / span 1;
  animation-delay: 3.5s;
}

/* KEYFRAMES */
@keyframes showImage {
  100% {
    bottom: 0;
    opacity: 1;
  }
}