.main-banner {
   background-image: var(--bg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   padding: 100px 0 40px;
}
 .main-banner__container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.main-banner__title {
   color: #fff;
   text-align: center;
   font-size: 28px;
   font-weight: 600;
   line-height: 36px;
   letter-spacing: -0.56px;
   padding-top: 24px;
}
 .main-banner__text {
   color: #fff;
   text-align: center;
   font-size: 14px;
   line-height: 22px;
   letter-spacing: -0.14px;
   white-space: pre-wrap;
   margin-top: 16px;
}
 .main-banner__buttons {
   display: grid;
   gap: 16px;
   width: 100%;
   margin-top: 24px;
}
 .main-banner__btn {
   color: #fff;
   font-size: 16px;
   font-weight: 500;
   line-height: 24px;
   letter-spacing: -0.16px;
   text-align: center;
   padding: 11px 24px;
   border-radius: 12px;
   transition: 0.3s all;
}
 .main-banner__btn--white {
   background-color: #fff;
   color: #000;
   border: 1px solid #fff;
}
 .main-banner__btn--white:hover {
   background-color: #000;
   color: #fff;
   border: 1px solid #000;
}
 .main-banner__btn--transparent {
   color: #fff;
   border: 1px solid #fff;
}
 .main-banner__btn--transparent:hover {
   background-color: #fff;
   color: #000;
}
 .main-banner__brands {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 32px;
   margin-top: 24px;
}
 .main-banner__brand {
   color: #fff;
   font-size: 12px;
   line-height: 16px;
   letter-spacing: -0.12px;
}
 .main-banner__brand-row {
   display: flex;
   align-items: center;
   gap: 4px;
}
 .main-banner__brand-row--2 {
   gap: 8px;
   margin-top: 4px;
}
 .main-banner__brand-rating {
   width: 60px;
   height: 12px;
   background-image: url(/wp-content/themes/gas/build/images/icons/icon-star.svg);
   background-size: 12px;
}
 .main-banner__brand-img {
   max-height: 20px;
   height: 100%;
   width: auto;
}

 @media screen and (min-width: 992px) {
   .main-banner {
     display: flex;
     align-items: center;
     height: 100vh;
     max-height: 716px;
     padding: 100px 0;
  }
   .main-banner__container {
     width: 100%;
  }


   .main-banner__title {
     font-size: 40px;
     line-height: 48px;
     letter-spacing: -0.8px;
  }
   .main-banner__text {
     max-width: 670px;
     margin-top: 24px;
  }
   .main-banner__buttons {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 48px;
  }
   .main-banner__btn {
     width: fit-content;
     min-width: 190px;
  }
   .main-banner__brands {
     gap: 48px;
     margin-top: 48px;
  }
}