/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #gallery-1446 {
        padding: var(--sectionPadding);
    }
    #gallery-1446 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
        position: relative;
    }
    #gallery-1446 .cs-content {
        text-align: left;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        gap: 1.5rem;
    }
    #gallery-1446 .cs-title {
        margin: 0;
    }
    #gallery-1446 .cs-gallery-wrapper {
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: clamp(1rem, 1.5vw, 1.25rem);
    }
    #gallery-1446 .cs-gallery {
        justify-items: center;
        display: grid;
        /* Change to 1 column for mobile */
        grid-template-columns: 1fr;
        /* 16px - 20px */
        gap: clamp(1rem, 1.5vw, 1.25rem);
        position: relative;
    }
    #gallery-1446 .cs-image {
        /* Set aspect ratio to 9:16 for mobile */
        aspect-ratio: 9 / 16;
        width: 100%;
        border-radius: 1rem;
        overflow: hidden;
        display: block;
        position: relative;
        object-fit: cover;
    }
    #gallery-1446 .cs-image img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    #gallery-1446 .loader-ellips {
        font-size: 20px; /* change size here */
        position: relative;
        width: 4em;
        height: 1em;
        margin: 10px auto;
    }

    #gallery-1446 .loader-ellips__dot {
        display: block;
        width: 1em;
        height: 1em;
        border-radius: 0.5em;
        background: #555; /* change color here */
        position: absolute;
        animation-duration: 0.5s;
        animation-timing-function: ease;
        animation-iteration-count: infinite;
    }

    #gallery-1446 .loader-ellips__dot:nth-child(1),
    #gallery-1446 .loader-ellips__dot:nth-child(2) {
        left: 0;
    }
    #gallery-1446 .loader-ellips__dot:nth-child(3) {
        left: 1.5em;
    }
    #gallery-1446 .loader-ellips__dot:nth-child(4) {
        left: 3em;
    }

    @keyframes reveal {
        from {
            transform: scale(0.001);
        }
        to {
            transform: scale(1);
        }
    }

    @keyframes slide {
        to {
            transform: translateX(1.5em);
        }
    }

    #gallery-1446 .loader-ellips__dot:nth-child(1) {
        animation-name: reveal;
    }

    #gallery-1446 .loader-ellips__dot:nth-child(2),
    #gallery-1446 .loader-ellips__dot:nth-child(3) {
        animation-name: slide;
    }

    #gallery-1446 .loader-ellips__dot:nth-child(4) {
        animation-name: reveal;
        animation-direction: reverse;
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #gallery-1446 .cs-gallery {
        /* Change to 2 columns for tablet and above */
        grid-template-columns: repeat(2, 1fr);
    }
    #gallery-1446 .cs-image {
        /* Set aspect ratio to 16:9 for tablet and above */
        aspect-ratio: 16 / 9;
    }
}