/* Tablet */

@media (max-width: 768px) {

    .header .container {

        flex-direction: column;

        gap: 15px;

    }

    

    .nav ul {

        gap: 15px;

    }

    

    .hero h2 {

        font-size: 2rem;

    }

    

    .produtos-grid {

        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    }

}



/* Mobile */

@media (max-width: 480px) {

    .logo h1 {

        font-size: 1.2rem;

    }

    

    .nav ul {

        flex-direction: column;

        text-align: center;

        gap: 10px;

    }

    

    .hero {

        padding: 120px 0 60px;

    }

    

    .hero h2 {

        font-size: 1.8rem;

    }

    

    .filtros {

        gap: 10px;

    }

    

    .filtro-btn {

        padding: 8px 15px;

        font-size: 0.9rem;

    }

    

    .produto-acoes {

        flex-direction: column;

    }

    

    .modal-content {

        margin: 20% auto;

        padding: 20px;

    }

}