.main-home {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* .projects {
  position: absolute;
  width: 20vw;
  height: 20px;
  transform-style: preserve-3d;
  transform: perspective(1000px);
} */
.carousel {
  position: relative;
  /* width: 210px;
  height: 140px;
  margin: 80px auto; */
  width: 90vw;
  height: 70vw;
  margin: 10vw;
  perspective: 1000px;
}

.projects {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateZ(-288px);
  transform-style: preserve-3d;
  transition: transform 0.5s ease-out;
}

.projects li {
  position: absolute;
  /* width: 190px;
  height: 120px;
  left: 10px;
  top: 10px; */
  width: 80vw;
  height: 60vw;
  /* left: 5vw; */
  top: 5vw;
  transition: transform 1s, opacity 1s;
}

.projects a {
  width: 100%;
  position: relative;
  display: block;
  height: 100%;
  /* padding: 0 20px; */
}

.projects video {
  width: 100%;
  position: relative;
  display: block;
  height: 100%;
  cursor: none;
}

.projects h5 {
  display: none;
  font-family: "Aether";
  text-rendering: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  color: white;
  transform: translate(0, 0);
  z-index: 10;
  font-size: 13px;
  max-width: 25vw;
  text-align: center;
}

.projects .video-hover h5 {
  display: block;
}

.projects h5.is-following {
  opacity: 1;
}

/*========================= DESKTOP ======================*/
@media screen and (min-width: 768px) {
  .carousel {
    width: 50vw;
    height: 40vw;
    margin: 5vw;
  }

  .projects li {
    width: 40vw;
    height: 30vw;
    left: 5vw;
    top: 5vw;
  }
}