.baniere {
    width: 100%;
    height: 100vh;
 }
 
 @media screen and (min-width: 480px) {
    .baniere {
       height: 100vh;
    }
 }
 
 .baniere-image {
    height: 100%;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
 }

 
 @media screen and (min-width: 480px) {
    .baniere {
       padding: 0;
    }
 
 }
 
 
 .scroll {
    width: 60px;
    height: 60px;
    bottom: 3.3rem;
    border: 2px solid #333;
    border-radius: 50%;
    position: relative;
    animation: down 1.5s infinite;
    -webkit-animation: down 1.5s infinite;
 
    &::before {
       content: '';
       position: absolute;
       bottom: 3.3rem;
       top: 15px;
       left: 18px;
       width: 18px;
       height: 18px;
       border-left: 2px solid #333;
       border-bottom: 2px solid #333;
       transform: rotate(-45deg);
    }
 }
 
 @media screen and (min-width: 1024px) {
    .scroll {
       bottom: 0;
    }
 }
 
 @keyframes down {
    0% {
       transform: translate(0);
    }
 
    20% {
       transform: translateY(15px);
    }
 
    40% {
       transform: translate(0);
    }
 }
 
 @-webkit-keyframes down {
    0% {
       transform: translate(0);
    }
 
    20% {
       transform: translateY(15px);
    }
 
    40% {
       transform: translate(0);
    }
 }
 
 .section {
    height: 100vh;
    position: absolute;
    width: 100%;
 }
 
 .section::before {
    animation: bounce 1s ease infinite;
    bottom: 3.3rem;
    color: #fff;
    content: '╲╱';
    font-size: 2rem;
    height: 4rem;
    left: 50%;
    letter-spacing: -1px;
    line-height: 4rem;
    margin-left: -3rem;
    opacity: 0.8;
    position: absolute;
    text-align: center;
    width: 6rem;
 }
 
 @media screen and (min-width: 1024px) {
    .section::before {
       bottom: 0;
    }
 }
 
 @keyframes bounce {
    50% {
       transform: translateY(-50%);
    }
 }
 
 .baniere-title {
    position: absolute;
    color: white;
    font-size: 2.5rem;
    width: 60%;
 }
 
 @media screen and (min-width: 768px) {
    .baniere-title {
       font-size: 3rem;
    }
 }
 
 @media screen and (min-width: 1024px) {
    .baniere-title {
       font-size: 3rem;
       bottom: 16rem;
       left: 8rem;
       width: 45%;
    }
 }
 
 @media screen and (min-width: 1024px) {
    .bouton-baniere {
       left: 8rem;
       position: absolute;
       bottom: 10rem;
    }
 }