.banner{
    align-items: center;
    background: 
                url(../../img/dots.png) no-repeat 1rem 2.5rem,
                url(../../img/recicle-mobile.png) no-repeat left 80% / cover, 
                url(../../img/background-banner.png);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

@media screen and (min-width: 778px) {
    .banner{/*
        background: url(../../img/retangulo-completo.png) no-repeat 2rem 8.5rem / 80px 80px,
                    url(../../img/retangulo-borda.png) no-repeat 4rem 7.5rem / 80px 80px,
                    url(../../img/dots-grande.png) no-repeat 1rem 4.5rem / 80px 80px,
                    url(../../img/dots-grande.png) no-repeat 1rem bottom,
                    url(../../img/recicle-desk.png) no-repeat left bottom / contain, 
                    url(../../img/bg-banner-desk.png) repeat center center / cover;
        */
        background: url(../../img/whole-bg.png) no-repeat left center / cover;
        /* justify-content: space-between; */
        justify-content: center;
        gap: 65px;
        padding-left: 10vw;
        padding-right: 0vw;
        padding-top: 4%;
        min-height: 521px;

    }
}