Code of Stitch

Standard

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

<section id="sbs-1161">
    <div class="cs-container">
        <div class="cs-image-group">
            <!--Top left image-->
            <picture class="cs-picture cs-picture1">
                <!--Mobile Image-->
                <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/mechanic25.jpg">
                <!--Tablet and above Image-->
                <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/mechanic25.jpg">
                <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/mechanic25.jpg" alt="appliance" width="630" height="390">
            </picture>
            <!--Bottom right image-->
            <picture class="cs-picture cs-picture2">
                <!--Mobile Image-->
                <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/mechanic26.jpg">
                <!--Tablet and above Image-->
                <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/mechanic26.jpg">
                <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/mechanic26.jpg" alt="appliance" width="461" height="300">
            </picture>
            <!--Splash Graphic-->
            <img class="cs-graphic cs-graphic1" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/splash-4.svg" alt="splash" width="1154" height="505" aria-hidden="true">
            <!--Tire Mark-->
            <img class="cs-graphic cs-graphic2" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/tire-mark.svg" alt="tire mark" width="1085" height="322" aria-hidden="true">
            <div class="cs-box">
                <span class="cs-number">2500+</span>
                <span class="cs-desc">Cars repaired this year</span>
            </div>
        </div>
        <div class="cs-content">
            <span class="cs-topper">About Us</span>
            <h2 class="cs-title">Quality With The Best Standards</h2>
            <p class="cs-text">
                Our professionals will perform diagnostic tests, fluid flush and fills, engine replacement, oil changes, and total vehicle overhauls. Busto auctor lectus vitae conubia euismod nec rhoncus parturient convallis parturient accumsan volutpat ligula and intege aenean facilisis.
            </p>
            <ul class="cs-ul">
                <li class="cs-li">We handle all makes and models</li>
                <li class="cs-li">We are endorsed by the local trading standards office</li>
                <li class="cs-li">All our technicians are equipped with the latest portable</li>
                <li class="cs-li">Proven results for setting exceptional standards</li>
                <li class="cs-li">Same day service for most repairs</li>
            </ul>
            <a href="" class="cs-button-solid">Read More</a>
        </div>
    </div>
</section>

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-1161 {
        padding: var(--sectionPadding);
        /* clips grpahics from causing overflow issues */
        overflow: hidden;
        background-color: #f7f7f7;
    }
    #sbs-1161 .cs-container {
        width: 100%;
        /* changes to 1280px at desktop */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #sbs-1161 .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-1161 .cs-text {
        margin-bottom: 1rem;
    }
    #sbs-1161 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbs-1161 .cs-ul {
        max-width: 39.375rem;
        margin: 0 0 2rem 0;
        padding: 0;
        /* clips the bullets to create the half circle */
        overflow: hidden;
    }
    #sbs-1161 .cs-li {
        list-style: none;
        margin: 0 0 0.5rem 0;
        color: var(--bodyTextColor);
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0.75rem;
        position: relative;
    }
    #sbs-1161 .cs-li:before {
        /* bullet */
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        margin-top: 0.5rem;
        background: var(--secondary);
        display: block;
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #sbs-1161 .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);
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #sbs-1161 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #sbs-1161 .cs-button-solid:hover:before {
        width: 100%;
    }
    #sbs-1161 .cs-image-group {
        /* scales the whole group based on the view width size and stop when that vales equals .8em, resets at desktop */
        font-size: min(2.15vw, 0.8em);
        width: 42.375em;
        height: 36.75em;
        display: block;
        position: relative;
        z-index: 1;
    }
    #sbs-1161 .cs-picture {
        position: absolute;
    }
    #sbs-1161 .cs-picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }
    #sbs-1161 .cs-picture1 {
        width: 39.375em;
        height: 24.375em;
        top: 0;
        left: 0;
        z-index: 10;
    }
    #sbs-1161 .cs-picture2 {
        width: 28.8125em;
        height: 18.75em;
        bottom: 0;
        right: 0;
        z-index: 10;
    }
    #sbs-1161 .cs-graphic {
        height: auto;
        position: absolute;
    }
    #sbs-1161 .cs-graphic1 {
        width: 72.125em;
        top: 1.25em;
        right: -3.75em;
        transform: rotate(-15deg);
    }
    #sbs-1161 .cs-graphic2 {
        width: 67.8125em;
        top: 11.5625em;
        right: -1.5625em;
    }
    #sbs-1161 .cs-box {
        width: 12.3125em;
        height: 11.125em;
        padding: 0.5rem;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        background-color: var(--primary);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: absolute;
        z-index: 20;
        left: 0;
        bottom: 0;
    }
    #sbs-1161 .cs-number {
        /* 20px - 39px */
        font-size: clamp(1.25rem, 4vw, 2.4375rem);
        text-align: center;
        line-height: 1.2em;
        font-weight: 700;
        width: 100%;
        /* 4px - 8px */
        margin: 0 0 clamp(0.25rem, 1vw, 0.5rem);
        color: var(--bodyTextColorWhite);
        display: block;
    }
    #sbs-1161 .cs-desc {
        /* 12px - 16px */
        font-size: clamp(0.75rem, 1.9vw, 1rem);
        text-align: center;
        line-height: 1.2em;
        font-weight: 700;
        width: 100%;
        max-width: 12ch;
        margin: 0;
        color: var(--bodyTextColorWhite);
        display: block;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbs-1161 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    #sbs-1161 .cs-image-group {
        font-size: min(1.2vw, 1em);
        flex: none;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-1161 {
        padding: var(--sectionPadding);
        /* clips grpahics from causing overflow issues */
        overflow: hidden;
        background-color: #f7f7f7;
    }
    #sbs-1161 .cs-container {
        width: 100%;
        /* changes to 1280px at desktop */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #sbs-1161 .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-1161 .cs-text {
        margin-bottom: 1rem;
    }
    #sbs-1161 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbs-1161 .cs-ul {
        max-width: 39.375rem;
        margin: 0 0 2rem 0;
        padding: 0;
        /* clips the bullets to create the half circle */
        overflow: hidden;
    }
    #sbs-1161 .cs-li {
        list-style: none;
        margin: 0 0 0.5rem 0;
        color: var(--bodyTextColor);
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0.75rem;
        position: relative;
    }
    #sbs-1161 .cs-li:before {
        /* bullet */
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        margin-top: 0.5rem;
        background: var(--secondary);
        display: block;
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #sbs-1161 .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);
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #sbs-1161 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #sbs-1161 .cs-button-solid:hover:before {
        width: 100%;
    }
    #sbs-1161 .cs-image-group {
        /* scales the whole group based on the view width size and stop when that vales equals .8em, resets at desktop */
        font-size: min(2.15vw, 0.8em);
        width: 42.375em;
        height: 36.75em;
        display: block;
        position: relative;
        z-index: 1;
    }
    #sbs-1161 .cs-picture {
        position: absolute;
    }
    #sbs-1161 .cs-picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }
    #sbs-1161 .cs-picture1 {
        width: 39.375em;
        height: 24.375em;
        top: 0;
        left: 0;
        z-index: 10;
    }
    #sbs-1161 .cs-picture2 {
        width: 28.8125em;
        height: 18.75em;
        bottom: 0;
        right: 0;
        z-index: 10;
    }
    #sbs-1161 .cs-graphic {
        height: auto;
        position: absolute;
    }
    #sbs-1161 .cs-graphic1 {
        width: 72.125em;
        top: 1.25em;
        right: -3.75em;
        transform: rotate(-15deg);
    }
    #sbs-1161 .cs-graphic2 {
        width: 67.8125em;
        top: 11.5625em;
        right: -1.5625em;
    }
    #sbs-1161 .cs-box {
        width: 12.3125em;
        height: 11.125em;
        padding: 0.5rem;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        background-color: var(--primary);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: absolute;
        z-index: 20;
        left: 0;
        bottom: 0;
    }
    #sbs-1161 .cs-number {
        /* 20px - 39px */
        font-size: clamp(1.25rem, 4vw, 2.4375rem);
        text-align: center;
        line-height: 1.2em;
        font-weight: 700;
        width: 100%;
        /* 4px - 8px */
        margin: 0 0 clamp(0.25rem, 1vw, 0.5rem);
        color: var(--bodyTextColorWhite);
        display: block;
    }
    #sbs-1161 .cs-desc {
        /* 12px - 16px */
        font-size: clamp(0.75rem, 1.9vw, 1rem);
        text-align: center;
        line-height: 1.2em;
        font-weight: 700;
        width: 100%;
        max-width: 12ch;
        margin: 0;
        color: var(--bodyTextColorWhite);
        display: block;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbs-1161 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    #sbs-1161 .cs-image-group {
        font-size: min(1.2vw, 1em);
        flex: none;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #sbs-1161 {
        background-color: rgba(0, 0, 0, 0.2);
    }
    body.dark-mode #sbs-1161 .cs-title,
    body.dark-mode #sbs-1161 .cs-text,
    body.dark-mode #sbs-1161 .cs-h3,
    body.dark-mode #sbs-1161 .cs-li {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #sbs-1161 .cs-text,
    body.dark-mode #sbs-1161 .cs-li {
        opacity: 0.8;
    }
    body.dark-mode #sbs-1161 .cs-graphic {
        opacity: 0.1;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-1161 {
        padding: var(--sectionPadding);
        /* clips grpahics from causing overflow issues */
        overflow: hidden;
        background-color: #f7f7f7;

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

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: 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-ul {
            max-width: (630/16rem);
            margin: 0 0 (32/16rem) 0;
            padding: 0;
            /* clips the bullets to create the half circle */
            overflow: hidden;
        }

        .cs-li {
            list-style: none;
            margin: 0 0 (8/16rem) 0;
            color: var(--bodyTextColor);
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            gap: (12/16rem);
            position: relative;

            &:before {
                /* bullet */
                content: "";
                width: (8/16rem);
                height: (8/16rem);
                margin-top: (8/16rem);
                background: var(--secondary);
                display: block;
                /* prevents flexbox from squishing it */
                flex: none;
            }
        }

        .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);
            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;
                transition: width 0.3s;
            }

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

        .cs-image-group {
            /* scales the whole group based on the view width size and stop when that vales equals .8em, resets at desktop */
            font-size: ~"min(2.15vw, .8em)";
            width: (678/16em);
            height: (588/16em);
            display: block;
            position: relative;
            z-index: 1;
        }

        .cs-picture {
            position: absolute;

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

        .cs-picture1 {
            width: (630/16em);
            height: (390/16em);
            top: 0;
            left: 0;
            z-index: 10;
        }

        .cs-picture2 {
            width: (461/16em);
            height: (300/16em);
            bottom: 0;
            right: 0;
            z-index: 10;
        }

        .cs-graphic {
            height: auto;
            position: absolute;
        }

        .cs-graphic1 {
            width: (1154/16em);
            top: (20/16em);
            right: (-60/16em);
            transform: rotate(-15deg);
        }

        .cs-graphic2 {
            width: (1085/16em);
            top: (185/16em);
            right: (-25/16em);
        }

        .cs-box {
            width: (197/16em);
            height: (178/16em);
            padding: (8/16rem);
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            background-color: var(--primary);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            position: absolute;
            z-index: 20;
            left: 0;
            bottom: 0;
        }

        .cs-number {
            /* 20px - 39px */
            font-size: clamp(1.25rem, 4vw, 2.4375rem);
            text-align: center;
            line-height: 1.2em;
            font-weight: 700;
            width: 100%;
            /* 4px - 8px */
            margin: 0 0 clamp(0.25rem, 1vw, 0.5rem);
            color: var(--bodyTextColorWhite);
            display: block;
        }

        .cs-desc {
            /* 12px - 16px */
            font-size: clamp(0.75rem, 1.9vw, 1rem);
            text-align: center;
            line-height: 1.2em;
            font-weight: 700;
            width: 100%;
            max-width: 12ch;
            margin: 0;
            color: var(--bodyTextColorWhite);
            display: block;
        }
    }
}

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

        .cs-image-group {
            font-size: ~"min(1.2vw, 1em)";
            flex: none;
        }
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-1161 {
        padding: var(--sectionPadding);
        /* clips grpahics from causing overflow issues */
        overflow: hidden;
        background-color: #f7f7f7;

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

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: 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-ul {
            max-width: (630/16rem);
            margin: 0 0 (32/16rem) 0;
            padding: 0;
            /* clips the bullets to create the half circle */
            overflow: hidden;
        }

        .cs-li {
            list-style: none;
            margin: 0 0 (8/16rem) 0;
            color: var(--bodyTextColor);
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            gap: (12/16rem);
            position: relative;

            &:before {
                /* bullet */
                content: "";
                width: (8/16rem);
                height: (8/16rem);
                margin-top: (8/16rem);
                background: var(--secondary);
                display: block;
                /* prevents flexbox from squishing it */
                flex: none;
            }
        }

        .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);
            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;
                transition: width 0.3s;
            }

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

        .cs-image-group {
            /* scales the whole group based on the view width size and stop when that vales equals .8em, resets at desktop */
            font-size: ~"min(2.15vw, .8em)";
            width: (678/16em);
            height: (588/16em);
            display: block;
            position: relative;
            z-index: 1;
        }

        .cs-picture {
            position: absolute;

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

        .cs-picture1 {
            width: (630/16em);
            height: (390/16em);
            top: 0;
            left: 0;
            z-index: 10;
        }

        .cs-picture2 {
            width: (461/16em);
            height: (300/16em);
            bottom: 0;
            right: 0;
            z-index: 10;
        }

        .cs-graphic {
            height: auto;
            position: absolute;
        }

        .cs-graphic1 {
            width: (1154/16em);
            top: (20/16em);
            right: (-60/16em);
            transform: rotate(-15deg);
        }

        .cs-graphic2 {
            width: (1085/16em);
            top: (185/16em);
            right: (-25/16em);
        }

        .cs-box {
            width: (197/16em);
            height: (178/16em);
            padding: (8/16rem);
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            background-color: var(--primary);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            position: absolute;
            z-index: 20;
            left: 0;
            bottom: 0;
        }

        .cs-number {
            /* 20px - 39px */
            font-size: clamp(1.25rem, 4vw, 2.4375rem);
            text-align: center;
            line-height: 1.2em;
            font-weight: 700;
            width: 100%;
            /* 4px - 8px */
            margin: 0 0 clamp(0.25rem, 1vw, 0.5rem);
            color: var(--bodyTextColorWhite);
            display: block;
        }

        .cs-desc {
            /* 12px - 16px */
            font-size: clamp(0.75rem, 1.9vw, 1rem);
            text-align: center;
            line-height: 1.2em;
            font-weight: 700;
            width: 100%;
            max-width: 12ch;
            margin: 0;
            color: var(--bodyTextColorWhite);
            display: block;
        }
    }
}

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

        .cs-image-group {
            font-size: ~"min(1.2vw, 1em)";
            flex: none;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #sbs-1161 {
            background-color: rgba(0, 0, 0, 0.2);
            .cs-title,
            .cs-text,
            .cs-h3,
            .cs-li {
                color: var(--bodyTextColorWhite);
            }

            .cs-text,
            .cs-li {
                opacity: 0.8;
            }

            .cs-graphic {
                opacity: 0.1;
            }
        }
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-1161 {
        padding: var(--sectionPadding);
        /* clips grpahics from causing overflow issues */
        overflow: hidden;
        background-color: #f7f7f7;

        .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;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .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-ul {
            max-width: calc(630 / 16 * 1rem);
            margin: 0 0 calc(32 / 16 * 1rem) 0;
            padding: 0;
            /* clips the bullets to create the half circle */
            overflow: hidden;
        }

        .cs-li {
            list-style: none;
            margin: 0 0 calc(8 / 16 * 1rem) 0;
            color: var(--bodyTextColor);
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            gap: calc(12 / 16 * 1rem);
            position: relative;

            &:before {
                /* bullet */
                content: "";
                width: calc(8 / 16 * 1rem);
                height: calc(8 / 16 * 1rem);
                margin-top: calc(8 / 16 * 1rem);
                background: var(--secondary);
                display: block;
                /* prevents flexbox from squishing it */
                flex: none;
            }
        }

        .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);
            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;
                transition: width 0.3s;
            }

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

        .cs-image-group {
            /* scales the whole group based on the view width size and stop when that vales equals .8em, resets at desktop */
            font-size: min(2.15vw, 0.8em);
            width: calc(678 / 16 * 1em);
            height: calc(588 / 16 * 1em);
            display: block;
            position: relative;
            z-index: 1;
        }

        .cs-picture {
            position: absolute;

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

        .cs-picture1 {
            width: calc(630 / 16 * 1em);
            height: calc(390 / 16 * 1em);
            top: 0;
            left: 0;
            z-index: 10;
        }

        .cs-picture2 {
            width: calc(461 / 16 * 1em);
            height: calc(300 / 16 * 1em);
            bottom: 0;
            right: 0;
            z-index: 10;
        }

        .cs-graphic {
            height: auto;
            position: absolute;
        }

        .cs-graphic1 {
            width: calc(1154 / 16 * 1em);
            top: calc(20 / 16 * 1em);
            right: calc(-60 / 16 * 1em);
            transform: rotate(-15deg);
        }

        .cs-graphic2 {
            width: calc(1085 / 16 * 1em);
            top: calc(185 / 16 * 1em);
            right: calc(-25 / 16 * 1em);
        }

        .cs-box {
            width: calc(197 / 16 * 1em);
            height: calc(178 / 16 * 1em);
            padding: calc(8 / 16 * 1em);
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            background-color: var(--primary);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            position: absolute;
            z-index: 20;
            left: 0;
            bottom: 0;
        }

        .cs-number {
            /* 20px - 39px */
            font-size: clamp(1.25rem, 4vw, 2.4375rem);
            text-align: center;
            line-height: 1.2em;
            font-weight: 700;
            width: 100%;
            /* 4px - 8px */
            margin: 0 0 clamp(0.25rem, 1vw, 0.5rem);
            color: var(--bodyTextColorWhite);
            display: block;
        }

        .cs-desc {
            /* 12px - 16px */
            font-size: clamp(0.75rem, 1.9vw, 1rem);
            text-align: center;
            line-height: 1.2em;
            font-weight: 700;
            width: 100%;
            max-width: 12ch;
            margin: 0;
            color: var(--bodyTextColorWhite);
            display: block;
        }
    }
}

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

        .cs-image-group {
            font-size: min(1.2vw, 1em);
            flex: none;
        }
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-1161 {
        padding: var(--sectionPadding);
        /* clips grpahics from causing overflow issues */
        overflow: hidden;
        background-color: #f7f7f7;

        .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;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .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-ul {
            max-width: calc(630 / 16 * 1rem);
            margin: 0 0 calc(32 / 16 * 1rem) 0;
            padding: 0;
            /* clips the bullets to create the half circle */
            overflow: hidden;
        }

        .cs-li {
            list-style: none;
            margin: 0 0 calc(8 / 16 * 1rem) 0;
            color: var(--bodyTextColor);
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            gap: calc(12 / 16 * 1rem);
            position: relative;

            &:before {
                /* bullet */
                content: "";
                width: calc(8 / 16 * 1rem);
                height: calc(8 / 16 * 1rem);
                margin-top: calc(8 / 16 * 1rem);
                background: var(--secondary);
                display: block;
                /* prevents flexbox from squishing it */
                flex: none;
            }
        }

        .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);
            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;
                transition: width 0.3s;
            }

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

        .cs-image-group {
            /* scales the whole group based on the view width size and stop when that vales equals .8em, resets at desktop */
            font-size: min(2.15vw, 0.8em);
            width: calc(678 / 16 * 1em);
            height: calc(588 / 16 * 1em);
            display: block;
            position: relative;
            z-index: 1;
        }

        .cs-picture {
            position: absolute;

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

        .cs-picture1 {
            width: calc(630 / 16 * 1em);
            height: calc(390 / 16 * 1em);
            top: 0;
            left: 0;
            z-index: 10;
        }

        .cs-picture2 {
            width: calc(461 / 16 * 1em);
            height: calc(300 / 16 * 1em);
            bottom: 0;
            right: 0;
            z-index: 10;
        }

        .cs-graphic {
            height: auto;
            position: absolute;
        }

        .cs-graphic1 {
            width: calc(1154 / 16 * 1em);
            top: calc(20 / 16 * 1em);
            right: calc(-60 / 16 * 1em);
            transform: rotate(-15deg);
        }

        .cs-graphic2 {
            width: calc(1085 / 16 * 1em);
            top: calc(185 / 16 * 1em);
            right: calc(-25 / 16 * 1em);
        }

        .cs-box {
            width: calc(197 / 16 * 1em);
            height: calc(178 / 16 * 1em);
            padding: calc(8 / 16 * 1em);
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            background-color: var(--primary);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            position: absolute;
            z-index: 20;
            left: 0;
            bottom: 0;
        }

        .cs-number {
            /* 20px - 39px */
            font-size: clamp(1.25rem, 4vw, 2.4375rem);
            text-align: center;
            line-height: 1.2em;
            font-weight: 700;
            width: 100%;
            /* 4px - 8px */
            margin: 0 0 clamp(0.25rem, 1vw, 0.5rem);
            color: var(--bodyTextColorWhite);
            display: block;
        }

        .cs-desc {
            /* 12px - 16px */
            font-size: clamp(0.75rem, 1.9vw, 1rem);
            text-align: center;
            line-height: 1.2em;
            font-weight: 700;
            width: 100%;
            max-width: 12ch;
            margin: 0;
            color: var(--bodyTextColorWhite);
            display: block;
        }
    }
}

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

        .cs-image-group {
            font-size: min(1.2vw, 1em);
            flex: none;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #sbs-1161 {
            background-color: rgba(0, 0, 0, 0.2);
            .cs-title,
            .cs-text,
            .cs-h3,
            .cs-li {
                color: var(--bodyTextColorWhite);
            }

            .cs-text,
            .cs-li {
                opacity: 0.8;
            }

            .cs-graphic {
                opacity: 0.1;
            }
        }
    }
}

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