@use "variables";

.banner-container
{
  // background-color: #f8f6f1;
  background-color: #fbfaf8;
  
  display: grid;
  flex-grow: 1;
  
  & > * {
    grid-column-start: 1;
    grid-row-start: 1;
  }
  
  @media screen and (min-width: variables.$breakpoint) {
    grid-template-columns: 12% auto 12%;
    grid-template-areas: 
    "BannerLeft Pusher BannerRight";
  }
  
  .banner {
    width: 100%;
    opacity: 0.6;
    background-size: contain;
    background-image: url('../images/banner/banniere-droite.jpg');
    
    &--right {
      display: none;
    }
    
    &__pusher {
      padding-bottom: 200px;
      z-index: 1;
      
      & > * {
        width: 90%;
        max-width: 75rem;
      }
    }

    @media screen and (min-width: variables.$breakpoint) {
      
      &--left {
        grid-area: BannerLeft;
      }

      &--right {
        display: block;
        grid-area: BannerRight;
        transform: rotate(180deg);
      }

      &__pusher {
        grid-area: Pusher;
        margin-top : 0;
      }
    }

  }

}