.container_quadros {width:100%;max-width: 1360px;display: flex;flex-direction: row;margin: 2% auto;justify-content: space-between;font-family: 'Montserrat';}
.quadro1 {width: 41%;position: relative;}
.quadro2 {width: 23.5%;position: relative;}
.quadro3 {width: 32.5%;display: flex;flex-direction: column;justify-content: space-between;position: relative;}

.container_quadros img {width: 100%;height: auto;}

.quadro3_1 {width: 100%;}
.quadro3_2 {width: 100%;position: relative;}

.img_quadro1 {width: 100%;}
.img_quadro2 {width: 100%;}

.img_quadro3_1 {width: 100%;}
.img_quadro3_2 {width: 100%;}

.txt_quadros1 {font-size: 1.7rem;position: absolute;text-align: center;top: 0;letter-spacing: -0.05rem;margin: 2% auto;line-height: 1.6rem;color: white;width: 100%;}
.txt_quadros2 {font-size: 1.6rem;position: absolute;text-align: center;width: 100%;letter-spacing: -0.05rem;margin: 4% auto;color: white;line-height: 1.6rem;}

.txt_quadros3_1 {font-size: 1.7rem;position: absolute;width: 44%;text-align: left;letter-spacing: -0.05rem;color: white;line-height: 1.7rem;margin: 4%;}
.txt_quadros3_2 {font-size: 1.7rem;position: absolute;width: 60%;line-height: 1.7rem;letter-spacing: -0.05rem;margin: 4%;color: white;} 

@media screen and (max-width: 1024px) {
  
  .container_quadros {width: 90%; flex-wrap: wrap;}
  .txt_quadros3_1 {font-size: 1.2rem;line-height: 1.3rem;}
  .txt_quadros3_2 {font-size: 1.2rem;line-height: 1.3rem;}
  .txt_quadros2 {font-size: 1.2rem;line-height: 1.3rem;}
  .txt_quadros1 {font-size: 1.2rem;line-height: 1.3rem;}

}

@media screen and (max-width: 850px) {
  
.quadro3 {width: 96%;flex-direction: row;justify-content: space-between;}
  .quadro1 {width: 62%;}
  .quadro2 {width: 35.5%;}
  
  .quadro3 {width: 100%;flex-direction: row;justify-content: space-between;margin-top: 2.5%;}
  .quadro3_1 {width: 48.7%;}
  .quadro3_2 {width: 48.7%;}
  .txt_quadros2 {font-size: 1.4rem;}
  .txt_quadros1 {font-size: 1.4rem;line-height: 1.4rem;}
  .txt_quadros3_1 {font-size: 1.4rem;line-height: 1.4rem;width: 20%;margin: 2%;}
  .txt_quadros3_2 {font-size: 1.4rem;line-height: 1.4rem;}
}

@media screen and (max-width: 450px) {
  
.quadro1 {width: 100%;margin-bottom: 3%;}
.txt_quadros1 {padding: 0 4%;font-size: 1.3rem;text-align: center;line-height: 1.3rem;}
  .txt_quadros2 {font-size: 1.8rem;line-height: 1.8rem;padding: 0 6%;}
  .quadro3 {flex-direction: column;}
  .quadro3_1 {width: 100%;margin-bottom: 3%;}
  .quadro3_2 {width: 100%;}
  .quadro2 {width: 100%;}
  .txt_quadros3_1 {width: 40%;font-size: 1.3rem;line-height: 1.3rem;margin: 4%;}
  .container_quadros {margin: 7% auto;width: 100%;}
  .txt_quadros3_2 {font-size: 1.3rem;line-height: 1.3rem;margin: 4%;left: 0;text-align: left;}
}

/* =========================================================
   QUADROS DE INFORMAÇÕES
   ========================================================= */

.quadros_infos {
  display: flex;
  width: 100%;
  margin: 1% auto 0;
  max-width: 1360px;
}

.item_info {
  width: 18%;
  display: flex;
  border: solid 1px #e1e1e1;
  margin: 0 auto;
  padding: 0;
  justify-content: space-around;
  border-radius: 15px;
  align-items: center;
  box-shadow: 0 2px 2px rgb(0 0 0 / 7%);
}

.icon_info {
  width: 30%;
  padding: 4%;
}

/* No CSS original isso vinha de:
   .tudo_independencia img { width:100%; height:100%; }
   
   Como o bloco será usado em outra página,
   é melhor deixar a regra específica aqui.
*/
.icon_info img {
  width: 100%;
  height: auto;
  display: block;
}

.txt_info {
  width: 61%;
  font-size: 1.5rem;
  line-height: 1rem;
}

.txt_info p {
  font-size: 1.1rem;
  line-height: 1.2rem;
  margin: 0;
}

.item_desktop2 {
  display: flex;
}


/* =========================================================
   ATÉ 1440px
   ========================================================= */

@media (max-width: 1440px) {

  .txt_info p {
    font-size: 0.9rem;
    line-height: 1rem;
  }

  .quadros_infos {
    width: 73%;
    margin: 1% auto 0;
  }

}


/* =========================================================
   ATÉ 1024px
   ========================================================= */

@media (max-width: 1024px) {

  .txt_info {
    width: 65%;
    font-size: 0.9rem;
    line-height: 1rem;
  }

  .item_info {
    width: 18%;
    padding: 0.5%;
  }

  .txt_info p {
    font-size: 0.7rem;
    line-height: 0.8rem;
  }

  .quadros_infos {
    width: 79%;
  }

}


/* =========================================================
   ATÉ 850px
   ========================================================= */

@media (max-width: 850px) {

  .txt_info {
    font-size: 0.60rem;
    line-height: 0.8rem;
  }

  .item_info {
    width: 26.5%;
    margin: 0 0.5%;
  }

  .txt_info p {
    font-size: 0.65rem;
    line-height: 0.8rem;
  }

}


/* =========================================================
   ATÉ 768px
   ========================================================= */

@media (max-width: 768px) {

  .quadros_infos {
    width: 87%;
  }

}


/* =========================================================
   MOBILE - ATÉ 450px
   ========================================================= */

@media (max-width: 450px) {

  .item_desktop2 {
    display: none;
  }

  .quadros_infos {
    flex-wrap: wrap;
    width: 95%;
    justify-content: center;
    margin: 3% auto 1%;
  }

  .item_info {
    width: 46.3%;
    margin: 1%;
    box-shadow: none;
  }

  .icon_info {
    width: 25%;
  }

  .txt_info {
    font-size: 0.9rem;
    line-height: 0.8rem;
    width: 66%;
  }

  .txt_info p {
    font-size: 0.9rem;
    line-height: 0.8rem;
  }

}


/* =========================================================
   MOBILE PEQUENO - ATÉ 375px
   ========================================================= */

@media (max-width: 375px) {

  .txt_info p {
    font-size: 0.75rem;
  }

}