@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Roboto+Slab&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --cor-primaria: #f0f0f0;
    --cor-secundaria: #213555;
    --cor-terciaria: #4f709c;
    --cor-hover: #19a7ce;

    --fonte-primaria: "Montserrat", sans-serif;
    --fonte-secundaria: "Roboto Slab", sans-serif;
}

body {
    background-color: var(--cor-primaria);
}

/* ================= CONTEÚDO ================= */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem;
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

/* TEXTO */
.container__texto {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.container__texto__paragrafo {
    text-align: justify;
    font-family: var(--fonte-secundaria);
    font-size: 1rem;
    line-height: 1.6;
    color: #000;
}

/* CAROUSEL */
.container__carousel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.container__carousel__imagens {
    position: relative;
    width: 100%;
    max-width: 600px;
    /* AUMENTA A LARGURA */
    height: 380px;
    /* AUMENTA A ALTURA */
}


.container__carousel__imagens__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 3px solid var(--cor-secundaria);
    border-radius: 4px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.container__carousel__imagens__img.active {
    opacity: 1;
}

/* BOTÕES */
.container__carousel__btnPrev,
.container__carousel__btnNext {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--cor-secundaria);
    cursor: pointer;
}

.container__carousel__btnPrev:hover,
.container__carousel__btnNext:hover {
    color: var(--cor-hover);
}

/* ================= MOBILE ================= */

@media (max-width: 900px) {
    .container {
        flex-direction: column;
        padding: 2rem 1.5rem;
    }

    .container__carousel {
        width: 100%;
    }

    @media (max-width: 900px) {
        .container__carousel__imagens {
            max-width: 100%;
            height: 300px;
        }
    }

}

@media (max-width: 480px) {
    .container__texto__paragrafo {
        font-size: 0.95rem;
    }

    .container__carousel__btnPrev,
    .container__carousel__btnNext {
        font-size: 1.6rem;
    }
}