.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  position: relative;
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: start;
  align-items: flex-end;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-slide-active h2 {
  animation-name: fade-in;
  animation-duration: 1s;
  animation-delay: 0.3s;
  animation-fill-mode: both;
}

.swiper-slide-active p {
  animation-name: fade-in;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-fill-mode: both;
}

.swiper-caption {
  position: absolute;
  color: #fff;
  text-align: left;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.swiper-button-prev:after,
.swiper-button-next:after {
  color: #fff;
  font-size: 2rem;
}

.swiper-pagination span {
  background-color: #fff;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}