Code of Stitch

Content Page

<!-- ============================================ -->
<!--                 Content Page                 -->
<!-- ============================================ -->

<!-- ============================================ 
    This Stitch is used for content heavy interior pages
    that have no design or layout.  Often times these are 
    content silos where you talk extensively about a topic
    to educate your visitors and rank on Google for the 
    content.  These are great for pages that have a TON
    of content.  Design isn't important here, it's all 
    about making the content accessible and easy to read.
================================================= -->

<section id="content-page-852">
    <div class="cs-container">
        <div class="cs-content">
            <h1 class="cs-title">h1 - A Personalized Approach To Your <span class="cs-color">Well-Being</span></h1>
            <h2>Heading 2</h2>
            <h3>Heading 3</h3>
            <h4>Heading 4-6</h4>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis laboriosam eum quae in temporibus cumque tempora expedita mollitia nostrum adipisci, ipsum commodi, cupiditate, sequi quos enim! Quaerat esse non sunt! Lorem ipsum dolor sit amet <a href="">link example</a>. Est, quis!
            </p>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis laboriosam eum quae in temporibus cumque tempora expedita mollitia nostrum <strong>adipisci, ipsum commodi</strong>, cupiditate, sequi quos enim! 
            </p>
            <h3>Heading 3</h3>
            <ol>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
            </ol>
            <h4>Heading 4-6</h4>
            <ul>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
            </ul>
        </div>
        <div class="cs-image-group">
            <picture class="cs-picture">
                <!--Mobile Image-->
                <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images%2FPeople%2Fcontent2.jpg">
                <!--Tablet and above Image-->
                <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images%2FPeople%2Fcontent2.jpg">
                <img decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images%2FPeople%2Fcontent2.jpg" alt="person" width="542" height="520" aria-hidden="true">
            </picture>
        </div>
    </div>
</section>

/*-- -------------------------- -->
<---        Content Page        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #content-page-852 {
        padding: var(--sectionPadding);
        background-color: #fff;
        /* clips the wave background from causing overflow issues when it goes off screen */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #content-page-852 .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;
    }
    #content-page-852 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 46.125rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }
    #content-page-852 .cs-title {
        font-size: var(--headerFontSize);
        font-weight: 900;
        line-height: 1.2em;
        text-align: inherit;
        width: 100%;
        max-width: 100%;
        margin: 0 0 1rem 0;
        color: var(--headerColor);
        position: relative;
    }
    #content-page-852 h2,
    #content-page-852 h3,
    #content-page-852 h4,
    #content-page-852 h5,
    #content-page-852 h6 {
        font-weight: 700;
        text-align: inherit;
        margin: 0 0 1rem 0;
        color: var(--headerColor);
    }
    #content-page-852 h2 {
        font-size: 2rem;
        margin-top: 2rem;
    }
    #content-page-852 h3 {
        font-size: 1.5rem;
        color: var(--primary);
    }
    #content-page-852 h4,
    #content-page-852 h5,
    #content-page-852 h6 {
        font-size: 1.25rem;
    }
    #content-page-852 .cs-button-solid {
        margin-bottom: 2rem;
    }
    #content-page-852 .cs-no-margin {
        margin: 0;
    }
    #content-page-852 .cs-color {
        color: var(--primary);
    }
    #content-page-852 p {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        margin: 0 0 1rem 0;
        color: var(--bodyTextColor);
    }
    #content-page-852 p:last-of-type {
        margin-bottom: 2rem;
    }
    #content-page-852 p a {
        font-size: inherit;
        line-height: inherit;
        text-decoration: underline;
        color: var(--primary);
    }
    #content-page-852 ol,
    #content-page-852 ul {
        padding-left: 1.5rem;
        margin: 0 0 2rem 0;
        color: var(--bodyTextColor);
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    #content-page-852 ul li {
        list-style: none;
        color: inherit;
        position: relative;
    }
    #content-page-852 ul li:before {
        /* custom list bullet */
        content: "";
        width: 3px;
        height: 3px;
        background: currentColor;
        opacity: 1;
        border-radius: 50%;
        position: absolute;
        display: block;
        top: 0.625rem;
        left: -0.75rem;
    }
    #content-page-852 img {
        width: 100%;
        height: auto;
        display: block;
    }
    #content-page-852 .cs-image-group {
        width: 50%;
        max-width: 27.0625rem;
        display: none;
        flex-direction: column;
        gap: 1.25rem;
        position: relative;
    }
    #content-page-852 .cs-image-group:after {
        /* colored box */
        content: "";
        width: 100%;
        /* 177px - 258px */
        height: clamp(11.0625rem, 19vw, 16.125rem);
        background: var(--primary);
        border-radius: 6.25rem 0 6.25rem;
        opacity: 0.15;
        display: block;
    }
    #content-page-852 .cs-picture {
        width: 100%;
        /* 300px - 520px */
        height: clamp(18.75rem, 40vw, 32.5rem);
        box-shadow: 0px 3.3478px 50.2169px rgba(0, 0, 0, 0.16);
        /* 125px - 200px */
        border-radius: 0 clamp(7.8125rem, 15vw, 12.5rem) 0
            clamp(7.8125rem, 15vw, 12.5rem);
        /* prevents border from affecting height and width */
        box-sizing: border-box;
        /* clips img tag corners */
        overflow: hidden;
        display: block;
        position: relative;
    }
    #content-page-852 .cs-picture img {
        width: 100%;
        height: 100%;
        /* makes it act like a background image */
        object-fit: cover;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #content-page-852 .cs-container {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
    #content-page-852 .cs-content {
        flex: none;
        width: 60%;
        /* sens it to the right in the 2nd position */
        order: 2;
    }
    #content-page-852 .cs-image-group {
        display: flex;
    }
}

/*-- -------------------------- -->
<---        Content Page        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #content-page-852 {
        padding: var(--sectionPadding);
        background-color: #fff;
        /* clips the wave background from causing overflow issues when it goes off screen */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #content-page-852 .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;
    }
    #content-page-852 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 46.125rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }
    #content-page-852 .cs-title {
        font-size: var(--headerFontSize);
        font-weight: 900;
        line-height: 1.2em;
        text-align: inherit;
        width: 100%;
        max-width: 100%;
        margin: 0 0 1rem 0;
        color: var(--headerColor);
        position: relative;
    }
    #content-page-852 h2,
    #content-page-852 h3,
    #content-page-852 h4,
    #content-page-852 h5,
    #content-page-852 h6 {
        font-weight: 700;
        text-align: inherit;
        margin: 0 0 1rem 0;
        color: var(--headerColor);
    }
    #content-page-852 h2 {
        font-size: 2rem;
        margin-top: 2rem;
    }
    #content-page-852 h3 {
        font-size: 1.5rem;
        color: var(--primary);
    }
    #content-page-852 h4,
    #content-page-852 h5,
    #content-page-852 h6 {
        font-size: 1.25rem;
    }
    #content-page-852 .cs-button-solid {
        margin-bottom: 2rem;
    }
    #content-page-852 .cs-no-margin {
        margin: 0;
    }
    #content-page-852 .cs-color {
        color: var(--primary);
    }
    #content-page-852 p {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        margin: 0 0 1rem 0;
        color: var(--bodyTextColor);
    }
    #content-page-852 p:last-of-type {
        margin-bottom: 2rem;
    }
    #content-page-852 p a {
        font-size: inherit;
        line-height: inherit;
        text-decoration: underline;
        color: var(--primary);
    }
    #content-page-852 ol,
    #content-page-852 ul {
        padding-left: 1.5rem;
        margin: 0 0 2rem 0;
        color: var(--bodyTextColor);
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    #content-page-852 ul li {
        list-style: none;
        color: inherit;
        position: relative;
    }
    #content-page-852 ul li:before {
        /* custom list bullet */
        content: "";
        width: 3px;
        height: 3px;
        background: currentColor;
        opacity: 1;
        border-radius: 50%;
        position: absolute;
        display: block;
        top: 0.625rem;
        left: -0.75rem;
    }
    #content-page-852 img {
        width: 100%;
        height: auto;
        display: block;
    }
    #content-page-852 .cs-image-group {
        width: 50%;
        max-width: 27.0625rem;
        display: none;
        flex-direction: column;
        gap: 1.25rem;
        position: relative;
    }
    #content-page-852 .cs-image-group:after {
        /* colored box */
        content: "";
        width: 100%;
        /* 177px - 258px */
        height: clamp(11.0625rem, 19vw, 16.125rem);
        background: var(--primary);
        border-radius: 6.25rem 0 6.25rem;
        opacity: 0.15;
        display: block;
    }
    #content-page-852 .cs-picture {
        width: 100%;
        /* 300px - 520px */
        height: clamp(18.75rem, 40vw, 32.5rem);
        box-shadow: 0px 3.3478px 50.2169px rgba(0, 0, 0, 0.16);
        /* 125px - 200px */
        border-radius: 0 clamp(7.8125rem, 15vw, 12.5rem) 0
            clamp(7.8125rem, 15vw, 12.5rem);
        /* prevents border from affecting height and width */
        box-sizing: border-box;
        /* clips img tag corners */
        overflow: hidden;
        display: block;
        position: relative;
    }
    #content-page-852 .cs-picture img {
        width: 100%;
        height: 100%;
        /* makes it act like a background image */
        object-fit: cover;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #content-page-852 .cs-container {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
    #content-page-852 .cs-content {
        flex: none;
        width: 60%;
        /* sens it to the right in the 2nd position */
        order: 2;
    }
    #content-page-852 .cs-image-group {
        display: flex;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #content-page-852 {
        background-color: var(--dark);
    }
    body.dark-mode #content-page-852 .cs-title,
    body.dark-mode #content-page-852 .cs-text,
    body.dark-mode #content-page-852 h2,
    body.dark-mode #content-page-852 h3,
    body.dark-mode #content-page-852 h4,
    body.dark-mode #content-page-852 h5,
    body.dark-mode #content-page-852 h6,
    body.dark-mode #content-page-852 li,
    body.dark-mode #content-page-852 p {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #content-page-852 .cs-color,
    body.dark-mode #content-page-852 a {
        color: var(--primaryLight);
    }
    body.dark-mode #content-page-852 p,
    body.dark-mode #content-page-852 li {
        color: #ebebeb;
    }
    body.dark-mode #content-page-852 .cs-picture {
        border-color: var(--dark);
        background-color: var(--dark);
    }
}

/*-- -------------------------- -->
<---        Content Page        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #content-page-852 {
        padding: var(--sectionPadding);
        background-color: #fff;
        /* clips the wave background from causing overflow issues when it goes off screen */
        overflow: hidden;
        position: relative;
        z-index: 1;

        .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);
            position: relative;
        }

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: left;
            width: 100%;
            max-width: (738/16rem);
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: flex-start;
        }
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-weight: 700;
            text-align: inherit;
            margin: 0 0 (16/16rem) 0;
            color: var(--headerColor);
        }

        h2 {
            font-size: (32/16rem);
            margin-top: (32/16rem);
        }

        h3 {
            font-size: (24/16rem);
            color: var(--primary);
        }

        h4,
        h5,
        h6 {
            font-size: (20/16rem);
        }

        .cs-button-solid {
            margin-bottom: (32/16rem);
        }

        .cs-no-margin {
            margin: 0;
        }

        .cs-color {
            color: var(--primary);
        }

        p {
            font-size: var(--bodyFontSize);
            line-height: 1.5em;
            text-align: inherit;
            width: 100%;
            margin: 0 0 (16/16rem) 0;
            color: var(--bodyTextColor);
            &:last-of-type {
                margin-bottom: (32/16rem);
            }

            a {
                font-size: inherit;
                line-height: inherit;
                text-decoration: underline;
                color: var(--primary);
            }
        }

        ol,
        ul {
            padding-left: (24/16rem);
            margin: 0 0 (32/16rem) 0;
            color: var(--bodyTextColor);
            display: flex;
            flex-direction: column;
            gap: (16/16rem);
        }

        ul {
            li {
                list-style: none;
                color: inherit;
                position: relative;

                &:before {
                    /* custom list bullet */
                    content: "";
                    width: 3px;
                    height: 3px;
                    background: currentColor;
                    opacity: 1;
                    border-radius: 50%;
                    position: absolute;
                    display: block;
                    top: (10/16rem);
                    left: (-12/16rem);
                }
            }
        }

        img {
            width: 100%;
            height: auto;
            display: block;
        }

        .cs-image-group {
            width: 50%;
            max-width: (433/16rem);
            display: none;
            flex-direction: column;
            gap: (20/16rem);
            position: relative;

            &:after {
                /* colored box */
                content: "";
                width: 100%;
                /* 177px - 258px */
                height: clamp(11.0625rem, 19vw, 16.125rem);
                background: var(--primary);
                border-radius: (100/16rem) 0 (100/16rem);
                opacity: 0.15;
                display: block;
            }
        }

        .cs-picture {
            width: 100%;
            /* 300px - 520px */
            height: clamp(18.75rem, 40vw, 32.5rem);
            box-shadow: 0px 3.3478px 50.2169px rgba(0, 0, 0, 0.16);
            /* 125px - 200px */
            border-radius: 0 clamp(7.8125rem, 15vw, 12.5rem) 0
                clamp(7.8125rem, 15vw, 12.5rem);
            /* prevents border from affecting height and width */
            box-sizing: border-box;
            /* clips img tag corners */
            overflow: hidden;
            display: block;
            position: relative;

            img {
                width: 100%;
                height: 100%;
                /* makes it act like a background image */
                object-fit: cover;
            }
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #content-page-852 {
        .cs-container {
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
        }

        .cs-content {
            flex: none;
            width: 60%;
            /* sens it to the right in the 2nd position */
            order: 2;
        }

        .cs-image-group {
            display: flex;
        }
    }
}

/*-- -------------------------- -->
<---        Content Page        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #content-page-852 {
        padding: var(--sectionPadding);
        background-color: #fff;
        /* clips the wave background from causing overflow issues when it goes off screen */
        overflow: hidden;
        position: relative;
        z-index: 1;

        .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);
            position: relative;
        }

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: left;
            width: 100%;
            max-width: (738/16rem);
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: flex-start;
        }
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-weight: 700;
            text-align: inherit;
            margin: 0 0 (16/16rem) 0;
            color: var(--headerColor);
        }

        h2 {
            font-size: (32/16rem);
            margin-top: (32/16rem);
        }

        h3 {
            font-size: (24/16rem);
            color: var(--primary);
        }

        h4,
        h5,
        h6 {
            font-size: (20/16rem);
        }

        .cs-button-solid {
            margin-bottom: (32/16rem);
        }

        .cs-no-margin {
            margin: 0;
        }

        .cs-color {
            color: var(--primary);
        }

        p {
            font-size: var(--bodyFontSize);
            line-height: 1.5em;
            text-align: inherit;
            width: 100%;
            margin: 0 0 (16/16rem) 0;
            color: var(--bodyTextColor);
            &:last-of-type {
                margin-bottom: (32/16rem);
            }

            a {
                font-size: inherit;
                line-height: inherit;
                text-decoration: underline;
                color: var(--primary);
            }
        }

        ol,
        ul {
            padding-left: (24/16rem);
            margin: 0 0 (32/16rem) 0;
            color: var(--bodyTextColor);
            display: flex;
            flex-direction: column;
            gap: (16/16rem);
        }

        ul {
            li {
                list-style: none;
                color: inherit;
                position: relative;

                &:before {
                    /* custom list bullet */
                    content: "";
                    width: 3px;
                    height: 3px;
                    background: currentColor;
                    opacity: 1;
                    border-radius: 50%;
                    position: absolute;
                    display: block;
                    top: (10/16rem);
                    left: (-12/16rem);
                }
            }
        }

        img {
            width: 100%;
            height: auto;
            display: block;
        }

        .cs-image-group {
            width: 50%;
            max-width: (433/16rem);
            display: none;
            flex-direction: column;
            gap: (20/16rem);
            position: relative;

            &:after {
                /* colored box */
                content: "";
                width: 100%;
                /* 177px - 258px */
                height: clamp(11.0625rem, 19vw, 16.125rem);
                background: var(--primary);
                border-radius: (100/16rem) 0 (100/16rem);
                opacity: 0.15;
                display: block;
            }
        }

        .cs-picture {
            width: 100%;
            /* 300px - 520px */
            height: clamp(18.75rem, 40vw, 32.5rem);
            box-shadow: 0px 3.3478px 50.2169px rgba(0, 0, 0, 0.16);
            /* 125px - 200px */
            border-radius: 0 clamp(7.8125rem, 15vw, 12.5rem) 0
                clamp(7.8125rem, 15vw, 12.5rem);
            /* prevents border from affecting height and width */
            box-sizing: border-box;
            /* clips img tag corners */
            overflow: hidden;
            display: block;
            position: relative;

            img {
                width: 100%;
                height: 100%;
                /* makes it act like a background image */
                object-fit: cover;
            }
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #content-page-852 {
        .cs-container {
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
        }

        .cs-content {
            flex: none;
            width: 60%;
            /* sens it to the right in the 2nd position */
            order: 2;
        }

        .cs-image-group {
            display: flex;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #content-page-852 {
            background-color: var(--dark);

            .cs-title,
            .cs-text,
            h2,
            h3,
            h4,
            h5,
            h6,
            li,
            p {
                color: var(--bodyTextColorWhite);
            }
            .cs-color,
            a {
                color: var(--primaryLight);
            }

            p,
            li {
                color: #ebebeb;
            }

            .cs-picture {
                border-color: var(--dark);
                background-color: var(--dark);
            }
        }
    }
}

/*-- -------------------------- -->
<---        Content Page        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #content-page-852 {
        padding: var(--sectionPadding);
        background-color: #fff;
        /* clips the wave background from causing overflow issues when it goes off screen */
        overflow: hidden;
        position: relative;
        z-index: 1;

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

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: left;
            width: 100%;
            max-width: calc(738 / 16 * 1rem);
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: flex-start;
        }
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-weight: 700;
            text-align: inherit;
            margin: 0 0 calc(16 / 16 * 1rem) 0;
            color: var(--headerColor);
        }

        h2 {
            font-size: calc(32 / 16 * 1rem);
            margin-top: calc(32 / 16 * 1rem);
        }

        h3 {
            font-size: calc(24 / 16 * 1rem);
            color: var(--primary);
        }

        h4,
        h5,
        h6 {
            font-size: calc(20 / 16 * 1rem);
        }

        .cs-button-solid {
            margin-bottom: calc(32 / 16 * 1rem);
        }

        .cs-no-margin {
            margin: 0;
        }

        .cs-color {
            color: var(--primary);
        }

        p {
            font-size: var(--bodyFontSize);
            line-height: 1.5em;
            text-align: inherit;
            width: 100%;
            margin: 0 0 calc(16 / 16 * 1rem) 0;
            color: var(--bodyTextColor);
            &:last-of-type {
                margin-bottom: calc(32 / 16 * 1rem);
            }

            a {
                font-size: inherit;
                line-height: inherit;
                text-decoration: underline;
                color: var(--primary);
            }
        }

        ol,
        ul {
            padding-left: calc(24 / 16 * 1rem);
            margin: 0 0 calc(32 / 16 * 1rem) 0;
            color: var(--bodyTextColor);
            display: flex;
            flex-direction: column;
            gap: calc(16 / 16 * 1rem);
        }

        ul {
            li {
                list-style: none;
                color: inherit;
                position: relative;

                &:before {
                    /* custom list bullet */
                    content: "";
                    width: 3px;
                    height: 3px;
                    background: currentColor;
                    opacity: 1;
                    border-radius: 50%;
                    position: absolute;
                    display: block;
                    top: calc(10 / 16 * 1rem);
                    left: calc(-12 / 16 * 1rem);
                }
            }
        }

        img {
            width: 100%;
            height: auto;
            display: block;
        }

        .cs-image-group {
            width: 50%;
            max-width: calc(433 / 16 * 1rem);
            display: none;
            flex-direction: column;
            gap: calc(20 / 16 * 1rem);
            position: relative;

            &:after {
                /* colored box */
                content: "";
                width: 100%;
                /* 177px - 258px */
                height: clamp(11.0625rem, 19vw, 16.125rem);
                background: var(--primary);
                border-radius: calc(100 / 16 * 1rem) 0 calc(100 / 16 * 1rem);
                opacity: 0.15;
                display: block;
            }
        }

        .cs-picture {
            width: 100%;
            /* 300px - 520px */
            height: clamp(18.75rem, 40vw, 32.5rem);
            box-shadow: 0px 3.3478px 50.2169px rgba(0, 0, 0, 0.16);
            /* 125px - 200px */
            border-radius: 0 clamp(7.8125rem, 15vw, 12.5rem) 0
                clamp(7.8125rem, 15vw, 12.5rem);
            /* prevents border from affecting height and width */
            box-sizing: border-box;
            /* clips img tag corners */
            overflow: hidden;
            display: block;
            position: relative;

            img {
                width: 100%;
                height: 100%;
                /* makes it act like a background image */
                object-fit: cover;
            }
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #content-page-852 {
        .cs-container {
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
        }

        .cs-content {
            flex: none;
            width: 60%;
            /* sens it to the right in the 2nd position */
            order: 2;
        }

        .cs-image-group {
            display: flex;
        }
    }
}

/*-- -------------------------- -->
<---        Content Page        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #content-page-852 {
        padding: var(--sectionPadding);
        background-color: #fff;
        /* clips the wave background from causing overflow issues when it goes off screen */
        overflow: hidden;
        position: relative;
        z-index: 1;

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

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: left;
            width: 100%;
            max-width: calc(738 / 16 * 1rem);
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: flex-start;
        }
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-weight: 700;
            text-align: inherit;
            margin: 0 0 calc(16 / 16 * 1rem) 0;
            color: var(--headerColor);
        }

        h2 {
            font-size: calc(32 / 16 * 1rem);
            margin-top: calc(32 / 16 * 1rem);
        }

        h3 {
            font-size: calc(24 / 16 * 1rem);
            color: var(--primary);
        }

        h4,
        h5,
        h6 {
            font-size: calc(20 / 16 * 1rem);
        }

        .cs-button-solid {
            margin-bottom: calc(32 / 16 * 1rem);
        }

        .cs-no-margin {
            margin: 0;
        }

        .cs-color {
            color: var(--primary);
        }

        p {
            font-size: var(--bodyFontSize);
            line-height: 1.5em;
            text-align: inherit;
            width: 100%;
            margin: 0 0 calc(16 / 16 * 1rem) 0;
            color: var(--bodyTextColor);
            &:last-of-type {
                margin-bottom: calc(32 / 16 * 1rem);
            }

            a {
                font-size: inherit;
                line-height: inherit;
                text-decoration: underline;
                color: var(--primary);
            }
        }

        ol,
        ul {
            padding-left: calc(24 / 16 * 1rem);
            margin: 0 0 calc(32 / 16 * 1rem) 0;
            color: var(--bodyTextColor);
            display: flex;
            flex-direction: column;
            gap: calc(16 / 16 * 1rem);
        }

        ul {
            li {
                list-style: none;
                color: inherit;
                position: relative;

                &:before {
                    /* custom list bullet */
                    content: "";
                    width: 3px;
                    height: 3px;
                    background: currentColor;
                    opacity: 1;
                    border-radius: 50%;
                    position: absolute;
                    display: block;
                    top: calc(10 / 16 * 1rem);
                    left: calc(-12 / 16 * 1rem);
                }
            }
        }

        img {
            width: 100%;
            height: auto;
            display: block;
        }

        .cs-image-group {
            width: 50%;
            max-width: calc(433 / 16 * 1rem);
            display: none;
            flex-direction: column;
            gap: calc(20 / 16 * 1rem);
            position: relative;

            &:after {
                /* colored box */
                content: "";
                width: 100%;
                /* 177px - 258px */
                height: clamp(11.0625rem, 19vw, 16.125rem);
                background: var(--primary);
                border-radius: calc(100 / 16 * 1rem) 0 calc(100 / 16 * 1rem);
                opacity: 0.15;
                display: block;
            }
        }

        .cs-picture {
            width: 100%;
            /* 300px - 520px */
            height: clamp(18.75rem, 40vw, 32.5rem);
            box-shadow: 0px 3.3478px 50.2169px rgba(0, 0, 0, 0.16);
            /* 125px - 200px */
            border-radius: 0 clamp(7.8125rem, 15vw, 12.5rem) 0
                clamp(7.8125rem, 15vw, 12.5rem);
            /* prevents border from affecting height and width */
            box-sizing: border-box;
            /* clips img tag corners */
            overflow: hidden;
            display: block;
            position: relative;

            img {
                width: 100%;
                height: 100%;
                /* makes it act like a background image */
                object-fit: cover;
            }
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #content-page-852 {
        .cs-container {
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
        }

        .cs-content {
            flex: none;
            width: 60%;
            /* sens it to the right in the 2nd position */
            order: 2;
        }

        .cs-image-group {
            display: flex;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #content-page-852 {
            background-color: var(--dark);

            .cs-title,
            .cs-text,
            h2,
            h3,
            h4,
            h5,
            h6,
            li,
            p {
                color: var(--bodyTextColorWhite);
            }
            .cs-color,
            a {
                color: var(--primaryLight);
            }

            p,
            li {
                color: #ebebeb;
            }

            .cs-picture {
                border-color: var(--dark);
                background-color: var(--dark);
            }
        }
    }
}

:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #ff6a3e;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.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: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}

:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #ff6a3e;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.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-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: (650/16rem);
    margin: 0;
    color: var(--bodyTextColor);
}

:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #ff6a3e;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.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: calc(4 / 16 * 1rem);
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: calc(700 / 16 * 1rem);
    margin: 0 0 calc(16 / 16 * 1rem) 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: calc(650 / 16 * 1rem);
    margin: 0;
    color: var(--bodyTextColor);
}