@media (max-width: 820px) {
    header nav {
        display: none;
    }

    header .menu {
        display: flex;
    }

    .hero .container {
        flex-direction: column;
    }

    .hero .leftside {
        text-align: center;
        padding-bottom: 40px;
    }

    .hero .rightside {
        padding-bottom: 50px;
    }

    .hero h1 {
        font-size: 44px;
        line-height: 50px;
    }

    .search {
        padding-bottom: 30px;
    }

    .search .title {
        text-align: center;
    }

    .search .sides {
        flex-direction: column;
        gap: 20px;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    footer .container {
        flex-direction: column;
        gap: 20px;
    }

    @media (max-width: 500px) {
        .products-grid {
            grid-template-columns: 1fr;
        }
    }

}