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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #gallery-48 {
        padding: var(--sectionPadding);
        position: relative;

        .cs-container {
            width: 100%;
            max-width: (1280/16rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: center;
            width: 100%;
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: center;
        }
    
        .cs-topper {
            font-size: var(--topperFontSize);
            line-height: 1.2em;
            text-transform: uppercase;
            text-align: inherit;
            letter-spacing: .1em;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: (4/16rem);
            display: block;
        }
    
        .cs-title {
            font-size: var(--headerFontSize);
            font-weight: 900;
            line-height: 1.2em;
            text-align: inherit;
            max-width: (700/16rem);
            margin: 0 0 (16/16rem) 0;
            color: var(--headerColor);
            position: relative;
        }

        .cs-title {
            /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
            margin: 0;
            max-width: 20ch;
        }

        .cs-image-group {
            /* used rem so it doesn't scale with the font size of on parent */
            font-size:~"min(1.1vw, 1em)";
            width: 100%;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            /* 8px - 20px */
            gap: clamp(.5rem, 2vw, 1.25rem);
        }

        .cs-row {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            /* 8px - 20px */
            gap: clamp(.5rem, 2vw, 1.25rem);
        }

        .cs-picture {
            width: 100%;
            position: relative;
            display: block;
            img {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                object-fit: cover;
            }
        }

        .cs-row-1 {
            .cs-picture-1 {
                height: 567/16em;
            }

            .cs-picture-2 {
                height: 629/16em;
            }

            .cs-picture-3 {
                height: 512/16em;
            }
        }

        .cs-row-2 {
            .cs-picture-1 {
                height: 492/16em;
            }

            .cs-picture-2 {
                height: 517/16em;
            }

            .cs-picture-3 {
                height: 629/16em;
            }
        }

        .cs-row-3 {
            .cs-picture-1 {
                height: 625/16em;
            }

            .cs-picture-2 {
                height: 452/16em;
            }

            .cs-picture-3 {
                height: 629/16em;
            }
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #gallery-48 {
            .cs-title {
                color: var(--bodyTextColorWhite);
            }
        }
    }
}
                                
/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #cta-51 {
        padding: var(--sectionPadding);
        position: relative;

        .cs-container {
            width: 100%;
            max-width: (1280/16rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: center;
            width: 100%;
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: center;
        }

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

        .cs-title, .cs-text {
            color: var(--bodyTextColorWhite);
        }

        .cs-text {
            /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
            margin-bottom: 16/16rem;
            opacity: .8;
            &:last-of-type {
                margin-bottom: 32/16rem;
            }
        }

        .cs-picture {
            height: 100%;
            width: 100%;
            display: block;
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            z-index: -1;

            &:before {
                /* black color overlay */
                content: '';
                position: absolute;
                display: block;
                height: 100%;
                width: 100%;
                background: #000;
                opacity: .8;
                top: 0;
                left: 0;
                z-index: 1;
            }

            img {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                object-fit: cover;
            }
        }
    }
}