@media screen and (max-width:550px) {

    
    nav{
        flex-direction: column;
    }
    header{
        height: 30vh;
    }
    .logo{
        justify-content: center;
        margin: 4vh 0;
    }
    nav ul{
        justify-content: center;
    }
    .search{
        justify-content: center;
    }
    .search input{
        margin: 12px 16px;
    }
    .btn{
        height: 6vh;
    }
    .slider{
        height: 33vh;
    }
    .card-item img {
        width: 120px;
        padding: 20vw 20vh;
        margin: 2vw 2vh;
    }
    .cards{
        display: flex;
        padding: 2vw 2vh;
        margin: 2vw 2vh;
    }
    footer{
        height: 8vh;
    }
}