.projects-container{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2vw;
  padding-bottom: 4vw;
}

.project {
  margin-bottom: -7vw;
}

.project video{
  cursor: pointer;
  width: 100%;
}

.project-details {
  pointer-events: none;
  position: relative;
  padding: 2vw 2vw 0vw 2vw;
  bottom: 8vw;
  height: 8vw;
  background-image: linear-gradient(
    to top,
    rgb(0, 0, 0, 0.8),
    rgb(0, 0, 0, 0.8) 75%,
    rgb(0, 0, 0, 0)
  );
}

.project-details span {
  color: rgb(216, 216, 216);
}

.project-details h3 {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 400;
}

@media screen and (max-width: 500px) {
  .projects-container{
    grid-template-columns: repeat(1,1fr);
  }

  .project video {
    width: 80vw;
  }

  .project{
    margin-bottom: -15vw;
  }
  
  .project-details {
    padding: 5vw 5vw 0vw 5vw;
    bottom: 23vw;
    height: 23vw;
  }

  .project-details h3 {
    font-size: 4vw;
  }

}