.menu-card {
    aspect-ratio: 1/0.6;
}

.menu-card svg {
    width: 50px;
    height: 50px;
}

.menu-card.active {
    border-color: #4C3D3D !important;
    border-width: 2px !important;
    background-color: #d8ccb626;
}

.menu-card:not(.active):hover {
    border-color: #4c3d3d73 !important;
    border-width: 2px !important;
}

@media only screen and (max-width: 1399px) {
    .menu-card svg {
        width: 40px;
        height: 40px;
    }

    .menu-card span {
        font-size: 0.9rem !important;
    }
}

@media only screen and (max-width: 576px) {
    .menu-card {
        aspect-ratio: 1/0.7;
    }
}

@media only screen and (max-width: 431px) {
    .menu-card {
        aspect-ratio: 1/1;
    }

    .menu-card svg {
        width: 38px;
        height: 38px;
    }
}

@media only screen and (max-width: 380px) {
    .menu-card span {
        font-size: 12px !important;
        line-height: 1rem;
    }
}

@media only screen and (max-width: 250px) {
    .menu-card svg {
        width: 20px;
        height: 20px;
    }

    .menu-card span {
        font-size: 10px !important;
    }
}