.maincontent {
    max-height: 88.9vh;
}

.cardContainer {
    margin: 10px;
    gap: 2px;
}

.cardContainer a:hover {
    transition: all .2s;
}

.card {
    width: 180px;
    padding: 9px 5px;
}

.card img{
    width: 98%;
}

.card h3{
    font-size: 1.3rem;
}

.thankyou{
    margin-top: 1px;
    bottom: 0.5%;
}

@media (max-width: 1455px) {
    .cardContainer {
        margin: 15px 5px;
        gap: 5px;
    }
}

@media (max-width: 1020px) {
    .search-bar:focus-within {
        width: 75%;
    }
    
    .cardContainer {
        margin: 15px 5px;
        gap: 5px;
    }
}

@media (max-width: 930px) {
    .cardContainer {
        margin: 15px 5px;
        gap: 5px;
    }
}

@media (max-width: 730px) {

    .search-bar:focus-within .input {
        opacity: 1;
        cursor: initial;
    }
    
    .cardContainer {
        margin: 15px 5px;
        gap: 5px;
    }

}

@media (max-width: 535px){
    .card {
        width: 160px;
        padding: 9px 5px;
    }

    .card h3{
        font-size: 1.2rem;
    }
}

@media (max-width: 435px){
    .maincontent {
        max-height: 90vh;
    }
}

@media (max-width: 395px) {
    .search-bar:focus-within .input {
        width: 78%;
    }

    .card {
        width: 44.7vw;
        padding: 8px 0px;
    }

    .cardContainer {
        margin: 8px 4px;
        gap: 5px;
    }
    
    .card img {
        width: 94%;
    }

    .card h3 {
        font-size: 1.2rem;
        padding-top: 2px;
    }
}