/* #region sessao */
.sessao3 {
    /* background-color: orange !important; */
    background-color: #040503;
    width: 100vw;
    height: auto;

    padding-top: 7rem;
    padding-bottom: 7rem;

    /* background-image: url(/src/assets/images/etc/efeito_background_1.webp); */
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 12%;

    position: relative;
}

.sessao3 .wrap {
    /* background-color: orange; */
    width: 60%;
    height: 100%;

    margin-left: auto;
    margin-right: auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;

    text-align: center;
}

.sessao3 .wrap .margem-top {
    /* background-color: orange; */
    margin-top: 3rem;
}

.sessao3 .wrap .efeito-lateral-1 {
    /* background-color: red; */
    position: absolute;
    right: 0;
    top: 0;
}

.sessao3 .wrap .efeito-lateral-1 img {
    height: 50rem;
}

.sessao3 .wrap .efeito-lateral-2 {
    /* background-color: orange; */
    position: absolute;
    left: 0;
    bottom: 0;
}

.sessao3 .wrap .efeito-lateral-2 img {
    height: 40rem;
}

.sessao3 .wrap span {
    color: rgba(255, 253, 250, 0.9);
}

.sessao3 .wrap .limitar-div {
    /* background-color: orange; */
    width: 50%;
    text-align: center;
    margin: auto;
}

.sessao3 .wrap .cards {
    /* background-color: orange; */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    margin-top: 1.5rem;
    gap: 1.5rem;
}

.sessao3 .wrap .cards .card-alt {
    /* background-color: orange !important; */
    background-color: var(--card);
    flex: 0 0 25%;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;

    text-align: left;
    padding: 0rem;
    border-radius: 1rem;
}

.sessao3 .wrap .cards .card-alt .conteudo {
    /* background-color: orange; */
    padding: 1.5rem;
    min-height: 10rem;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.75rem;
}

.sessao3 .wrap .cards .card {
    /* background-color: orange !important; */
    background-color: var(--card);
    flex: 0 0 40%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.75rem;

    text-align: left;
    padding: 1.5rem;
    border-radius: 1rem;
    max-width: 30%;
    min-height: 13rem;

    z-index: 999 !important;
}

.sessao3 .wrap .cards .card .titulo,
.sessao3 .wrap .cards .card-alt .titulo {
    color: var(--secundaria);
    font-style: normal;
    font-weight: 500;
    font-size: 1.5rem;
    /* line-height: 0rem; */
    text-transform: uppercase;
}

.sessao3 .wrap .cards .card img {
    width: 2.25rem;
    height: auto;
    margin-bottom: 0.5rem;
    filter: brightness(0) invert(0.9);
}

.sessao3 .wrap .cards .card-alt .imagens {
    /* background-color: orange; */
    width: 100%;
    position: relative;
}

.sessao3 .wrap .cards .card-alt .imagens img {
    /* background-color: orange !important; */
    background: no-repeat center center fixed;
    background-size: cover;
    width: 100%;
    height: auto;
    display: block;
}

.sessao3 .wrap .cards .card-alt .imagens img:nth-of-type(1) {
    /* display: none !important; */
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.sessao3 .wrap .cards .card-alt .imagens img:nth-of-type(2) {
    position: absolute;
    bottom: 0px;
}

/* #endregion */

/* #region media_queries */
@media (max-width:1920px) {
    .sessao3 {
        /* background-color: orange; */
        background-size: 40%;
    }

    .sessao3 .wrap {
        /* background-color: orange; */
        width: 70%;
    }

    .sessao3 .wrap .limitar-div {
        /* background-color: orange; */
        width: 70%;
    }

    .sessao3 .wrap .cards .card {
        /* background-color: orange; */
        max-width: 100%;
    }
}

/* hi-res laptops and desktops ++ */
@media (max-width:1367px) {
    .sessao3 .wrap .cards .card-alt {
        /* background-color: orange; */
        flex: 0 0 30%;
    }
}

/* hi-res laptops and desktops */
@media (max-width:1281px) {
    .sessao3 {
        background-image: none;
    }

    .sessao3 .wrap {
        /* background-color: orange; */
        width: 90%;
    }

    .sessao3 .wrap .efeito-lateral-1 {
        /* display: none; */
        filter: brightness(75%);
    }

    .sessao3 .wrap .efeito-lateral-2 {
        /* display: none; */
        filter: brightness(35%);
    }

    .sessao3 .wrap .limitar-div {
        /* background-color: orange; */
        width: 90%;
        text-align: center;
        margin: auto;
    }

    .sessao3 .wrap .cards .card {
        flex: 0 0 40%;
        margin: auto;
    }
}

/* big landscape tablets, laptops, and desktops */
@media (max-width:1025px) {
    .sessao3 .wrap .cards .card-alt {
        flex: 0 0 45%;
    }

    .sessao3 .wrap .cards .card {
        flex: 0 0 40%;
    }
}

/* tablet, landscape iPad, lo-res laptops ands desktops */
@media (max-width:801px) {
    .sessao3 {
        /* background-color: orange !important; */
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .sessao3 .wrap .cards .card {
        /* background-color: orange !important; */
        height: fit-content !important;
    }

    .sessao3 .wrap .cards .card-alt .conteudo {
        /* background-color: orange; */
        min-height: fit-content;
    }

    .sessao3 .wrap .cards .card-alt, .sessao3 .wrap .cards .card {
        /* background-color: orange; */
        flex: 0 0 90%;
    }

    .sessao3 .wrap .cards .card-alt .imagens {
        background-color: var(--secundaria);
        opacity: 0.75;

        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
    }

    .sessao3 .wrap .cards .card-alt .imagens img:nth-of-type(1) {
        height: 10rem;
        /* object-fit: cover; */
        object-fit: contain;
    }

    .sessao3 .wrap .efeito-lateral-1 {
        display: none;
    }

    .sessao3 .wrap .efeito-lateral-2 {
        display: none;
    }
}

/* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
@media (max-width:600px) {}

/* smartphones, Android phones, landscape iPhone */
@media (max-width:480px) {}

/* #endregion */