.ms-gallery-container {
    display: grid;
    gap: 15px;
}

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

/* Grid Layout */
.ms-gallery-grid {
    display: grid;
}
.ms-gallery-grid.ms-col-d-1 { grid-template-columns: repeat(1, 1fr); }
.ms-gallery-grid.ms-col-d-2 { grid-template-columns: repeat(2, 1fr); }
.ms-gallery-grid.ms-col-d-3 { grid-template-columns: repeat(3, 1fr); }
.ms-gallery-grid.ms-col-d-4 { grid-template-columns: repeat(4, 1fr); }
.ms-gallery-grid.ms-col-d-6 { grid-template-columns: repeat(6, 1fr); }
.ms-gallery-grid.ms-col-d-12 { grid-template-columns: repeat(12, 1fr); }

/* Masonry Layout */
.ms-gallery-masonry {
    display: block;
    column-gap: var(--e-column-gap, 15px);
}
.ms-gallery-masonry.ms-col-d-1 { column-count: 1; }
.ms-gallery-masonry.ms-col-d-2 { column-count: 2; }
.ms-gallery-masonry.ms-col-d-3 { column-count: 3; }
.ms-gallery-masonry.ms-col-d-4 { column-count: 4; }
.ms-gallery-masonry.ms-col-d-6 { column-count: 6; }

.ms-gallery-masonry .ms-gallery-item {
    break-inside: avoid;
    margin-bottom: var(--e-column-gap, 15px);
}
.ms-gallery-masonry .ms-gallery-item img {
    height: auto;
}

/* Justified Layout */
.ms-gallery-justified {
    display: flex;
    flex-wrap: wrap;
}
.ms-gallery-justified .ms-gallery-item {
    flex-grow: 1;
    height: 200px;
}

@media (max-width: 1024px) {
    .ms-gallery-grid.ms-col-t-1 { grid-template-columns: repeat(1, 1fr); }
    .ms-gallery-grid.ms-col-t-2 { grid-template-columns: repeat(2, 1fr); }
    .ms-gallery-grid.ms-col-t-3 { grid-template-columns: repeat(3, 1fr); }
    .ms-gallery-grid.ms-col-t-4 { grid-template-columns: repeat(4, 1fr); }
    
    .ms-gallery-masonry.ms-col-t-1 { column-count: 1; }
    .ms-gallery-masonry.ms-col-t-2 { column-count: 2; }
    .ms-gallery-masonry.ms-col-t-3 { column-count: 3; }
}

@media (max-width: 767px) {
    .ms-gallery-grid.ms-col-m-1 { grid-template-columns: repeat(1, 1fr); }
    .ms-gallery-grid.ms-col-m-2 { grid-template-columns: repeat(2, 1fr); }
    .ms-gallery-grid.ms-col-m-3 { grid-template-columns: repeat(3, 1fr); }
    
    .ms-gallery-masonry.ms-col-m-1 { column-count: 1; }
    .ms-gallery-masonry.ms-col-m-2 { column-count: 2; }
    .ms-gallery-masonry.ms-col-m-3 { column-count: 3; }
}