.recursosbg{
    background-image: url("../img/recursosbg.png");
    height: 218vh;
    max-width: 100%;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boxLetramento{
    background: var(--white-color);
    border-radius: 20px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90% !important;
}

@media only screen and (max-width: 767px) {
    .recursosbg{
        height: 200vh;
    }
}
@media only screen and (min-width: 575px) and (max-width: 992px) {
    .boxLetramento .infoArea{
        left: auto !important;
        width: 33%;
    }
}
@media only screen and (min-width: 767px) and (max-width: 992px) {
    .boxLetramento .infoArea{
        width: 27%;
    }
}

@media only screen and (max-width: 992px) {
    .recursosbg{
        height: 200vh;
    }
}