@media only screen and (min-width: 0rem) {

    #gallery {
        padding: var(--sectionPadding);
        overflow: hidden;
        position: relative;
        background-color: var(--tertiary);
    }

    #gallery .cs-container {
        width: 100%;
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(3rem, 6vw, 4rem);
        position: relative;
    }

    #gallery .cs-content {
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #gallery .cs-topper {
        color: var(--secondary);
    }

    #gallery .cs-title {
        max-width: 20ch;
    }

    #gallery .cs-button-group {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        row-gap: 0.5rem;
        column-gap: 2rem;
    }

    #gallery .cs-button {
        font-size: 1rem;
        line-height: 1.5em;
        color: var(--primary);
        background-color: transparent;
        border: none;
        transition: color 0.3s;
    }

    #gallery .cs-button:hover {
        color: var(--secondary);
        cursor: pointer;
    }

    #gallery .cs-button.cs-active {
        color: var(--secondary);
    }

    #gallery .cs-gallery-wrapper {
        width: 100%;
        position: relative;
        z-index: 1;
    }

    #gallery .cs-gallery {
        width: 100%;
        padding: 0;
        margin: 0;
        opacity: 1;
        visibility: visible;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: clamp(1rem, 1.5vw, 1.25rem);
        transition: transform 0.7s, opacity 0.3s, visibility 0.5s, top 0.3s, left 0.3s;
        transform-origin: left top;
    }

    #gallery .cs-gallery.cs-hidden {
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
        top: 0;
        left: 0;
        position: absolute;
        transform: scaleY(0) scaleX(0);
    }

    #gallery .cs-gallery.cs-hidden .cs-image {
        transform: translateY(2.1875rem);
        opacity: 0;
    }

    #gallery .cs-image {
        width: 47%;
        aspect-ratio: 1;
        overflow: hidden;
        display: block;
        position: relative;
        transform: translateY(0rem);
        opacity: 1;
        transition: opacity 0.6s, transform 0.6s;
    }

    #gallery .cs-image:nth-of-type(1) {
        transition-delay: 0.15s;
    }

    #gallery .cs-image:nth-of-type(2) {
        transition-delay: 0.3s;
    }

    #gallery .cs-image:nth-of-type(3) {
        transition-delay: 0.45s;
    }

    #gallery .cs-image:nth-of-type(4) {
        transition-delay: 0.6s;
    }

    #gallery .cs-image:nth-of-type(5) {
        transition-delay: 0.75s;
    }

    #gallery .cs-image:nth-of-type(6) {
        transition-delay: 0.9s;
    }

    #gallery .cs-image img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

}

@media only screen and (min-width: 48rem) {

    #gallery .cs-container {
        max-width: 80rem;
    }

    #gallery .cs-content {
        text-align: left;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    #gallery .cs-title {
        margin: 0;
    }

    #gallery .cs-image {
        width: 31.8%;
        aspect-ratio: 1;
    }

}

@media only screen and (min-width: 81.25rem) {

    #gallery .cs-flex {
        max-width: 34.375rem;
    }

    #gallery .cs-gallery {
        align-items: stretch;
        justify-content: center;
    }

    #gallery .cs-image {
        width: 39.375rem;
        max-width: 100%;
        height: 25rem;
    }

    #gallery .cs-image:nth-of-type(2), #gallery .cs-image:nth-of-type(3), #gallery .cs-image:nth-of-type(4), #gallery .cs-image:nth-of-type(5) {
        width: 19.0625rem;
    }

    #gallery .cs-image:nth-of-type(1) {
        transition-delay: 0.15s;
    }

    #gallery .cs-image:nth-of-type(2) {
        transition-delay: 0.3s;
    }

    #gallery .cs-image:nth-of-type(3) {
        transition-delay: 0.45s;
    }

    #gallery .cs-image:nth-of-type(4) {
        transition-delay: 0.15s;
    }

    #gallery .cs-image:nth-of-type(5) {
        transition-delay: 0.3s;
    }

    #gallery .cs-image:nth-of-type(6) {
        transition-delay: 0.45s;
    }

}