.noticias{
  /**Hero**/
  .hero{
    background: url(../img/sobre/sobre.jpg) no-repeat right center;
    background-size: cover;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    gap: 10px;
    flex-direction: column;
    padding: 140px 15%;
    h1{
      margin: 0;
      line-height: 1;
      font-size: 3rem;
      color: #fff;
      font-weight: 700;
      span.verde{
        color: var(--verdelight);
      }
    }
    p{
      color: #fff;
      font-size: 1.2rem;
      width: 600px;
      margin: 0;
    }
  }
  /**Conteudo**/
  .conteudo{
    padding: 80px 15%;
    .topo-lista{
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      margin-bottom: 40px;
      h2{
        margin: 0;
        font-weight: 600;
        color: var(--verde);
      }
    }
    .select-categorias {
        min-width: 300px;
    }
    .select-categorias select {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        padding: 16px 48px 16px 20px;
        border: 1px solid #dcdcdc;
        border-radius: 8px;
        background-color: #fff;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 20px center;
        color: #6b6b6b;
        font-family: inherit;
        font-size: 16px;
        line-height: 1.2;
        cursor: pointer;
        transition: border-color .2s ease;
    }
    .select-categorias select:hover, .select-categorias select:focus-visible {
        border-color: #0e8a3c;
        outline: none;
    } 
    .noticia{
      margin: 15px 0;
      padding: 25px;
      background: #fff;
      border: solid 1px var(--bgcinza);
      border-radius: 15px;
      transform: translateY(6px);
      transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
      img{
        width: 100%;
        height: auto;
        display: block;
        border-radius: 15px;
      }
      h4{
        font-size: 1.2rem;
        line-height: 1.2;
        margin: 15px 0;
        font-weight: 600;
        min-height: 4.32rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;      
        a{
          color: var(--verde);
          transition: .3s;
        }
        &:hover{
          a{
            color: var(--verdeescuro);
          }
        }
      }
      .ler-mais{
        display: block;
        max-width: 100%;
        width: max-content;
        background: var(--bgverde);
        padding: 6px 15px;
        color: var(--verde);
        border-radius: 10px;
        font-weight: 700;
        font-size: .8rem;
        text-transform: uppercase;
        transition: .3s;
        &:hover{
          background: var(--verde);
          color: var(--bgverde);
        }
      }
      &:hover{
        transform: translateY(-6px);
      }     
    }  
    .btn-carregar-mais {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        min-width: 360px;
        max-width: 100%;
        padding: 20px 32px;
        border: 0;
        border-radius: 8px;
        background: #0e8a3c;
        color: #fff;
        font-family: inherit;
        font-size: 17px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        transition: background .2s ease, opacity .2s ease;
        margin: 40px auto 0;
    }
    .btn-carregar-mais:hover {
        background: #0b7332;
    }
    .btn-carregar-mais[hidden] {
        display: none;
    }
    .btn-carregar-mais:disabled {
        opacity: .75;
        cursor: wait;
    }
    .btn-carregar-mais .mais {
        color: #f2c31d;
        font-size: 22px;
        line-height: 1;
    }
  }
  @media (max-width: 1600px) {
    .hero {
      padding: 140px 60px;      
    } 
    .conteudo{
      padding: 80px 60px;
    }               
  } 
  @media (max-width: 1024px) {
    .hero {
      padding: 100px 60px;
      background-position: center;
      p{
        width: 100%;
      }
    }     
    .conteudo{
      padding: 60px;
      .topo-lista{
        flex-direction: column;
        margin-bottom: 15px;
        h2{
          margin-bottom: 15px;
        }
      }
      .select-categorias {
        width: 100%;
        min-width: 0;
      }
    
      .btn-carregar-mais {
          width: 100%;
          min-width: 0;
      }
    } 
  }   
  @media (max-width: 560px) {
    .hero {
      padding: 60px 30px;
      h1{
        font-size: 2.5rem;
      }
      p{
        font-size: 1rem;
      }
    } 
    .conteudo{
      padding: 40px 30px;
    }       
  }  
}