Code of Stitch

Standard

<!-- ============================================ -->
<!--             Side By Side Reverse             -->
<!-- ============================================ -->

<section id="sbs-371">
    <div class="cs-container">
        <div class="cs-content">
            <span class="cs-topper">Why Choose Us</span>
            <h2 class="cs-title">Expert House Cleaning Service Can Trust</h2>
            <p class="cs-text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam faucibus purus in. Diam ut venenatis tellus in metus vulputate eu. Massa vitae tortor condimentum lacinia quis vel eros donec ac.
            </p>
            <p class="cs-text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam faucibus purus in. Diam ut venenatis tellus in metus vulputate eu. Massa vitae tortor condimentum lacinia quis vel eros donec ac.
            </p>
            <a href="" class="cs-button-solid">Contact Us</a>
        </div>
        <!--Left Image Group-->
        <div class="cs-image-group">
            <!--Faded Paint Splash-->
            <img class="cs-splash" src="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/blue-splash.svg" aria-hidden="true" loading="lazy" decoding="async" alt="splash icon" width="570" height="586">

            <!--Blue Blob-->
            <img class="cs-blob" src="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/blob.svg" aria-hidden="true" loading="lazy" decoding="async" alt="blob icon" width="392" height="497">

            <!--Lightning Bolt-->
            <img class="cs-lightning" src="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/lightning.svg" aria-hidden="true" loading="lazy" decoding="async" alt="lightning icon" width="392" height="497">
            
            <!--Left Circle Image-->
            <picture class="cs-left-image">
                <source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/cleaning2-m.jpg">
                <source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/cleaning2.jpg">
                <img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/cleaning2.jpg" alt="cleaning" width="211" height="211" aria-hidden="true">
            </picture>
            <!--Bottom Circle Image-->
            <picture class="cs-bottom-image">
                <source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/cleaning4.jpg">
                <source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/cleaning4.jpg">
                <img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/cleaning4.jpg" alt="cleaning" width="180" height="180" aria-hidden="true">
            </picture>
            <!--Main Person Image-->
            <!--To make your own crops of people, use https://www.remove.bg/ to remove the background of any image-->
            <picture class="cs-person">
                <source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/cleaner3.png">
                <source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/cleaner3.png">
                <img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/cleaner3.png" alt="cleaning" width="386" height="521" aria-hidden="true">
            </picture>
            <!--Masking SVG to cover the bottom of the person image-->
            <svg class="cs-mask" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 383 173"><path d="M0 131.021c0-29.542.317-41.863 1.067-41.4.587.363.983.052.881-.69-.502-3.66.132-4.85 2.583-4.85 2.264 0 2.507.363 2.3 3.447-.183 2.714.343 3.902 2.474 5.577 1.488 1.17 3.346 2.77 4.129 3.552.783.783 1.85 1.423 2.372 1.423.522 0 1.51.675 2.194 1.5.685.825 2.262 1.5 3.506 1.5 1.447 0 2.456.747 2.803 2.074.298 1.141 1.476 2.319 2.617 2.617 1.14.298 2.074.868 2.074 1.265 0 1.176 4.868 3.044 7.93 3.044 2.055 0 3.042.62 3.58 2.25l.744 2.25.442-2.25c.314-1.595 1.15-2.25 2.874-2.25 2.095 0 2.43.467 2.43 3.384 0 3.984 1.935 4.861 8.687 3.936 3.861-.53 4.313-.38 4.313 1.437 0 2.581 2.158 3.402 6.935 2.638 3.15-.504 3.859-.292 4.269 1.277.405 1.55 2.677 2.273 12.894 4.103 18.887 3.384 38.907 4.572 54.402 3.23 7.15-.62 15.475-1.296 18.5-1.503 13.731-.938 35.155-5.125 36.708-7.175.867-1.145 2.091-1.417 4.343-.967 2.97.594 20.732-3.208 24.769-5.301.924-.48 3.572-1.376 5.885-1.992 2.313-.616 4.869-1.783 5.679-2.594.81-.81 3.08-1.473 5.045-1.473 2.36 0 3.571-.465 3.571-1.372 0-.828 1.587-1.626 4-2.012 2.588-.414 4-1.165 4-2.128 0-1.034 1.068-1.488 3.5-1.488 1.925 0 3.5-.45 3.5-1s.879-1 1.953-1c2.39 0 7.047-2.038 7.047-3.083 0-.419 1.688-1.27 3.75-1.89 7.21-2.17 13.218-5.473 13.234-7.277.012-1.33.855-1.75 3.516-1.75 1.925 0 3.5-.45 3.5-1s.469-1 1.042-1c.573 0 1.586-.454 2.25-1.01.664-.555 4.583-3.598 8.708-6.76 10.945-8.394 18.178-16.216 25.328-27.393 3.004-4.696 3.488-6.198 2.988-9.277-.506-3.116-.29-3.754 1.422-4.202 2.287-.598 4.262-4.26 4.262-7.905 0-1.349.4-2.453.888-2.453.999 0 5.23-20.999 4.478-22.217-.266-.43.244-.783 1.134-.783.89 0 1.34-.45 1-1-.404-.653 6.156-1 18.941-1H383v173H0Zm18-35.44c0-2 .5-2.5 2.5-2.5s2.5.5 2.5 2.5-.5 2.5-2.5 2.5-2.5-.5-2.5-2.5z" fill="#fff"/></svg>
        </div>
    </div>
</section>

/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-371 {
        padding: var(--sectionPadding);
        overflow: hidden;
    }
    @keyframes floatAnimation {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-2em);
        }
        100% {
            transform: translateY(0);
        }
    }
    @keyframes floatAnimation2 {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-1em);
        }
        100% {
            transform: translateY(0);
        }
    }
    #sbs-371 .cs-container {
        width: 100%;
        /* changes to 1280px at desktop */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* 48px - 56px */
        gap: clamp(3rem, 3vw, 3.5rem);
    }
    #sbs-371 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 33.875rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #sbs-371 .cs-text {
        margin-bottom: 1rem;
    }
    #sbs-371 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbs-371 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #sbs-371 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #sbs-371 .cs-button-solid:hover:before {
        width: 100%;
    }
    #sbs-371 .cs-image-group {
        /* everything in the group is in ems so we can scale them down with this min/max font size tied to the view width */
        font-size: min(2.3vw, 1em);
        width: 36.1875em;
        height: 36.75em;
        position: relative;
        /* sends it to the top above the content */
        order: -1;
    }
    #sbs-371 .cs-splash {
        width: 35.625em;
        height: 36.625em;
        opacity: 0.1;
        position: absolute;
        left: 0.3125em;
        top: 0;
    }
    #sbs-371 .cs-blob {
        width: 24.5em;
        height: 31.0625em;
        position: absolute;
        right: 0em;
        top: 0.625em;
    }
    #sbs-371 .cs-lightning {
        width: 4em;
        height: 6.4375em;
        position: absolute;
        right: 2.5em;
        top: 0.5em;
        transform: rotate(23deg);
    }
    #sbs-371 .cs-left-image {
        width: 13.1875em;
        height: 13.1875em;
        border-radius: 50%;
        /* cover the 1px gap between border and image */
        background-color: #f7f7f7;
        border: 12px solid #f7f7f7;
        /* clips image to the circle */
        overflow: hidden;
        position: absolute;
        left: -0.75em;
        top: 8.1875em;
        z-index: 10;
        animation-name: floatAnimation2;
        animation-duration: 6s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
    #sbs-371 .cs-left-image img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes it act like a background image */
        object-fit: cover;
    }
    #sbs-371 .cs-bottom-image {
        width: 11.25em;
        height: 11.25em;
        border-radius: 50%;
        /* cover the 1px gap between border and image */
        background-color: #f7f7f7;
        border: 12px solid #f7f7f7;
        /* clips image to the circle */
        overflow: hidden;
        position: absolute;
        right: 11.25em;
        bottom: -0.75em;
        z-index: 10;
        animation-name: floatAnimation;
        animation-duration: 10s;
        animation-delay: 1s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
    #sbs-371 .cs-bottom-image img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes it act like a background image */
        object-fit: cover;
    }
    #sbs-371 .cs-person {
        width: 24.125em;
        height: auto;
        position: absolute;
        right: 2.875em;
        bottom: 4.0625em;
    }
    #sbs-371 .cs-person img {
        width: 100%;
        height: auto;
    }
    #sbs-371 .cs-mask {
        width: 23.9375em;
        height: 10.8125em;
        position: absolute;
        right: -2.0625em;
        bottom: 2.6875em;
        z-index: 2;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbs-371 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
    #sbs-371 .cs-ul {
        margin-top: 1rem;
    }
    #sbs-371 .cs-image-group {
        font-size: min(1.1vw, 1em);
        /* prevents flexbox from squishing it */
        flex: none;
    }
}

/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-371 {
        padding: var(--sectionPadding);
        overflow: hidden;
    }
    @keyframes floatAnimation {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-2em);
        }
        100% {
            transform: translateY(0);
        }
    }
    @keyframes floatAnimation2 {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-1em);
        }
        100% {
            transform: translateY(0);
        }
    }
    #sbs-371 .cs-container {
        width: 100%;
        /* changes to 1280px at desktop */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* 48px - 56px */
        gap: clamp(3rem, 3vw, 3.5rem);
    }
    #sbs-371 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 33.875rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #sbs-371 .cs-text {
        margin-bottom: 1rem;
    }
    #sbs-371 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbs-371 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #sbs-371 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #sbs-371 .cs-button-solid:hover:before {
        width: 100%;
    }
    #sbs-371 .cs-image-group {
        /* everything in the group is in ems so we can scale them down with this min/max font size tied to the view width */
        font-size: min(2.3vw, 1em);
        width: 36.1875em;
        height: 36.75em;
        position: relative;
        /* sends it to the top above the content */
        order: -1;
    }
    #sbs-371 .cs-splash {
        width: 35.625em;
        height: 36.625em;
        opacity: 0.1;
        position: absolute;
        left: 0.3125em;
        top: 0;
    }
    #sbs-371 .cs-blob {
        width: 24.5em;
        height: 31.0625em;
        position: absolute;
        right: 0em;
        top: 0.625em;
    }
    #sbs-371 .cs-lightning {
        width: 4em;
        height: 6.4375em;
        position: absolute;
        right: 2.5em;
        top: 0.5em;
        transform: rotate(23deg);
    }
    #sbs-371 .cs-left-image {
        width: 13.1875em;
        height: 13.1875em;
        border-radius: 50%;
        /* cover the 1px gap between border and image */
        background-color: #f7f7f7;
        border: 12px solid #f7f7f7;
        /* clips image to the circle */
        overflow: hidden;
        position: absolute;
        left: -0.75em;
        top: 8.1875em;
        z-index: 10;
        animation-name: floatAnimation2;
        animation-duration: 6s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
    #sbs-371 .cs-left-image img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes it act like a background image */
        object-fit: cover;
    }
    #sbs-371 .cs-bottom-image {
        width: 11.25em;
        height: 11.25em;
        border-radius: 50%;
        /* cover the 1px gap between border and image */
        background-color: #f7f7f7;
        border: 12px solid #f7f7f7;
        /* clips image to the circle */
        overflow: hidden;
        position: absolute;
        right: 11.25em;
        bottom: -0.75em;
        z-index: 10;
        animation-name: floatAnimation;
        animation-duration: 10s;
        animation-delay: 1s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
    #sbs-371 .cs-bottom-image img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes it act like a background image */
        object-fit: cover;
    }
    #sbs-371 .cs-person {
        width: 24.125em;
        height: auto;
        position: absolute;
        right: 2.875em;
        bottom: 4.0625em;
    }
    #sbs-371 .cs-person img {
        width: 100%;
        height: auto;
    }
    #sbs-371 .cs-mask {
        width: 23.9375em;
        height: 10.8125em;
        position: absolute;
        right: -2.0625em;
        bottom: 2.6875em;
        z-index: 2;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbs-371 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
    #sbs-371 .cs-ul {
        margin-top: 1rem;
    }
    #sbs-371 .cs-image-group {
        font-size: min(1.1vw, 1em);
        /* prevents flexbox from squishing it */
        flex: none;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #sbs-371 .cs-topper {
        color: var(--primaryLight);
    }
    body.dark-mode #sbs-371 .cs-title,
    body.dark-mode #sbs-371 .cs-text {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #sbs-371 .cs-text {
        opacity: 0.8;
    }
    body.dark-mode #sbs-371 .cs-left-image,
    body.dark-mode #sbs-371 .cs-bottom-image {
        border-color: var(--accent);
    }
    body.dark-mode #sbs-371 .cs-splash {
        filter: grayscale(0.5) brightness(220%);
    }
    body.dark-mode #sbs-371 .cs-mask path {
        fill: var(--dark);
    }
}

/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-371 {
        padding: var(--sectionPadding);
        overflow: hidden;

        @keyframes floatAnimation {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-2em);
            }
            100% {
                transform: translateY(0);
            }
        }
        @keyframes floatAnimation2 {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-1em);
            }
            100% {
                transform: translateY(0);
            }
        }

        .cs-container {
            width: 100%;
            /* changes to 1280px at desktop */
            max-width: (550/16rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* 48px - 56px */
            gap: clamp(3rem, 3vw, 3.5rem);
        }

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

        .cs-text {
            margin-bottom: (16/16rem);
            &:last-of-type {
                margin-bottom: (32/16rem);
            }
        }

        .cs-button-solid {
            font-size: (16/16rem);
            /* 46px - 56px */
            line-height: clamp(2.875rem, 5.5vw, 3.5rem);
            text-decoration: none;
            font-weight: 700;
            text-align: center;
            margin: 0;
            color: #fff;
            min-width: (150/16rem);
            padding: 0 (24/16rem);
            background-color: var(--primary);
            border-radius: (4/16rem);
            display: inline-block;
            position: relative;
            z-index: 1;
            /* prevents padding from adding to the width */
            box-sizing: border-box;

            &:before {
                content: "";
                position: absolute;
                height: 100%;
                width: 0%;
                background: #000;
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                border-radius: (4/16rem);
                transition: width 0.3s;
            }

            &:hover {
                &:before {
                    width: 100%;
                }
            }
        }

        .cs-image-group {
            /* everything in the group is in ems so we can scale them down with this min/max font size tied to the view width */
            font-size: ~"min(2.3vw, 1em)";
            width: (579/16em);
            height: (588/16em);
            position: relative;
            /* sends it to the top above the content */
            order: -1;
        }

        .cs-splash {
            width: (570/16em);
            height: (586/16em);
            opacity: 0.1;
            position: absolute;
            left: (5/16em);
            top: 0;
        }

        .cs-blob {
            width: (392/16em);
            height: (497/16em);
            position: absolute;
            right: (0/16em);
            top: (10/16em);
        }

        .cs-lightning {
            width: (64/16em);
            height: (103/16em);
            position: absolute;
            right: (40/16em);
            top: (8/16em);
            transform: rotate(23deg);
        }

        .cs-left-image {
            width: (211/16em);
            height: (211/16em);
            border-radius: 50%;
            /* cover the 1px gap between border and image */
            background-color: #f7f7f7;
            border: 12px solid #f7f7f7;
            /* clips image to the circle */
            overflow: hidden;
            position: absolute;
            left: (-12/16em);
            top: (131/16em);
            z-index: 10;
            animation-name: floatAnimation2;
            animation-duration: 6s;
            animation-timing-function: ease-in-out;
            animation-fill-mode: forwards;
            animation-iteration-count: infinite;

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

        .cs-bottom-image {
            width: (180/16em);
            height: 180 /16em;
            border-radius: 50%;
            /* cover the 1px gap between border and image */
            background-color: #f7f7f7;
            border: 12px solid #f7f7f7;
            /* clips image to the circle */
            overflow: hidden;
            position: absolute;
            right: (180/16em);
            bottom: (-12/16em);
            z-index: 10;
            animation-name: floatAnimation;
            animation-duration: 10s;
            animation-delay: 1s;
            animation-timing-function: ease-in-out;
            animation-fill-mode: forwards;
            animation-iteration-count: infinite;

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

        .cs-person {
            width: (386/16em);
            height: auto;
            position: absolute;
            right: (46/16em);
            bottom: (65/16em);

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

        .cs-mask {
            width: (383/16em);
            height: (173/16em);
            position: absolute;
            right: (-33/16em);
            bottom: (43/16em);
            z-index: 2;
        }
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbs-371 {
        .cs-container {
            max-width: (1280/16rem);
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
        }

        .cs-ul {
            margin-top: (16/16rem);
        }

        .cs-image-group {
            font-size: ~"min(1.1vw, 1em)";
            /* prevents flexbox from squishing it */
            flex: none;
        }
    }
}

/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-371 {
        padding: var(--sectionPadding);
        overflow: hidden;

        @keyframes floatAnimation {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-2em);
            }
            100% {
                transform: translateY(0);
            }
        }
        @keyframes floatAnimation2 {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-1em);
            }
            100% {
                transform: translateY(0);
            }
        }

        .cs-container {
            width: 100%;
            /* changes to 1280px at desktop */
            max-width: (550/16rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* 48px - 56px */
            gap: clamp(3rem, 3vw, 3.5rem);
        }

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

        .cs-text {
            margin-bottom: (16/16rem);
            &:last-of-type {
                margin-bottom: (32/16rem);
            }
        }

        .cs-button-solid {
            font-size: (16/16rem);
            /* 46px - 56px */
            line-height: clamp(2.875rem, 5.5vw, 3.5rem);
            text-decoration: none;
            font-weight: 700;
            text-align: center;
            margin: 0;
            color: #fff;
            min-width: (150/16rem);
            padding: 0 (24/16rem);
            background-color: var(--primary);
            border-radius: (4/16rem);
            display: inline-block;
            position: relative;
            z-index: 1;
            /* prevents padding from adding to the width */
            box-sizing: border-box;

            &:before {
                content: "";
                position: absolute;
                height: 100%;
                width: 0%;
                background: #000;
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                border-radius: (4/16rem);
                transition: width 0.3s;
            }

            &:hover {
                &:before {
                    width: 100%;
                }
            }
        }

        .cs-image-group {
            /* everything in the group is in ems so we can scale them down with this min/max font size tied to the view width */
            font-size: ~"min(2.3vw, 1em)";
            width: (579/16em);
            height: (588/16em);
            position: relative;
            /* sends it to the top above the content */
            order: -1;
        }

        .cs-splash {
            width: (570/16em);
            height: (586/16em);
            opacity: 0.1;
            position: absolute;
            left: (5/16em);
            top: 0;
        }

        .cs-blob {
            width: (392/16em);
            height: (497/16em);
            position: absolute;
            right: (0/16em);
            top: (10/16em);
        }

        .cs-lightning {
            width: (64/16em);
            height: (103/16em);
            position: absolute;
            right: (40/16em);
            top: (8/16em);
            transform: rotate(23deg);
        }

        .cs-left-image {
            width: (211/16em);
            height: (211/16em);
            border-radius: 50%;
            /* cover the 1px gap between border and image */
            background-color: #f7f7f7;
            border: 12px solid #f7f7f7;
            /* clips image to the circle */
            overflow: hidden;
            position: absolute;
            left: (-12/16em);
            top: (131/16em);
            z-index: 10;
            animation-name: floatAnimation2;
            animation-duration: 6s;
            animation-timing-function: ease-in-out;
            animation-fill-mode: forwards;
            animation-iteration-count: infinite;

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

        .cs-bottom-image {
            width: (180/16em);
            height: 180 /16em;
            border-radius: 50%;
            /* cover the 1px gap between border and image */
            background-color: #f7f7f7;
            border: 12px solid #f7f7f7;
            /* clips image to the circle */
            overflow: hidden;
            position: absolute;
            right: (180/16em);
            bottom: (-12/16em);
            z-index: 10;
            animation-name: floatAnimation;
            animation-duration: 10s;
            animation-delay: 1s;
            animation-timing-function: ease-in-out;
            animation-fill-mode: forwards;
            animation-iteration-count: infinite;

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

        .cs-person {
            width: (386/16em);
            height: auto;
            position: absolute;
            right: (46/16em);
            bottom: (65/16em);

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

        .cs-mask {
            width: (383/16em);
            height: (173/16em);
            position: absolute;
            right: (-33/16em);
            bottom: (43/16em);
            z-index: 2;
        }
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbs-371 {
        .cs-container {
            max-width: (1280/16rem);
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
        }

        .cs-ul {
            margin-top: (16/16rem);
        }

        .cs-image-group {
            font-size: ~"min(1.1vw, 1em)";
            /* prevents flexbox from squishing it */
            flex: none;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #sbs-371 {
            .cs-topper {
                color: var(--primaryLight);
            }

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

            .cs-text {
                opacity: 0.8;
            }

            .cs-left-image,
            .cs-bottom-image {
                border-color: var(--accent);
            }

            .cs-splash {
                filter: grayscale(0.5) brightness(220%);
            }

            .cs-mask {
                path {
                    fill: var(--dark);
                }
            }
        }
    }
}

/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-371 {
        padding: var(--sectionPadding);
        overflow: hidden;

        @keyframes floatAnimation {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-2em);
            }
            100% {
                transform: translateY(0);
            }
        }
        @keyframes floatAnimation2 {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-1em);
            }
            100% {
                transform: translateY(0);
            }
        }

        .cs-container {
            width: 100%;
            /* changes to 1280px at desktop */
            max-width: calc(550 / 16 * 1rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* 48px - 56px */
            gap: clamp(3rem, 3vw, 3.5rem);
        }

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: left;
            width: 100%;
            max-width: calc(542 / 16 * 1rem);
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: flex-start;
        }

        .cs-text {
            margin-bottom: calc(16 / 16 * 1rem);
            &:last-of-type {
                margin-bottom: calc(32 / 16 * 1rem);
            }
        }

        .cs-button-solid {
            font-size: calc(16 / 16 * 1rem);
            /* 46px - 56px */
            line-height: clamp(2.875rem, 5.5vw, 3.5rem);
            text-decoration: none;
            font-weight: 700;
            text-align: center;
            margin: 0;
            color: #fff;
            min-width: calc(150 / 16 * 1rem);
            padding: 0 calc(24 / 16 * 1rem);
            background-color: var(--primary);
            border-radius: calc(4 / 16 * 1rem);
            display: inline-block;
            position: relative;
            z-index: 1;
            /* prevents padding from adding to the width */
            box-sizing: border-box;

            &:before {
                content: "";
                position: absolute;
                height: 100%;
                width: 0%;
                background: #000;
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                border-radius: calc(4 / 16 * 1rem);
                transition: width 0.3s;
            }

            &:hover {
                &:before {
                    width: 100%;
                }
            }
        }

        .cs-image-group {
            /* everything in the group is in ems so we can scale them down with this min/max font size tied to the view width */
            font-size: min(2.3vw, 1em);
            width: calc(579 / 16 * 1em);
            height: calc(588 / 16 * 1em);
            position: relative;
            /* sends it to the top above the content */
            order: -1;
        }

        .cs-splash {
            width: calc(570 / 16 * 1em);
            height: calc(586 / 16 * 1em);
            opacity: 0.1;
            position: absolute;
            left: calc(5 / 16 * 1em);
            top: 0;
        }

        .cs-blob {
            width: calc(392 / 16 * 1em);
            height: calc(497 / 16 * 1em);
            position: absolute;
            right: calc(0 / 16 * 1em);
            top: calc(10 / 16 * 1em);
        }

        .cs-lightning {
            width: calc(64 / 16 * 1em);
            height: calc(103 / 16 * 1em);
            position: absolute;
            right: calc(40 / 16 * 1em);
            top: calc(8 / 16 * 1em);
            transform: rotate(23deg);
        }

        .cs-left-image {
            width: calc(211 / 16 * 1em);
            height: calc(211 / 16 * 1em);
            border-radius: 50%;
            /* cover the 1px gap between border and image */
            background-color: #f7f7f7;
            border: 12px solid #f7f7f7;
            /* clips image to the circle */
            overflow: hidden;
            position: absolute;
            left: calc(-12 / 16 * 1em);
            top: calc(131 / 16 * 1em);
            z-index: 10;
            animation-name: floatAnimation2;
            animation-duration: 6s;
            animation-timing-function: ease-in-out;
            animation-fill-mode: forwards;
            animation-iteration-count: infinite;

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

        .cs-bottom-image {
            width: calc(180 / 16 * 1em);
            height: calc(180 / 16 * 1em);
            border-radius: 50%;
            /* cover the 1px gap between border and image */
            background-color: #f7f7f7;
            border: 12px solid #f7f7f7;
            /* clips image to the circle */
            overflow: hidden;
            position: absolute;
            right: calc(180 / 16 * 1em);
            bottom: calc(-12 / 16 * 1em);
            z-index: 10;
            animation-name: floatAnimation;
            animation-duration: 10s;
            animation-delay: 1s;
            animation-timing-function: ease-in-out;
            animation-fill-mode: forwards;
            animation-iteration-count: infinite;

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

        .cs-person {
            width: calc(386 / 16 * 1em);
            height: auto;
            position: absolute;
            right: calc(46 / 16 * 1em);
            bottom: calc(65 / 16 * 1em);

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

        .cs-mask {
            width: calc(383 / 16 * 1em);
            height: calc(173 / 16 * 1em);
            position: absolute;
            right: calc(-33 / 16 * 1em);
            bottom: calc(43 / 16 * 1em);
            z-index: 2;
        }
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbs-371 {
        .cs-container {
            max-width: calc(1280 / 16 * 1rem);
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
        }

        .cs-ul {
            margin-top: calc(16 / 16 * 1rem);
        }

        .cs-image-group {
            font-size: min(1.1vw, 1em);
            /* prevents flexbox from squishing it */
            flex: none;
        }
    }
}

/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-371 {
        padding: var(--sectionPadding);
        overflow: hidden;

        @keyframes floatAnimation {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-2em);
            }
            100% {
                transform: translateY(0);
            }
        }
        @keyframes floatAnimation2 {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-1em);
            }
            100% {
                transform: translateY(0);
            }
        }

        .cs-container {
            width: 100%;
            /* changes to 1280px at desktop */
            max-width: calc(550 / 16 * 1rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* 48px - 56px */
            gap: clamp(3rem, 3vw, 3.5rem);
        }

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: left;
            width: 100%;
            max-width: calc(542 / 16 * 1rem);
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: flex-start;
        }

        .cs-text {
            margin-bottom: calc(16 / 16 * 1rem);
            &:last-of-type {
                margin-bottom: calc(32 / 16 * 1rem);
            }
        }

        .cs-button-solid {
            font-size: calc(16 / 16 * 1rem);
            /* 46px - 56px */
            line-height: clamp(2.875rem, 5.5vw, 3.5rem);
            text-decoration: none;
            font-weight: 700;
            text-align: center;
            margin: 0;
            color: #fff;
            min-width: calc(150 / 16 * 1rem);
            padding: 0 calc(24 / 16 * 1rem);
            background-color: var(--primary);
            border-radius: calc(4 / 16 * 1rem);
            display: inline-block;
            position: relative;
            z-index: 1;
            /* prevents padding from adding to the width */
            box-sizing: border-box;

            &:before {
                content: "";
                position: absolute;
                height: 100%;
                width: 0%;
                background: #000;
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                border-radius: calc(4 / 16 * 1rem);
                transition: width 0.3s;
            }

            &:hover {
                &:before {
                    width: 100%;
                }
            }
        }

        .cs-image-group {
            /* everything in the group is in ems so we can scale them down with this min/max font size tied to the view width */
            font-size: min(2.3vw, 1em);
            width: calc(579 / 16 * 1em);
            height: calc(588 / 16 * 1em);
            position: relative;
            /* sends it to the top above the content */
            order: -1;
        }

        .cs-splash {
            width: calc(570 / 16 * 1em);
            height: calc(586 / 16 * 1em);
            opacity: 0.1;
            position: absolute;
            left: calc(5 / 16 * 1em);
            top: 0;
        }

        .cs-blob {
            width: calc(392 / 16 * 1em);
            height: calc(497 / 16 * 1em);
            position: absolute;
            right: calc(0 / 16 * 1em);
            top: calc(10 / 16 * 1em);
        }

        .cs-lightning {
            width: calc(64 / 16 * 1em);
            height: calc(103 / 16 * 1em);
            position: absolute;
            right: calc(40 / 16 * 1em);
            top: calc(8 / 16 * 1em);
            transform: rotate(23deg);
        }

        .cs-left-image {
            width: calc(211 / 16 * 1em);
            height: calc(211 / 16 * 1em);
            border-radius: 50%;
            /* cover the 1px gap between border and image */
            background-color: #f7f7f7;
            border: 12px solid #f7f7f7;
            /* clips image to the circle */
            overflow: hidden;
            position: absolute;
            left: calc(-12 / 16 * 1em);
            top: calc(131 / 16 * 1em);
            z-index: 10;
            animation-name: floatAnimation2;
            animation-duration: 6s;
            animation-timing-function: ease-in-out;
            animation-fill-mode: forwards;
            animation-iteration-count: infinite;

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

        .cs-bottom-image {
            width: calc(180 / 16 * 1em);
            height: calc(180 / 16 * 1em);
            border-radius: 50%;
            /* cover the 1px gap between border and image */
            background-color: #f7f7f7;
            border: 12px solid #f7f7f7;
            /* clips image to the circle */
            overflow: hidden;
            position: absolute;
            right: calc(180 / 16 * 1em);
            bottom: calc(-12 / 16 * 1em);
            z-index: 10;
            animation-name: floatAnimation;
            animation-duration: 10s;
            animation-delay: 1s;
            animation-timing-function: ease-in-out;
            animation-fill-mode: forwards;
            animation-iteration-count: infinite;

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

        .cs-person {
            width: calc(386 / 16 * 1em);
            height: auto;
            position: absolute;
            right: calc(46 / 16 * 1em);
            bottom: calc(65 / 16 * 1em);

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

        .cs-mask {
            width: calc(383 / 16 * 1em);
            height: calc(173 / 16 * 1em);
            position: absolute;
            right: calc(-33 / 16 * 1em);
            bottom: calc(43 / 16 * 1em);
            z-index: 2;
        }
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbs-371 {
        .cs-container {
            max-width: calc(1280 / 16 * 1rem);
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
        }

        .cs-ul {
            margin-top: calc(16 / 16 * 1rem);
        }

        .cs-image-group {
            font-size: min(1.1vw, 1em);
            /* prevents flexbox from squishing it */
            flex: none;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #sbs-371 {
            .cs-topper {
                color: var(--primaryLight);
            }

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

            .cs-text {
                opacity: 0.8;
            }

            .cs-left-image,
            .cs-bottom-image {
                border-color: var(--accent);
            }

            .cs-splash {
                filter: grayscale(0.5) brightness(220%);
            }

            .cs-mask {
                path {
                    fill: 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);
}