Code of Stitch

Reverse

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

<section id="sbsr-1007">
    <div class="cs-container">
        <div class="cs-image-group">
            <picture class="cs-picture">
                <!--Desktop-->
                <source media="(min-width: 1024px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/SideBySide/beef2.jpg">
                <!--Tablet-->
                <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/SideBySide/beef2-tablet.jpg">
                <!--Mobile-->
                <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/SideBySide/beef2-m.jpg">
                <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/SideBySide/beef2.jpg" alt="beef" width="522" height="461" aria-hidden="true">
            </picture>
            <img class="cs-seal" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/SideBySide/seal2.svg" alt="seal" width="190" height="182">
        </div>
        <div class="cs-content">
            <span class="cs-topper">Our Story</span>
            <h2 class="cs-title">Who We Are</h2>
            <p class="cs-text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
                <!--Creates the space between p tags on mobile-->
                <span class="cs-spacer"></span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
            </p>
            <a href="" class="cs-button-solid">Reserve Your Table</a>
        </div>
    </div>
</section>

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbsr-1007 {
        padding: var(--sectionPadding);
    }
    #sbsr-1007 .cs-container {
        width: 100%;
        /* changes to 1280px at desktop */
        max-width: 50rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #sbsr-1007 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        /* changes to 522px at desktop */
        max-width: 36.125rem;
        margin-top: -1rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #sbsr-1007 .cs-text {
        margin-bottom: 1rem;
    }
    #sbsr-1007 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbsr-1007 .cs-spacer {
        width: 100%;
        /* 16px - 24px */
        height: clamp(1rem, 3vw, 1.5rem);
        display: block;
    }
    #sbsr-1007 .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 2rem;
        background-color: var(--primary);
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #sbsr-1007 .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;
    }
    #sbsr-1007 .cs-button-solid:hover:before {
        width: 100%;
    }
    #sbsr-1007 .cs-image-group {
        width: 100%;
    }
    #sbsr-1007 .cs-picture {
        width: 100%;
        height: 16.3125rem;
        border: 12px solid #fff;
        background-color: #fff;
        display: block;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        position: relative;
    }
    #sbsr-1007 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes it behave like a background image */
        object-fit: cover;
    }
    #sbsr-1007 .cs-seal {
        /* changes to a clamp(104px - 190px) at desktop */
        width: 6.5rem;
        height: auto;
        /* 104px - 190px */
        /* wrapped clamp in calc function to make the value negative, and multiply by half (.5) the height to it always overlaps the bg image by half its height */
        margin-top: calc(clamp(6.5rem, 12vw, 11.875rem) * -0.5);
        margin-left: auto;
        /* 28px - 120px */
        margin-right: clamp(1.75rem, 10vw, 7.5rem);
        background-color: #fff;
        border: clamp(6px, 0.8vw, 12px) solid #ffffff;
        border-radius: 50%;
        display: block;
        position: relative;
        /* make it rest on top of the bg picture */
        z-index: 10;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #sbsr-1007 .cs-container {
        align-items: flex-start;
    }
    #sbsr-1007 .cs-flex-group {
        flex-direction: row;
    }
    #sbsr-1007 .cs-text {
        columns: 2;
        column-gap: 1.5rem;
    }
    #sbsr-1007 .cs-spacer {
        display: none;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbsr-1007 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        /* 100px - 200px */
        gap: clamp(6.25rem, 13vw, 12.5rem);
    }
    #sbsr-1007 .cs-image-group {
        max-width: 33.875rem;
        display: flex;
        justify-content: flex-end;
        position: relative;
        /* sends it to the right in the 2nd position */
        order: 2;
    }
    #sbsr-1007 .cs-picture {
        height: 28.75rem;
        aspect-ratio: initial;
    }
    #sbsr-1007 .cs-seal {
        /* 104 - 190px */
        width: clamp(6.5rem, 13vw, 11.875rem);
        margin: 0;
        position: absolute;
        top: 50%;
        /* subtract 12px (.75rem) to account for the border */
        left: calc((clamp(6.5rem, 13vw, 11.875rem) * -0.5) + -0.75rem);
        transform: translateY(-50%);
    }
    #sbsr-1007 .cs-content {
        flex: none;
        width: 54%;
        max-width: 33.875rem;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbsr-1007 {
        padding: var(--sectionPadding);
    }
    #sbsr-1007 .cs-container {
        width: 100%;
        /* changes to 1280px at desktop */
        max-width: 50rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #sbsr-1007 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        /* changes to 522px at desktop */
        max-width: 36.125rem;
        margin-top: -1rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #sbsr-1007 .cs-text {
        margin-bottom: 1rem;
    }
    #sbsr-1007 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbsr-1007 .cs-spacer {
        width: 100%;
        /* 16px - 24px */
        height: clamp(1rem, 3vw, 1.5rem);
        display: block;
    }
    #sbsr-1007 .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 2rem;
        background-color: var(--primary);
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #sbsr-1007 .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;
    }
    #sbsr-1007 .cs-button-solid:hover:before {
        width: 100%;
    }
    #sbsr-1007 .cs-image-group {
        width: 100%;
    }
    #sbsr-1007 .cs-picture {
        width: 100%;
        height: 16.3125rem;
        border: 12px solid #fff;
        background-color: #fff;
        display: block;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        position: relative;
    }
    #sbsr-1007 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes it behave like a background image */
        object-fit: cover;
    }
    #sbsr-1007 .cs-seal {
        /* changes to a clamp(104px - 190px) at desktop */
        width: 6.5rem;
        height: auto;
        /* 104px - 190px */
        /* wrapped clamp in calc function to make the value negative, and multiply by half (.5) the height to it always overlaps the bg image by half its height */
        margin-top: calc(clamp(6.5rem, 12vw, 11.875rem) * -0.5);
        margin-left: auto;
        /* 28px - 120px */
        margin-right: clamp(1.75rem, 10vw, 7.5rem);
        background-color: #fff;
        border: clamp(6px, 0.8vw, 12px) solid #ffffff;
        border-radius: 50%;
        display: block;
        position: relative;
        /* make it rest on top of the bg picture */
        z-index: 10;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #sbsr-1007 .cs-container {
        align-items: flex-start;
    }
    #sbsr-1007 .cs-flex-group {
        flex-direction: row;
    }
    #sbsr-1007 .cs-text {
        columns: 2;
        column-gap: 1.5rem;
    }
    #sbsr-1007 .cs-spacer {
        display: none;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbsr-1007 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        /* 100px - 200px */
        gap: clamp(6.25rem, 13vw, 12.5rem);
    }
    #sbsr-1007 .cs-image-group {
        max-width: 33.875rem;
        display: flex;
        justify-content: flex-end;
        position: relative;
        /* sends it to the right in the 2nd position */
        order: 2;
    }
    #sbsr-1007 .cs-picture {
        height: 28.75rem;
        aspect-ratio: initial;
    }
    #sbsr-1007 .cs-seal {
        /* 104 - 190px */
        width: clamp(6.5rem, 13vw, 11.875rem);
        margin: 0;
        position: absolute;
        top: 50%;
        /* subtract 12px (.75rem) to account for the border */
        left: calc((clamp(6.5rem, 13vw, 11.875rem) * -0.5) + -0.75rem);
        transform: translateY(-50%);
    }
    #sbsr-1007 .cs-content {
        flex: none;
        width: 54%;
        max-width: 33.875rem;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #sbsr-1007 .cs-title,
    body.dark-mode #sbsr-1007 .cs-text {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #sbsr-1007 .cs-text {
        opacity: 0.8;
    }
    body.dark-mode #sbsr-1007 .cs-picture {
        border-color: var(--dark);
        background-color: var(--dark);
    }
    body.dark-mode #sbsr-1007 .cs-seal {
        border-color: var(--dark);
        background-color: var(--dark);
    }
}

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

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

        .cs-container {
            width: 100%;
            /* changes to 1280px at desktop */
            max-width: (800/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%;
            /* changes to 522px at desktop */
            max-width: (578/16rem);
            margin-top: (-16/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-spacer {
            width: 100%;
            /* 16px - 24px */
            height: clamp(1rem, 3vw, 1.5rem);
            display: block;
        }

        .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 (32/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 {
            width: 100%;
        }

        .cs-picture {
            width: 100%;
            height: (261/16rem);
            border: 12px solid #fff;
            background-color: #fff;
            display: block;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
            position: relative;

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

        .cs-seal {
            /* changes to a clamp(104px - 190px) at desktop */
            width: (104/16rem);
            height: auto;
            /* 104px - 190px */
            /* wrapped clamp in calc function to make the value negative, and multiply by half (.5) the height to it always overlaps the bg image by half its height */
            margin-top: ~"calc(clamp(6.5rem, 12vw, 11.875rem)*-.5)";
            margin-left: auto;
            /* 28px - 120px */
            margin-right: clamp(1.75rem, 10vw, 7.5rem);
            background-color: #fff;
            border: clamp(6px, 0.8vw, 12px) solid #fff;
            border-radius: 50%;
            display: block;
            position: relative;
            /* make it rest on top of the bg picture */
            z-index: 10;
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #sbsr-1007 {
        .cs-container {
            align-items: flex-start;
        }
        .cs-flex-group {
            flex-direction: row;
        }

        .cs-text {
            columns: 2;
            column-gap: (24/16rem);
        }

        .cs-spacer {
            display: none;
        }
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbsr-1007 {
        .cs-container {
            max-width: (1280/16rem);
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            /* 100px - 200px */
            gap: clamp(6.25rem, 13vw, 12.5rem);
        }

        .cs-image-group {
            max-width: (542/16rem);
            display: flex;
            justify-content: flex-end;
            position: relative;
            /* sends it to the right in the 2nd position */
            order: 2;
        }

        .cs-picture {
            height: (460/16rem);
            aspect-ratio: initial;
        }

        .cs-seal {
            /* 104 - 190px */
            width: clamp(6.5rem, 13vw, 11.875rem);
            margin: 0;
            position: absolute;
            top: 50%;
            /* subtract 12px (.75rem) to account for the border */
            left: ~"calc((clamp(6.5rem, 13vw, 11.875rem)*-.5) + -.75rem)";
            transform: translateY(-50%);
        }

        .cs-content {
            flex: none;
            width: 54%;
            max-width: (542/16rem);
        }
    }
}

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

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

        .cs-container {
            width: 100%;
            /* changes to 1280px at desktop */
            max-width: (800/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%;
            /* changes to 522px at desktop */
            max-width: (578/16rem);
            margin-top: (-16/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-spacer {
            width: 100%;
            /* 16px - 24px */
            height: clamp(1rem, 3vw, 1.5rem);
            display: block;
        }

        .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 (32/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 {
            width: 100%;
        }

        .cs-picture {
            width: 100%;
            height: (261/16rem);
            border: 12px solid #fff;
            background-color: #fff;
            display: block;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
            position: relative;

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

        .cs-seal {
            /* changes to a clamp(104px - 190px) at desktop */
            width: (104/16rem);
            height: auto;
            /* 104px - 190px */
            /* wrapped clamp in calc function to make the value negative, and multiply by half (.5) the height to it always overlaps the bg image by half its height */
            margin-top: ~"calc(clamp(6.5rem, 12vw, 11.875rem)*-.5)";
            margin-left: auto;
            /* 28px - 120px */
            margin-right: clamp(1.75rem, 10vw, 7.5rem);
            background-color: #fff;
            border: clamp(6px, 0.8vw, 12px) solid #fff;
            border-radius: 50%;
            display: block;
            position: relative;
            /* make it rest on top of the bg picture */
            z-index: 10;
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #sbsr-1007 {
        .cs-container {
            align-items: flex-start;
        }
        .cs-flex-group {
            flex-direction: row;
        }

        .cs-text {
            columns: 2;
            column-gap: (24/16rem);
        }

        .cs-spacer {
            display: none;
        }
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbsr-1007 {
        .cs-container {
            max-width: (1280/16rem);
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            /* 100px - 200px */
            gap: clamp(6.25rem, 13vw, 12.5rem);
        }

        .cs-image-group {
            max-width: (542/16rem);
            display: flex;
            justify-content: flex-end;
            position: relative;
            /* sends it to the right in the 2nd position */
            order: 2;
        }

        .cs-picture {
            height: (460/16rem);
            aspect-ratio: initial;
        }

        .cs-seal {
            /* 104 - 190px */
            width: clamp(6.5rem, 13vw, 11.875rem);
            margin: 0;
            position: absolute;
            top: 50%;
            /* subtract 12px (.75rem) to account for the border */
            left: ~"calc((clamp(6.5rem, 13vw, 11.875rem)*-.5) + -.75rem)";
            transform: translateY(-50%);
        }

        .cs-content {
            flex: none;
            width: 54%;
            max-width: (542/16rem);
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #sbsr-1007 {
            .cs-title,
            .cs-text {
                color: var(--bodyTextColorWhite);
            }

            .cs-text {
                opacity: 0.8;
            }

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

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

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

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

        .cs-container {
            width: 100%;
            /* changes to 1280px at desktop */
            max-width: calc(800 / 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%;
            /* changes to 522px at desktop */
            max-width: calc(578 / 16 * 1rem);
            margin-top: calc(-16 / 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-spacer {
            width: 100%;
            /* 16px - 24px */
            height: clamp(1rem, 3vw, 1.5rem);
            display: block;
        }

        .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(32 / 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 {
            width: 100%;
        }

        .cs-picture {
            width: 100%;
            height: calc(261 / 16 * 1rem);
            border: 12px solid #fff;
            background-color: #fff;
            display: block;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
            position: relative;

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

        .cs-seal {
            /* changes to a clamp(104px - 190px) at desktop */
            width: calc(104 / 16 * 1rem);
            height: auto;
            /* 104px - 190px */
            /* wrapped clamp in calc function to make the value negative, and multiply by half (.5) the height to it always overlaps the bg image by half its height */
            margin-top: calc(clamp(6.5rem, 12vw, 11.875rem) * -0.5);
            margin-left: auto;
            /* 28px - 120px */
            margin-right: clamp(1.75rem, 10vw, 7.5rem);
            background-color: #fff;
            border: clamp(6px, 0.8vw, 12px) solid #fff;
            border-radius: 50%;
            display: block;
            position: relative;
            /* make it rest on top of the bg picture */
            z-index: 10;
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #sbsr-1007 {
        .cs-container {
            align-items: flex-start;
        }
        .cs-flex-group {
            flex-direction: row;
        }

        .cs-text {
            columns: 2;
            column-gap: calc(24 / 16 * 1rem);
        }

        .cs-spacer {
            display: none;
        }
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbsr-1007 {
        .cs-container {
            max-width: calc(1280 / 16 * 1rem);
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            /* 100px - 200px */
            gap: clamp(6.25rem, 13vw, 12.5rem);
        }

        .cs-image-group {
            max-width: calc(542 / 16 * 1rem);
            display: flex;
            justify-content: flex-end;
            position: relative;
            /* sends it to the right in the 2nd position */
            order: 2;
        }

        .cs-picture {
            height: calc(460 / 16 * 1rem);
            aspect-ratio: initial;
        }

        .cs-seal {
            /* 104 - 190px */
            width: clamp(6.5rem, 13vw, 11.875rem);
            margin: 0;
            position: absolute;
            top: 50%;
            /* subtract 12px (.75rem) to account for the border */
            left: calc((clamp(6.5rem, 13vw, 11.875rem) * -0.5) + -0.75rem);
            transform: translateY(-50%);
        }

        .cs-content {
            flex: none;
            width: 54%;
            max-width: calc(542 / 16 * 1rem);
        }
    }
}

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

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

        .cs-container {
            width: 100%;
            /* changes to 1280px at desktop */
            max-width: calc(800 / 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%;
            /* changes to 522px at desktop */
            max-width: calc(578 / 16 * 1rem);
            margin-top: calc(-16 / 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-spacer {
            width: 100%;
            /* 16px - 24px */
            height: clamp(1rem, 3vw, 1.5rem);
            display: block;
        }

        .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(32 / 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 {
            width: 100%;
        }

        .cs-picture {
            width: 100%;
            height: calc(261 / 16 * 1rem);
            border: 12px solid #fff;
            background-color: #fff;
            display: block;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
            position: relative;

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

        .cs-seal {
            /* changes to a clamp(104px - 190px) at desktop */
            width: calc(104 / 16 * 1rem);
            height: auto;
            /* 104px - 190px */
            /* wrapped clamp in calc function to make the value negative, and multiply by half (.5) the height to it always overlaps the bg image by half its height */
            margin-top: calc(clamp(6.5rem, 12vw, 11.875rem) * -0.5);
            margin-left: auto;
            /* 28px - 120px */
            margin-right: clamp(1.75rem, 10vw, 7.5rem);
            background-color: #fff;
            border: clamp(6px, 0.8vw, 12px) solid #fff;
            border-radius: 50%;
            display: block;
            position: relative;
            /* make it rest on top of the bg picture */
            z-index: 10;
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #sbsr-1007 {
        .cs-container {
            align-items: flex-start;
        }
        .cs-flex-group {
            flex-direction: row;
        }

        .cs-text {
            columns: 2;
            column-gap: calc(24 / 16 * 1rem);
        }

        .cs-spacer {
            display: none;
        }
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbsr-1007 {
        .cs-container {
            max-width: calc(1280 / 16 * 1rem);
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            /* 100px - 200px */
            gap: clamp(6.25rem, 13vw, 12.5rem);
        }

        .cs-image-group {
            max-width: calc(542 / 16 * 1rem);
            display: flex;
            justify-content: flex-end;
            position: relative;
            /* sends it to the right in the 2nd position */
            order: 2;
        }

        .cs-picture {
            height: calc(460 / 16 * 1rem);
            aspect-ratio: initial;
        }

        .cs-seal {
            /* 104 - 190px */
            width: clamp(6.5rem, 13vw, 11.875rem);
            margin: 0;
            position: absolute;
            top: 50%;
            /* subtract 12px (.75rem) to account for the border */
            left: calc((clamp(6.5rem, 13vw, 11.875rem) * -0.5) + -0.75rem);
            transform: translateY(-50%);
        }

        .cs-content {
            flex: none;
            width: 54%;
            max-width: calc(542 / 16 * 1rem);
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #sbsr-1007 {
            .cs-title,
            .cs-text {
                color: var(--bodyTextColorWhite);
            }

            .cs-text {
                opacity: 0.8;
            }

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

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

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

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

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

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

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

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: (4/16rem);
    display: block;
}

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

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

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

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: calc(4 / 16 * 1rem);
    display: block;
}

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

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