:root {
    --laranja: #DC7E43;
    --cinzaLogo: #3C3C3B;
    --branco: #FFFFFF;
    --cinzaHeader: #F2F2F2CC;
    --cinzaBgLinks: #1D1D1D;
    --cinzaBgSections: #272727;
    --bgCards: #2B2B2BB2;
    --bgInstagram: #2c2c2c;
    --fonteTitulo: 'Analogist';
    --fonteTexto: 'Inter';
}

* {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'Analogist';
    src: url('/web/20250209104543im_/https://www.robertaweber.com.br/assets/fonts/Analogist.otf') format('opentype'), url('/web/20250209104543im_/https://www.robertaweber.com.br/assets/fonts/Analogist.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 0.4rem;
}

::-webkit-scrollbar-thumb {
    background-color: var(--laranja);
}

.midias {
    overflow: hidden;
    width: 100%;
    background-color: var(--bgInstagram);
    height: 580px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.containerMidias {
    overflow: visible;
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.carrosselInstagram {
    overflow: visible;
    margin-bottom: 5em;
    height: 300px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    gap: 3em;
    transition: 0.7s ease-in-out;
    transform: translateX(0);
}

.carrosselInstagram img {
    width: 9.3em;
    height: 18.75em;
}

.textoMidias {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2em;
    width: 90%;
    text-align: center;
}

.arrobaInstagram {
    font-family: var(--fonteTexto);
    font-size: 1.1em;
    font-weight: 800;
    color: var(--laranja);
    text-transform: uppercase;
}

.textoInstagram {
    font-family: var(--fonteTitulo);
    color: var(--branco);
    font-size: 2.5em;
    font-weight: 400;
}

.carrosselInstaDesktop {
    display: none;
}

@media screen and (min-width: 421px) {

    .midias {
        height: 50em;
    }

    .containerMidias {
        gap: 5em;
        width: 90%;
    }

    .carrosselInstagram {
        gap: 10em;
    }

    .carrosselInstagram img {
        width: 15em;
        height: 27.5em;
    }
    
}

@media screen and (min-width: 769px) {

    .midias {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 720px;
    }

    .containerMidias {
        width: 75%;
        flex-direction: row-reverse;
    }

    .carrosselInstagram {
        display: none;
    }

    .carrosselInstaDesktop {
        gap: 2em;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .carrosselInstaDesktop img {
        width: 265px;
        height: 540px;
    }

    .arrobaInstagram {
        text-align: start;
    }

    .textoInstagram {
        text-align: start;
    }

}