@media (max-width: 1024px) {

  /* TOPO */
  .topo {
    width: auto;
    left: 20px;
    right: 20px;
    top: 20px;
  }

  .topo1 {
    left: 20px;
    top: 90px; 
  }

  /* MENU LATERAL */
  .menu_lateral {
    width: 320px;
  }

  /* HERO BLOG */
  .bg {
    height: 65vh;
  }

  .conteudo_blog h1 {
    font-size: 3.6rem;
  }

  .conteudo_blog p {
    font-size: 1.4rem;
  }

  /* LAYOUT BLOG */
  .blogs-layout {
    grid-template-columns: 1fr;
    padding: 10px 40px;
  }

  .blogs-vazio {
    display: none;
  }

  /* FILTRO */
  .filtro {
    max-width: 100%;
    margin: 40px auto 0;
  }

  /* POSTS */
  .post h2 {
    font-size: 18pt;
  }

  /* PAGINAÇÃO */
  .btn_paginacao {
    margin: 30px 0;
  }

  .btn_paginacao a {
    width: 60px;
    height: 60px;
  }

  /* SESSÃO 6 */
  .sessao6 {
    padding: 40px;
    height: auto;
  }

  .sessao6-centro h1 {
    font-size: 70px;
  }
}


/* ================= MOBILE ================= */
@media (max-width: 768px) {

  /* TOPO */
  .topo{
    width: 160px;
    left: 8px;
    right: 15px;
    top: 20px;
    min-width: auto;
    padding: 7px 14px;
  }
  
  .topo1{
    display: none;
    width: 200px;
    left: 185px;
    right: 15px;
    top: 20px;
    min-width: auto;
    font-size: 10pt;
    padding: 5px 10px; 
  }

  .logo img{
    height: 30px;
  }

  /* MENU LATERAL */
  .menu_lateral{
    width: 100%;
    left: -100%;
  }

  .menu_lateral.ativo{
    left: 0;
  }

  .menu_links a{
    font-size: 22pt;
    padding-left: 25px;
  }

  /* HERO BLOG */
  .bg{
    height: 70vh;
  }

  .bg .img_principal img{
    height: 100%;
  }

  .img_principal::after{
    height: 100%;
  }

  .conteudo_blog{
    bottom: 80px;
    padding: 0 15px;
  }

  .conteudo_blog h1{
    font-size: 2.4rem;
  }

  .conteudo_blog p{
    font-size: 1rem;
  }

  /* LAYOUT BLOG */
  .blogs-layout{
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 25px;
    top: -30px;
  }

  .blogs-vazio{
    display: none;
  }

  /* POSTS */
  .post{
    padding: 18px;
  }

  .post h2{
    font-size: 18pt;
  }

  .post p{
    font-size: 12pt;
  }

  /* PUBLICADOR */
  .publicador{
    padding: 10px;
  }

  .publicador .foto_pub{
    width: 60px;
    height: 60px;
  }

  .publicador .conteudo h3{
    font-size: 14px;
  }

  .publicador .conteudo span{
    font-size: 9pt;
  }

  /* PAGINAÇÃO */
  .btn_paginacao{
    margin: 20px 0;
    gap: 10px;
  }

  .btn_paginacao a{
    width: 50px;
    height: 50px;
    font-size: 16px;
  }

  /* SESSÃO 6 */
  .sessao6{
    padding: 40px 20px;
    height: auto;
  }

  .sessao6-topo p{
    font-size: 16pt;
  }

  .sessao6-centro h1{
    font-size: clamp(40px, 12vw, 80px);
    text-align: center;
  }

  .sessao6-nav{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 0;
  }

  .sessao6-nav a{
    font-size: 16px;
  }

}