.grid {
    width: 800px;
    height: 500px;
    position: relative;
    margin: auto;
    border: 1px solid #ccc;
    overflow: hidden; /* Ensure overflow is hidden */
    background-color: #383838;
}

    .grid .cell {
        background-size: cover;
        background-position: center;
        display: inline-block;
        cursor: pointer; /* Change cursor to pointer */
    }

@media (max-width: 1200px) {
    .grid {
        width: 800px;
        height: 500px;
    }
}

@media (max-width: 992px) {
    .grid {
        width: 600px;
        height: 500px;
    }
}

@media (max-width: 768px) {
    .grid {
        width: 400px;
        height: 500px;
    }
}

@media (max-width: 576px) {
    .grid {
        width: 350px;
        height: 500px;
    }
}

@media (max-width: 350px) {
    .grid {
        width: 300px;
        height: 500px;
    }
}

@media (min-width: 1024px) {
    .grid {
        width: 1000px;
        height: 500px;
    }
}

@media (min-width: 1500px) {
    .grid {
        width: 1200px;
        height: 650px;
    }
}

#loader {
    transition: opacity 1s ease-out, visibility 1s ease-out;
}