/* queries.css */
/* Todos os breakpoints responsivos */

@media (min-width: 1280px) {
     #app {
          padding-top: 5rem;
          padding-bottom: 5rem;
     }
}

@media (max-width: 1024px) {
     #nav {
          padding: 1rem 2.5rem;
     }

     #app {
          max-width: 780px;
          padding: 3.5rem 2.5rem;
     }

     #site-footer {
          padding-left: 2.5rem;
          padding-right: 2.5rem;
     }

     .footer-inner,
     .footer-bottom {
          max-width: 780px;
     }
}

@media (max-width: 600px) {
     body {
          padding-top: 49px;
     }

     #nav {
          padding: 0.75rem 1rem;
          gap: 1rem;
     }

     #app {
          max-width: 100%;
          padding: 2rem 1rem;
     }

     .home-intro {
          margin-bottom: 2rem;
          padding-bottom: 2rem;
     }

     .home-title {
          font-size: 1.75rem;
     }

     .kits-contact {
          flex-direction: column;
     }

     .footer-inner {
          flex-direction: column;
          gap: 1.5rem;
     }

     #site-footer {
          padding: 2rem 1rem 1.5rem;
     }

     .footer-inner,
     .footer-bottom {
          max-width: 100%;
     }

     .article-list li {
          grid-template-columns: 1fr;
          gap: 0.2rem;
     }

     .article-list li:hover {
          background: none;
          margin: 0;
          padding-left: 0;
          padding-right: 0;
     }

     .article-list span {
          font-size: 0.72rem;
     }

     .article-search {
          max-width: 100%;
     }
}