.project-slider-hero {
    width: 100%;
    height: 100%;
}


.fader {
    height: calc(100vh - 67px);
    position: relative;
    overflow: hidden;
  }
  

  
  .fader__slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-size: cover;
    background-position: 50% 70%;
  }


  .hero-content-holder {
    width: 100%;
    height: 100%;
    display: flex;
    justify-items: flex-end;
    flex-direction: column;
  }

  .bottom-hero-content {
    background-color: #1a1a1b;
    display: grid;
    flex-direction: row;
    margin-top: auto;
    padding: 20px 6% 40px;
    grid-template-columns: 75% 25%;
  }

  .hero-project-title {
    font-family: Playfair Display;
    text-transform: uppercase;
    color: #fff;
    font-size: 70px;
    margin-top: -55px;
    line-height:60px;
    padding-bottom:10px;
  }

  .hero-project-location {
    font-family: Montserrat;
    color: #fff;
    letter-spacing: 3px;
    font-weight: 600;
  }

  .hero-main-info {

   
    display:flex;
    flex-direction: column;
    justify-items: top;
  }
.hero-main-right {
  display: flex;
  align-items: center;
  justify-content: center;
    flex-direction: row;
    
}
.hero-project-excerpt {
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  max-width: 750px;
  font-family: Playfair Display;
}

.hero-tags-holder {
  color: #fff;
  font-family: Playfair Display;
  font-size: 13px;
  font-style: italic;
  margin-top: 15px;
}
  @media screen and (min-width: 0px) and (max-width: 419px) {
    .bottom-hero-content {
      grid-template-columns: 100%;
    }
    .hero-main-right {
      display: block;
      padding-top: 15px
    }

    .hero-project-title { 
      font-size: 30px;
      line-height:1;
      margin-top: -35px;
    }

  }
  
  @media screen and (min-width: 420px) and (max-width: 576px) {
  
    .bottom-hero-content {
      grid-template-columns: 100%;
    }

    .hero-main-right {
      display: block;
      padding-top: 15px
    }

    .hero-project-title { 
      font-size: 45px;
      line-height:1;
      margin-top: -44px;
    }
  }
  
  
  @media screen and (min-width: 577px) and (max-width: 768px) {
    .bottom-hero-content {
      grid-template-columns: 100%;
    }
    .hero-main-right {
      display: block;
      padding-top: 15px
    }
  
  }
  
  @media screen and (min-width: 769px) and (max-width: 992px) {
    .bottom-hero-content {
      grid-template-columns: 100%;
    }
    .hero-main-right {
      display: block;
      padding-top: 15px
    }
  
  }
  
  @media screen and (min-width: 993px) and (max-width: 1200px) {
      
  
  
  }
  
  @media screen and (min-width: 1201px) and (max-width: 1440px) {
  
  
  }
  
  
  @media screen and (min-width: 1441px) {
  
  
  }