.gallery {
  margin-bottom: 50px;
}

.gallery__row {
  display: flex;
  flex-direction: row;
}

.gallery__item {
  display: block;
  text-decoration: none;
  color: #333333;
  flex-grow: 1;
}

.gallery__itemImageContainer {
  width: 100%;
  transition: opacity 0.3s;
  text-align: center;
}

.gallery__item:hover .gallery__itemImageContainer {
  opacity: 0.2;
}

.gallery__itemImage {
  width: 100%;
}

.gallery__itemTitle {
  position: absolute;
  width: 100%;
  top: 50%;
  font-size: 1.4rem;
  opacity: 0;
  font-weight: bold;
  text-align: center;
  transition: opacity 0.3s, transform 0.3s;
  transform: scale(0.7)
}

.gallery__item:hover .gallery__itemTitle {
  opacity: 1;
  transform: scale(1);
}

/* Responsive */
@media only screen and (max-width: 580px) {
  .gallery__row {
    flex-direction: column;
  }
}

/* Animations */
.hero,
.gallery__item {
  opacity: 0;
  animation: 0.4s cubic-bezier(0.7, 1.3, 0.75, 1) forwards animations__slideAppear;
}

.hero {
  animation-delay: 0.2s;
}

.gallery__row:nth-child(1) > .gallery__item:nth-child(1) {
  animation-delay: 0.4s;
}

.gallery__row:nth-child(1) > .gallery__item:nth-child(2) {
  animation-delay: 0.5s;
}

.gallery__row:nth-child(2) > .gallery__item:nth-child(1) {
  animation-delay: 0.6s;
}

.gallery__row:nth-child(2) > .gallery__item:nth-child(2) {
  animation-delay: 0.7s;
}

@keyframes animations__slideAppear {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}