/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #reviews-607 {
        padding: var(--sectionPadding);
        
        .cs-container {
            width: 100%;
            /* changes to 1280px at tablet */
            max-width: (550/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-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: (20/16rem);
        }

        .cs-item {
            list-style: none;
            width: 100%;
            margin: 0;
            /* 32px - 48px top & bottom */
            /* 16px - 32px left & right */
            padding: clamp(2rem, 7vw, 3rem) clamp(1rem, 4vw, 2rem);
            /* makes padding not affect height and width */
            box-sizing: border-box;
            background-color: #F0F0F0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .cs-icon {
            /* 30px - 40px */
            width: clamp(1.875rem, 4vw, 2.5rem);
            height: auto;
            margin: 0 0 (32/16rem) 0;
            display: block;
        }

        .cs-h3 {
            /* 20px - 25px */
            font-size: clamp(1.25rem, 4vw, 1.5625rem);
            line-height: 1.2em;
            font-weight: 700;
            margin: 0 0 (24/16rem) 0;
            color: var(--headerColor);
        }

        .cs-item-text {
            /* 14px - 16px */
            font-size: clamp(.875rem, 4vw, 1rem);
            line-height: 1.5em;
            max-width: 388/16rem;
            margin: 0 0 (48/16rem) 0;
            color: var(--bodyTextColor);
        }

        .cs-name {
            font-size: (20/16rem);
            line-height: 1.2em;
            font-weight: 500;
            margin: auto 0 0 0;
            color: var(--headerColor);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: (8/16rem);
            position: relative;
            &:before {
                content: '';
                width: (8/16rem);
                height: 1px;
                background: currentColor;
                display: block;
                position: relative;
            }
        }
    }

}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #reviews-607 {
        .cs-container {
            max-width: (1280/16rem);
        }

        .cs-card-group {
            /* we went grid on tablet so that we can have an even spaced section with this design. Flexbox has a hard time making this type of design work with even gaps. */
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }

        .cs-item {
            grid-column: span 1;
            grid-row: span 1;
        }
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #reviews-607 {
        .cs-card-group {
            /* went back to flexbox for an easier transition to this horizontal layout. We don't have to re-target each cs-item to reset its grid positioning, we can just revert to flexbox and make the layout in less code and hassle */
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: stretch;
            justify-content: center;
        }

        .cs-item {
            width: clamp(31.5%, 30.93vw, 32.29%);
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #reviews-607 {

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

            .cs-text, .cs-item-text {
                opacity: .8;
            }

            .cs-item {
                background-color: rgba(0, 0, 0, .2);
            }
        }
    }
}
                                
/*-- -------------------------- -->
<---            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;
            }
        }
    }
}