#modalImage {
    max-height: 85vh;
    width: auto;
    object-fit: contain;
}

.cursor-pointer {
    cursor: pointer;
    transition: transform 0.2s;
}

.cursor-pointer:hover {
    transform: scale(1.03);
    z-index: 10;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 250px;
    gap: 15px;
}

.gallery-item {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: var(--bs-border-radius);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.span-col-2 {
    grid-column: span 2;
}

.span-row-2 {
    grid-row: span 2;
}

.span-2x2 {
    grid-column: span 2;
    grid-row: span 2;
}

.span-4x4 {
    grid-column: span 4;
    grid-row: span 4;
}

@media (max-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 300px;
    }
    .span-col-2,
    .span-row-2,
    .span-2x2,
    .span-4x4 {
        grid-column: auto;
        grid-row: auto;
    }
}