.slide-area {
  position: relative;

  width: 100%;
  height: calc(100vh - 164px);
}

@media (max-width: 600px) {
  .slide-area {
    height: 300px;
  }
}

.slide p {
  position: absolute;
  top: 50%;

  width: 100%;

  font-size: 1.25rem;
  font-weight: bold;
  color: var(--white);
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 20px var(--black);

  transform: translateY(-50%);
  animation-name: crescerfont;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@media (max-width: 600px) {
  .slide p {
    font-size: 0.75rem;
  }
}

.slide span {
  position: absolute;
  bottom: 30%;

  width: 100%;

  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--white);
  text-align: center;
  text-shadow: 0 0 5px var(--black);

  animation-name: crescerfontspan;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@media (max-width: 600px) {
  .slide span {
    bottom: 20%;
  }
}

@keyframes crescerfont {
  0% {
    font-size: 1.25rem;
  }
  15% {
    font-size: 3.4375rem;
  }
  30% {
    font-size: 3.125rem;
  }
  100% {
    font-size: 3.125rem;
  }
}

@keyframes crescerfontspan {
  0% {
    font-size: 0.9375rem;
  }
  15% {
    font-size: 1.5625rem;
  }
  30% {
    font-size: 1.25rem;
  }
  100% {
    font-size: 1.25rem;
  }
}

@media (max-width: 600px) {
  @keyframes crescerfont {
    0% {
      font-size: 0.75rem;
    }
    15% {
      font-size: 2.1875rem;
    }
    30% {
      font-size: 1.875rem;
    }
    100% {
      font-size: 1.875rem;
    }
  }

  @keyframes crescerfontspan {
    0% {
      font-size: 0.75rem;
    }
    15% {
      font-size: 1.25rem;
    }
    30% {
      font-size: 1.0625rem;
    }
    100% {
      font-size: 1.0625rem;
    }
  }
}

.slide img {
  height: calc(100vh - 164px);

  object-fit: cover;
}

@media (max-width: 600px) {
  .slide img {
    height: 300px;
  }
}

.next,
.previous {
  position: absolute;
  top: 0;
  bottom: 0;

  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.625rem;

  font-weight: bold;
  font-size: 2.5rem;
  color: var(--white);

  cursor: pointer;
  transition: all 200ms ease-in-out;
  opacity: 0.5;
}

.previous {
  left: 0;
}

.previous:hover {
  background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.8));
  opacity: 1;
}

.next {
  right: 0;
}

.next:hover {
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.8));
  opacity: 1;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}