.banner1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
    height: 100%;
}

.banner1 .esquerda {
    gap: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

.banner1 .direita {
    flex: 1;
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
}


.banner1 .direita .preview {
    display: block;
    aspect-ratio: 1/1;
    height: 100% !important;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}


@media (orientation: portrait) {
    @media (max-width: 375px) {
        .banner1 {
            flex-direction: column-reverse;
            justify-content: space-between;
            align-items: center;
            height: 100%;
        }

        .banner1 .esquerda {
            gap: 16px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 8px;
            align-items: center;

        }

        .banner1 .direita {
            flex: 2 !important;
            display: block;
            position: relative;
            width: 100%;
            max-width: 240px;
            aspect-ratio: 1/1;
        }

        .banner1 .direita .preview {
            display: block;
            aspect-ratio: 1/1;
            height: 100% !important;
            width: 100% !important;
            background-size: 100%;
            background-position: center;
        }
    }

    @media (min-width: 376px) and (max-width: 600px) {



        .banner1 {
            flex-direction: column-reverse;
            justify-content: space-between;
            align-items: center;
            height: 100%;
        }

        .banner1 .esquerda {
            gap: 16px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 8px;
            align-items: center;

        }

        .banner1 .direita {
            flex: 2 !important;
            display: block;
            position: relative;
            width: 100%;
            max-width: 400px;
            aspect-ratio: 1/1;
        }

        .banner1 .direita .preview {
            display: block;
            aspect-ratio: 1/1;
            height: 100% !important;
            width: 100% !important;
            background-size: 100%;
            background-position: center;
        }


    }

    @media (min-width: 601px)and (max-width: 900px) {

        .banner1 {
            display: flex;
            flex-direction: column-reverse;
            justify-content: space-between;
            align-items: center;
            height: 100%;
        }

        .banner1 .esquerda {
            gap: 16px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 8px;
            align-items: center;

        }

        .banner1 .direita {
            flex: 2 !important;
            display: flex;
            position: relative;
            width: 100%;
            max-width: 600px;
            aspect-ratio: 1/1 !important;
        }

        .banner1 .direita .preview {
            display: block;
            aspect-ratio: 1/1;
            height: 100% !important;
            width: 100% !important;
            background-size: 100%;
            background-position: center;
        }



    }

    @media (min-width: 901px)and (max-width: 1024px) {

        .banner1 {
            display: flex;
            flex-direction: column-reverse;
            justify-content: space-between;
            align-items: center;
            height: 100%;
        }

        .banner1 .esquerda {
            gap: 16px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 8px;
            align-items: center;

        }

        .banner1 .direita {
            flex: 2 !important;
            display: flex;
            position: relative;
            width: 100%;
            aspect-ratio: 1/1 !important;
        }

        .banner1 .direita .preview {
            display: block;
            aspect-ratio: 1/1;
            height: 100% !important;
            width: 100% !important;
            background-size: 100%;
            background-position: center;
        }



    }

    @media (min-width: 1025px){
        .banner1 {
            display: flex;
            flex-direction: column-reverse;
            justify-content: space-between;
            align-items: center;
            height: 100%;
        }

        .banner1 .esquerda {
            gap: 16px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 8px;
            align-items: center;

        }

        .banner1 .direita {
            flex: 2 !important;
            display: flex;
            position: relative;
            width: 100%;
            aspect-ratio: 1/1 !important;
        }

        .banner1 .direita .preview {
            display: block;
            aspect-ratio: 1/1;
            height: 100% !important;
            width: 100% !important;
            background-size: 100%;
            background-position: center;
        }
    }
}

@media (orientation: landscape) {
    @media (min-width: 500px) and (max-width: 599px) {

        .banner {
            padding: 0px 0px;
        }

        .banner1 {
            flex-direction: row;
            justify-content: center;
            align-items: center;
            height: 100%;
        }

        .banner1 .esquerda {
            gap: 16px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 8px;
            align-items: center;

        }

        .banner1 .direita {
            flex: 1 !important;
            display: block;
            position: relative;
            width: 100%;
            max-width: 200px;
            aspect-ratio: 1/1;
        }

        .banner1 .direita .preview {
            display: block;
            aspect-ratio: 1/1;
            height: 100% !important;
            width: 100% !important;
            background-size: 100%;
            background-position: center;
        }
    }

    @media (min-width: 600px) and (max-width: 799px) {


        .banner {
            padding: 0px 0px;
        }

        .banner1 {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height: 100%;
        }

        .banner1 .esquerda {
            gap: 16px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 8px;
            align-items: center;

        }

        .banner1 .direita {
            flex: 2 !important;
            display: block;
            position: relative;
            width: 100%;
            max-width: 250px;
            aspect-ratio: 1/1;
        }

        .banner1 .direita .preview {
            display: block;
            aspect-ratio: 1/1;
            height: 100% !important;
            width: 100% !important;
            background-size: 100%;
            background-position: center;
        }


    }

    @media (min-width: 800px) and (max-width: 1024px) {


        .banner {
            padding: 0px 0px;
        }


        .banner1 {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height: 100%;
        }

        .banner1 .esquerda {
            gap: 16px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 8px;
            align-items: center;

        }

        .banner1 .direita {
            flex: 2 !important;
            display: block;
            position: relative;
            width: 100%;
            max-width: 300px;
            aspect-ratio: 1/1;
        }

        .banner1 .direita .preview {
            display: block;
            aspect-ratio: 1/1;
            height: 100% !important;
            width: 100% !important;
            background-size: 100%;
            background-position: center;
        }


    }

    @media (min-width: 1025px) and (max-width: 1111px) {

        .banner {
            padding: 0px 0px;
        }

        .banner1 {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height: 100%;
        }

        .banner1 .esquerda {
            gap: 16px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 8px;
            align-items: center;

        }

        .banner1 .direita {
            flex: 2 !important;
            display: block;
            position: relative;
            width: 100%;
            max-width: 350px;
            aspect-ratio: 1/1;
        }

        .banner1 .direita .preview {
            display: block;
            aspect-ratio: 1/1;
            height: 100% !important;
            width: 100% !important;
            background-size: 100%;
            background-position: center;
        }


    }

    @media (min-width: 1112px) and (max-width: 1366px) {

        .banner {
            padding: 0px 0px;
        }

        .banner1 {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height: 100%;
        }


    }

    @media (min-width: 1367px) and (max-width: 1600px) {





        .banner1 {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height: 100%;
        }


    }
}