.engloba-banner {width: 100%; float: left; background: var(--cinza-escuro);}
.alinha-banner {width: calc(100% - 60px); margin: 0 30px;height: 147px; display: flex; justify-content: center; align-items: center} 
.alinha-banner p{font: 26px playfair;color: white; text-align: center; text-transform: uppercase; letter-spacing: 2px; width: 100%;}

.engloba-areas {width: 100%; float: left;}
.alinha-title-areas {width: calc(100% - 60px); margin: 0 30px; display: flex; align-items: center;padding: 80px 0 72px;}
.alinha-title-areas .linha{width: 100%; height: 2px; background: #b2b2b2;}
.alinha-title-areas .title{font:27px playfair; line-height: 27px; color: var(--fonte-azul); text-align: center; padding: 0 15px;white-space: nowrap;}
.alinha-areas {width: calc(100% - 60px); margin: 0 30px; padding: 0 0 110px; display: flex; justify-content: space-between; flex-wrap: wrap;gap: 115px 0;}
.alinha-areas .padrao{width: 501px; display: flex; justify-content: space-between;}
.alinha-areas .padrao .img{width: 192px; height: 271px;background: var(--fonte-azul);}
.alinha-areas .padrao .infos{width: 268px;margin: -5px 0 -5px}
.alinha-areas .padrao .infos .title{font: 26px playfair; color: var(--fonte-azul); line-height: 35px; margin:0 0 30px;}
.alinha-areas .padrao .infos .txt{font: 15px montserrat-regular; color: #686868; text-align: left; line-height: 26px;}

@media(max-width: 1220px){
    .alinha-banner{height: 120px;}
    .alinha-banner p{font-size: 23px;}

    .alinha-title-areas{padding: 60px 0 50px;}
    .alinha-title-areas .title{font-size: 23px; line-height: 35px;}
    
    .alinha-areas {gap: 80px 0}
    .alinha-areas .padrao{width: 48%;}
    .alinha-areas .padrao .img{width: 160px; height: 240px;}
    .alinha-areas .padrao .infos{width: calc(100% - 180px);}
    .alinha-areas .padrao .infos .title{font-size: 23px; line-height: 35px;}
}
@media(max-width: 990px){
    .alinha-banner{height: 100px;}
    .alinha-banner p{font-size: 20px;}

    .alinha-areas {gap: 60px 0; padding: 0 0 80px;}
    .alinha-areas .padrao{width: 100%; }
    .alinha-areas .padrao .img{width: 140px; height: 200px;}
    .alinha-areas .padrao .infos{width: calc(100% - 160px);}
    .alinha-areas .padrao .infos .title br{display: none;}
}
@media(max-width: 767px){
    .alinha-banner{height: 80px;}
    .alinha-banner p{font-size: 18px; letter-spacing: 1px;}
    
    .alinha-title-areas{width: 100%; margin: 0; padding: 30px 0;}
    .alinha-title-areas .title{font-size: 20px; line-height: 27px;}
    
    .alinha-areas{width: 100%; margin: 0; gap: 30px 0; padding: 0 0 50px;}
    .alinha-areas .padrao .infos .title{font-size: 20px; line-height: 27px;margin:0 0 10px;}
    .alinha-areas .padrao .infos .txt{font-size: 14px; line-height: 23px;}
}
@media(max-width: 400px){
    .alinha-areas{padding: 0 0 30px;}
    
    .alinha-areas .padrao .img{width: 95px; height: 130px;}
    .alinha-areas .padrao .infos{width: calc(100% - 110px);}
    .alinha-areas .padrao .infos .title{text-align: left;}
}
@media(max-width: 315px){    
    .alinha-title-areas .linha{display: none;}
    .alinha-title-areas .title{width: 100%; padding: 0; white-space: inherit;}
    .alinha-areas .padrao{flex-direction: column;align-items: center;}
    .alinha-areas .padrao .infos{margin: 0; width: 100%;}
    .alinha-areas .padrao .img{margin: 0 0 10px; width: 100%; max-width: 120px; height: 160px;}
}