.front-top-slider {
    height: 100vh;
    min-height: 530px;
    position: relative;
    display: flex;
	border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.front-top-slider .front-top-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

.front-top-slider .front-top-overlay .front-top-content {
    position: absolute;
    top: 30vh;
    left: 4vw;
    display: inline-block;
    width: auto;
}

.front-top-slider .front-top-overlay .logo {
    width: 40vw;
    height: auto;
}

.front-top-slider .front-top-info {
    width: 50%;
    height: 100%;
    background-color: var(--color-bg);
}

.front-top-slider .front-top-slides {
    width: 50%;
    position: relative;
    height: 100%;
}

.front-top-slider .front-top-slides .front-top-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    will-change: opacity;
}

@media (max-width: 960px) {
    .front-top-slider {
        flex-direction: column;
        /* Dica: em mobile, 100vh pode "pular" com a barra do navegador. 
           Use 100dvh (dynamic viewport height) se quiser evitar isso: */
        height: 100dvh; 
    }

    .front-top-slider .front-top-info {
        display: none;
    }

    /* .front-top-slider .front-top-info, */
    .front-top-slider .front-top-slides {
        width: 100%;
        /* height: 50%; Cada bloco ocupa metade da altura da tela */
    }

    .front-top-slider .front-top-overlay .front-top-content {
        top: auto;
        bottom: 14vh;
        left: 3vw;
    }

    .front-top-slider .front-top-overlay .logo {
        width: 70vw;
        /* background-color: rgba(229, 229, 222, 0.4);
        box-shadow: 0 0 50px 40px rgba(229, 229, 222, 0.4); */
    }
}