 .banner {
   .banner-background {
     &.banner-color-primary {
       background-color: $primary-colors-primary-hover;
     }

     &.image-full .position-full div {
       position: relative;

       &::before {
         content: '';
         display: block;
         position: absolute;
         width: 100%;
         height: 100%;
         left: 0;
         top: 0;
         background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.16) 71%);
         z-index: 1;
       }
     }
   }

   .banner-content {
     z-index: 2;
   }

   .banner-title {
     text-shadow: 0 0 10px rgba($text-colors-text-contrast, 0.25);

     @include media-breakpoint-up(lg) {
       font-size: rem-calc(80);
       font-weight: $font-weight-bold;
       line-height: 1.1;
       letter-spacing: -4px;
     }
   }

   .banner-body {
     text-shadow: 0 0 10px rgba($text-colors-text-contrast, 0.25);

     @include media-breakpoint-up(lg) {
       font-size: $font-size-body-md;
       line-height: 1.6;
     }
   }

   .banner-links {
     display: flex;
     align-items: center;
     gap: 20px;
   }

   .text-left.banner-links {
      justify-content: flex-start;
   }

   &.text-center .banner-links {
     justify-content: center;
   }

   &.text-end .banner-links {
     justify-content: flex-end;
   }
 }
