.hero{max-height: 100vh;overflow: hidden;}
.hero,.hero figure{margin: 0;position: relative;}
.hero figure::before{content: '';width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-color: rgba(0,0,0,0.4);}
.hero .container{position: absolute;width: 100%;left: 0;top: 50%;transform: translateY(-50%)}
.hero h1{color: #fff;font-family: "Roboto Condensed", serif;font-optical-sizing: auto;font-weight: 300;font-style: normal;text-transform: uppercase;margin:29px 0 0;display: inline-block;border-bottom: 2px solid #bf1b2c;font-size: clamp(1.75rem, 0.8804rem + 4.3478vw, 4.25rem);}

.projects .content{max-width: 65ch;margin-left: auto;margin-right: auto;}
.projects .content h2{margin-top: 0;}
.slider-container{margin-top: 2em;margin-bottom: 2em;}
.slider-for{margin-bottom: 7px;}
.slider-nav .slick-track{display: flex;gap:7px}
.slider-nav .slick-current{position: relative;}
.slider-nav .slick-current::before{content: '';width: 100%;height: 3px;position: absolute;bottom: 0;left: 0;background-color: #bf1b2c;}
@media screen and (max-width: 767px) {
    .hero figure{height: 320px;}    
}
@media screen and (min-width: 768px){
  .slider-for{margin-bottom: 10px;}
.slider-nav .slick-track{gap:10px}  
.slider-nav .slick-slide img{width: 100%;height: 100%;object-fit: cover}
}
@media screen and (max-width: 1023px){
    .hero .bounce{display: none;}
    .projects .container{max-width: 100vw;}
}
@media screen and (min-width: 1024px) {
    .hero figure{height: 100vh;}
    .hero h1{border-bottom-width: 4px;margin-top: 35px;}
    article.grid{padding: 110px 0;gap:110px}
    .bounce {position: absolute;left: 50%;margin-left: -9px;bottom: 3em;
  animation: bounce 3s infinite;
}
@keyframes bounce {
  0%, 30%, 50%, 100% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-30px);
  }
  40% {
    transform: translateY(-15px);
  }
}
.slider-container{margin-top: 4em;margin-bottom: 4em;}
.slider-for{margin-bottom: 20px;}
.slider-nav .slick-track{gap:20px} 
.slider-nav .slick-current::before{height: 5px;}
}
@media screen and (min-width: 1240px) {
    .hero .container{left: calc(50% - 620px)}
}