:root{
  --min-h: 250px;
  --max-h: 750px;
}


.video-slider{
  width: 100%;
}

.slider{
  position: relative;
  width: 100%;
  height: 750px;
  overflow: hidden;
  background: #000;
}

.slider2{
  position: relative;
  width: 100%;
  height: 250px;
  overflow: hidden;
  background: #000;
}

.slides{
  display: flex;
  width: 100%; /* 4 slides */
  height: 750px;
  transition: transform 600ms ease;
}

.slide{
  flex: 0 0 100%;
  height: 750px;
}

.slide-video{
  width: 100%;
  height: 750px;
  object-fit: cover;
}

.slide-video2{
  top: 0;
  width: 100%;
  height: 250px;
  object-fit: cover;
}


/* Navigation arrows */
.nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  font-size: 28px;
  background: rgba(0,0,0,.4);
  color: #fff;
  cursor: pointer;
  z-index: 10;
}

.nav:hover{
  background: rgba(0,0,0,.6);
}

.nav.prev{ left: 15px; }
.nav.next{ right: 15px; }

/* Mobile */
@media (max-width: 768px){
:root{
  --min-h: 80px;
  --max-h: 120px;
}


.video-slider{
  width: 100%;
}

.slider{
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: #000;
}

.slider2{
  position: relative;
  width: 100%;
  height: 120px;
  overflow: hidden;
  background: #000;
}

.slides{
  display: flex;
  width: 100%; /* 4 slides */
  height: 240px;
  transition: transform 600ms ease;
}

.slide{
  flex: 0 0 100%;
  height: 240px;
} 

.slide-video{
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.slide-video2{
  top: 0;
  width: 100%;
  height: 120px;
  object-fit: cover;
}
  .nav{
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
}