exadel-inc/esl

@import (reference) '../../common/variables.less';
 
.promo-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 740px;
  overflow: hidden;
  break-inside: avoid-page;
 
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
 
    opacity: 0.6;
 
    background: url('/assets/common/aurora.webp'),
      url('/assets/common/aurora.webp'),
      linear-gradient(
        rgba(0, 0, 0, 0),
        rgba(13, 57, 90, 1) 40%,
        rgba(0, 0, 0, 0)
      );
    background-position:
      right 157% bottom 22%,
      left 139% bottom 18%,
      center;
    background-size:
      50% 100%,
      50% 85%,
      auto;
    background-repeat: no-repeat, no-repeat, repeat;
    @media @xs {
      background: url('/assets/common/aurora.webp'),
        linear-gradient(
          rgba(0, 0, 0, 0),
          rgba(13, 57, 90, 1) 40%,
          rgba(0, 0, 0, 0)
        );
      background-repeat: no-repeat, repeat;
      top: -13%;
      background-size: 101% 112%;
      opacity: 0.3;
    }
    @media @lg-xl {
      background-position:
        right 157% bottom 54%,
        left 139% bottom 45%,
        center;
      background-size:
        50% 196%,
        50% 132%,
        auto;
    }
  }
 
  &-content {
    z-index: 1;
    text-align: center;
    color: #fff;
  }
 
  &-heading {
    margin-top: 60px;
  }
 
  &-text {
    max-width: 60%;
    margin: 0 auto 1.5rem;
 
    @media @xs {
      max-width: 85%;
    }
  }
 
  &-btn-container {
    margin-bottom: 45px;
  }
}