#institucional {padding: 75px 0 0;}
#institucional .top, #institucional .bottom {display: flex; justify-content: space-between; gap: 30px;}
#institucional .bottom {flex-direction: row-reverse;}
#institucional .top .img img {width: 100%; height: 100%; object-fit: cover;}
#institucional .top .sub-titulo {margin: 0 0 22px; font: 600 15.62px montserrat; color: var(--azul); letter-spacing: 2.833px;}
#institucional .titulo {margin: 0 0 27px; font: 700 47.83px / 57.19px bebas; color: var(--preto-ter); hyphens: auto;}
#institucional .texto {font: 400 15px / 29px montserrat; color: var(--cinza-seg); padding: 0 0 55px; hyphens: auto;}

#institucional .info {width: 512px;}
#institucional .img {flex: 0 0 50%; display: flex; flex-direction: row; flex-wrap: wrap; gap: 28px 2%; justify-content: space-between;}

#institucional .bottom .imgs .mini-img {width: 48%;}
#institucional .bottom .imgs .mini-img img {width: 100%; height: 100%; object-fit: cover;}
#institucional .bottom .titulo {margin: 60px 0 27px; font: 700 47.63px / 57.19px bebas; color: var(--preto-ter);}

#sobre {padding: 80px 0 115px; background: url(../../../assets/img/bg-produto.webp) no-repeat left bottom / contain; background-size: 1069px;}
#sobre .conteudo {display: flex; flex-direction: column; gap: 21px;}

#diferenciais .conteudo {display: grid;}
#diferenciais .conteudo {display: grid; grid-template-areas: 'a b c c' 'd e g g'; grid-template-columns: repeat(4,1fr); grid-template-rows: 1fr;}
#diferenciais .conteudo .diferencial.card.card-5.imagem.impar {display: none;}


@media (max-width: 1130px) {
    #institucional {padding: 75px 0;}
    #institucional .top, #institucional .bottom {flex-direction: column; align-items: center;}
    #institucional .conteudo {gap: 30px; display: grid;}
    #institucional .texto {padding: 0;}
    #institucional .info {width: 100%;}
    #institucional .img {flex: 0 0 auto; max-width: 600px;}

    #diferenciais .conteudo {grid-template-areas: 
        'c c c' 
        'a b d' 
        'e g g';
        grid-template-columns: repeat(3,1fr);
    }
    
    #diferenciais .conteudo .card.impar .texto, .diferenciais .conteudo .card.impar .titulo{ color: var(--branco);}    
    #diferenciais .conteudo .card.par .texto, .diferenciais .conteudo .card.par .titulo { color: var(--preto);}
}


@media (max-width: 990px) {
    #institucional {padding: 25px 0 0;}
    #institucional .conteudo {display: flex; flex-direction: column; gap: 20px;}
    #institucional .top .sub-titulo {text-align: center; margin: 0 0 5px;}
    #institucional .titulo, #institucional .bottom .titulo {text-align: center; margin: 0 0 10px; font-size: 34px; line-height: 40px;}
    #institucional .top, #institucional .bottom {gap: 15px;}    
    #institucional .texto {text-align: justify; hyphens: auto;}
    #institucional .img {gap: 10px;}
 
    #sobre {padding: 25px 0; background: none;}
    
    #diferenciais {padding: 35px 0;}
    #diferenciais .card.header .titulo-main {margin: 0 0 20px;}
}


@media (max-width: 700px) {
    #diferenciais .conteudo {grid-template-columns: repeat(2, 1fr); grid-template-areas: 
        'c c'
        'a b'
        'e d'
        'g g';
    }
}

@media (max-width: 450px) {
    #diferenciais  .conteudo {grid-template-columns: repeat(1, 1fr); grid-template-areas: 
        'c'
        'a'
        'b'
        'd'
        'e'
        /* 'f' */
        'g';
    }    
}