.gsc-listings-banner{
   position: relative;
   border-radius: 4px;
   overflow: hidden;
   margin-bottom: 30px;
   text-align: center;
   .banner-image{
      position: relative;
      text-align: center;
      display: inline-block;
      &:after{
         content: '';
         @include size(100%, 100%);
         background: rgba(0, 0, 0, 0.3);
         position: absolute;
         top: 0;
         left: 0;
         z-index: 1;
      }
      img{
         transition: all 10s;
      }
   }
   .banner-content{
      position: absolute;
      width: 100%;
      top: 0;
      padding: 60px;
      z-index: 11;
      @include media-breakpoint-down(lg){ 
         padding: 30px;
      }
      @include media-breakpoint-down(md){
         padding: 30px 20px 20px;
      } 
      .subtitle{
         font-family: $font-second;
         font-size: 34px;
         color: $white;
         line-height: 1;
         @include media-breakpoint-down(lg){ 
            font-size: 30px;
         }
         @include media-breakpoint-down(md){
            font-size: 26px;
         }
      }
      .title{
         font-size: 42px;
         font-weight: 700;
         text-transform: uppercase;
         color: $white;
         margin: 0;
         line-height: 1.2;
         @include media-breakpoint-down(lg){ 
            font-size: 36px;
         }
         @include media-breakpoint-down(md){
            font-size: 28px;
         }
         @include media-breakpoint-down(sm){
            font-size: 24px;
         }
      }
   }
   .number-listings{
      font-size: 14px;
      font-weight: 600;
      background: $theme-color;
      color: $white;
      padding: 6px 30px;
      text-align: center;
      border-radius: 4px 4px 0 0;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 12;
      white-space: nowrap;
      @include media-breakpoint-down(lg){
         padding: 6px 18px;
      }
   }
   .link-overlay{
      position: absolute;
      @include size(100%, 100%);
      top: 0;
      left: 0;
      z-index: 15;
   }
   &.text-left{
      .banner-content{
         text-align: left;
      }
      .number-listings{
         left: auto;
         right: 60px;
         transform: translateX(0);
      }
   }
   &.text-right{
      .banner-content{
         text-align: right;
      }
      .number-listings{
         left: 60px;
         transform: translateX(0);
      }
   }
   &:hover{
      .banner-image{
         img{
            @include scale(1.2);
         }
      }
   }
}