@media only screen and (min-width:200px) and (max-width:575px) {
    #searchBar {
        padding: 0px;
    }

    .searchBarWrapper {
        flex-direction: column;
    }

    .searchBarWrapper h1 {
        font-weight: 500;
        font-size: 30px;
    }

    .searchBarWrapper input {
        width: 100%;
        box-shadow: none;
    }
    #MovieCards{
        padding: 20px 10px;
    }

    .MovieCardsWrapper {
        grid-template-columns: repeat(2, 48%);
        justify-content: space-between;
        gap: 10px;
    }
}

@media only screen and (min-width:576px) and (max-width:970px) {
    
    #searchBar {
        padding: 25px;
    }
    .MovieCardsWrapper{
        grid-template-columns: repeat(3, calc(96% / 3));
    }
}