/* ==========================================================================
   Gallery
   ========================================================================== */

html, body{
    background-color: #fff;
    color: #cccccc;
}

/* Gallery Styles */
.al-gallery-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0px;
    box-sizing: border-box;
    justify-content: center;
}


.al-gallery-item {
    flex-grow: 0;
    flex-shrink: 0;
    margin: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.al-gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.al-gallery-item img,
.al-gallery-item picture {
    width: 100%;
    height: 100%;
    display: block;
    flex-grow: 1;
}

.al-gallery-item img {
    object-fit: var(--object-fit, cover);
    object-position: center;
}

/* Object-fit modes */
.al-gallery-container[data-object-fit="contain"] .al-gallery-item:not([data-object-fit]) img {
    object-fit: contain;
}

.al-gallery-container[data-object-fit="cover"] .al-gallery-item:not([data-object-fit]) img {
    object-fit: cover;
}

.al-gallery-item[data-object-fit="contain"] img {
    object-fit: contain;
}

.al-gallery-item[data-object-fit="cover"] img {
    object-fit: cover;
}

.al-gallery-item picture img {
    width: 100%;
    height: 100%;
    object-fit: var(--object-fit, cover);
    object-position: center;
}

/* Uniform height mode for images with different aspect ratios */
.al-gallery-container[data-uniform-height="true"] .al-gallery-item {
    height: var(--uniform-item-height, 200px);
}

.al-gallery-container[data-uniform-height="true"] .al-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.al-gallery-caption {
    padding: 10px;
    text-align: center;
    background-color: #f8f8f8;
}

/* Caption display modes */
/* Hide captions */
.al-gallery-container[data-caption-display="hide"] .al-gallery-caption {
    display: none;
}

/* Overlay captions on images */
.al-gallery-container[data-caption-display="overlay"] .al-gallery-item {
    position: relative;
}

.al-gallery-container[data-caption-display="overlay"] .al-gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
}

/* Responsive layout based on data attributes */
/* Fixed columns layout (overrides responsive layout) */
.al-gallery-container[style*="--columns"] .al-gallery-item {
    flex-basis: calc(100% / var(--columns) - 20px);
}



/* Responsive layout (used when --columns is not set) */
/* Extra small devices (phones) */
@media (max-width: 575.98px) {
    .al-gallery-container:not([style*="--columns"]) .al-gallery-item {
        flex-basis: calc(100% / var(--items-xs, 1) - 20px);
    }
}

/* Small devices (tablets) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .al-gallery-container:not([style*="--columns"]) .al-gallery-item {
        flex-basis: calc(100% / var(--items-sm, 2) - 20px);
    }
}

/* Medium devices (small laptops) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .al-gallery-container:not([style*="--columns"]) .al-gallery-item {
        flex-basis: calc(100% / var(--items-md, 3) - 20px);
    }
}

/* Large devices (laptops/desktops) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .al-gallery-container:not([style*="--columns"]) .al-gallery-item {
        flex-basis: calc(100% / var(--items-lg, 4) - 20px);
    }
}

/* Extra large devices (large desktops) */
@media (min-width: 1200px) {
    .al-gallery-container:not([style*="--columns"]) .al-gallery-item {
        flex-basis: calc(100% / var(--items-xl, 5) - 20px);
    }
}