@media (min-width: 50px) and (max-width: 400px) {
    .grid-container {
        /* display: grid; */
        /* grid-template-columns: repeat(auto-fill, 130px); */
        /* gap: 20px !important; */
        /* justify-content: center !important; */
        margin: 0 auto;
    }

    .grid-item {
        width: 130px;
        margin-bottom: 20px;
        border-radius: 15px;
        cursor: zoom-in;
        background-color: lightgray;
    }

}

@media (min-width: 401px) and (max-width: 750px) {
    .grid-container {
        /* display: grid; */
        /* grid-template-columns: repeat(auto-fill, 150px); */
        /* gap: 20px !important; */
        /* justify-content: center !important; */
        margin: 0 auto;
    }

    .grid-item {
        width: 150px;
        margin-bottom: 20px;
        border-radius: 15px;
        cursor: zoom-in;
        background-color: lightgray;
    }

}

@media (min-width: 751px) and (max-width: 1200px) {
    .grid-container {
        /* display: grid; */
        /* grid-template-columns: repeat(auto-fill, 230px); */
        /* gap: 20px !important; */
        /* justify-content: center !important; */
        margin: 0 auto;
    }

    .grid-item {
        width: 230px;
        margin-bottom: 20px;
        border-radius: 15px;
        cursor: zoom-in;
        background-color: lightgray;
    }

}

@media (min-width: 1201px) and (max-width: 2000px) {
    .grid-container {
        /* display: grid; */
        /* grid-template-columns: repeat(auto-fill, 250px); */
        /* gap: 20px !important; */
        /* justify-content: center !important; */
        /* gap: 20px !important; */
        margin: 0 auto;

    }

    .grid-item {
        width: 250px;
        margin-bottom: 20px;
        border-radius: 15px;
        cursor: zoom-in;
        background-color: lightgray;
    }

}


.grid-item:hover {
    filter: opacity(0.9);
}