@media (max-width: 1024px) {
    header {
        padding: 0 40px;
    }

    .hero,
    .products div,
    .products ul,
    .about {
        padding-left: 40px;
        padding-right: 40px;
    }

    .hero h1 {
        font-size: 42px;
    }

    .about h1 {
        font-size: 32px;
    }
}

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

    header {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }

    header img {
        width: 120px;
    }

    header a,
    .hero a {
        font-size: 16px;
        text-align: center;
    }

    .hero {
        padding: 50px 20px;
        gap: 30px;
    }

    .hero h1 {
        font-size: 34px;
        text-align: center;
    }

    .hero p {
        font-size: 18px;
        text-align: center;
    }

    .hero a {
        align-self: center;
    }

    .products div {
        padding: 50px 20px 20px;
    }

    .products ul {
        padding: 20px;
        gap: 30px;
        grid-template-columns: 1fr;
    }

    .products ul li img {
        height: 200px;
    }

    .about {
        padding: 50px 20px;
        gap: 30px;
    }

    .about h1 {
        font-size: 28px;
    }

    .about p {
        font-size: 18px;
    }

    footer ul {
        gap: 20px;
        flex-wrap: wrap;
    }

    footer ul a {
        font-size: 50px;
    }
}

/* Celulares pequenos */
@media (max-width: 480px) {

    .hero h1 {
        font-size: 28px;
    }

    .hero p,
    .about p {
        font-size: 16px;
    }

    .about h1 {
        font-size: 24px;
    }

    .products ul li h2 {
        font-size: 18px;
    }

    .products ul li p {
        font-size: 14px;
    }

    footer ul a {
        font-size: 40px;
    }
}