/* Grid Layout */
.lws-gallery-wrapper.grid {
    display: grid;
    grid-template-columns: repeat(var(--lws-columns, 3), 1fr);
    gap: 20px;
    width: 100%;
}

/* Masonry Layout */
.lws-gallery-wrapper.masonry {
  width: calc(100% + 20px); /* Compensate for negative margin */
  margin-left: -10px; /* Center the gallery */
  margin-right: -10px;
}

.lws-gallery-wrapper.masonry .lws-gallery-item {
  width: calc((100% / var(--lws-columns)) - 20px);
  margin: 10px;
}

/* Common styles */
.lws-gallery-item {
    position: relative;
}

.lws-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* Responsive styles */
@media screen and (max-width: 1024px) {
    .lws-gallery-wrapper.grid,
    .lws-gallery-wrapper.masonry {
        --lws-columns: min(var(--lws-columns), 3) !important;
    }
    .lws-gallery-wrapper.masonry .lws-gallery-item {
        width: calc((100% / min(var(--lws-columns, 3), 3)) - 20px);
    }
}

@media screen and (max-width: 768px) {
    .lws-gallery-wrapper.grid,
    .lws-gallery-wrapper.masonry {
        --lws-columns: min(var(--lws-columns), 2) !important;
    }
    .lws-gallery-wrapper.masonry .lws-gallery-item {
        width: calc((100% / min(var(--lws-columns, 2), 2)) - 20px);
    }
}

@media screen and (max-width: 480px) {
    .lws-gallery-wrapper.grid,
    .lws-gallery-wrapper.masonry {
        --lws-columns: 1 !important;
    }
    .lws-gallery-wrapper.masonry .lws-gallery-item {
        width: calc(100% - 20px);
    }
}

/* Hover effect */
.lws-gallery-item a {
    display: block;
    overflow: hidden;
}

.lws-gallery-item img {
    transition: transform 0.3s ease;
}

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