Code of Stitch

Standard

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

<section id="sbs-1431">
    <div class="cs-container">
        <div class="cs-image-group">
            <!-- Person Picture -->
            <!-- To make your own crops of people, use this tool to remove the backgorund of images https://www.remove.bg/ -->
            <picture class="cs-person">
                <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/volunteer.png">
                <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/volunteer.png">
                <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/volunteer.png" alt="volunteer" width="702" height="617" aria-hidden="true">
            </picture>
        </div>
        <div class="cs-content">
            <span class="cs-topper">Giving Back</span>
            <h2 class="cs-title">How To Donate Us</h2>
            <p class="cs-text">
                Our impact is about more than moving money to where it’s needed most it’s also about helping nonprofits access information and ideas that will help them listen, learn, and grow.
            </p>
            <ul class="cs-card-group">
                <li class="cs-li">
                    <picture class="cs-li-picture">
                        <img class="cs-li-icon" aria-hidden="true" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/volunteer1.svg" decoding="async" alt="icon" width="32" height="32" loading="lazy">
                    </picture>
                    <div class="cs-flex">
                        <h3 class="cs-h3">Become a Volunteer</h3>
                        <p class="cs-li-text">
                            It’s no secret that one person alone cannot overcome the greatest humanitarian crises. It truly takes all of us.
                        </p>
                    </div>
                </li>
                <li class="cs-li">
                    <picture class="cs-li-picture">
                        <img class="cs-li-icon" aria-hidden="true" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/volunteer2.svg" decoding="async" alt="icon" width="32" height="32" loading="lazy">
                    </picture>
                    <div class="cs-flex">
                        <h3 class="cs-h3">Quick Fundraise</h3>
                        <p class="cs-li-text">
                            It’s no secret that one person alone cannot overcome the greatest humanitarian crises. It truly takes all of us.
                        </p>
                    </div>
                </li>
                <li class="cs-li">
                    <picture class="cs-li-picture">
                        <img class="cs-li-icon" aria-hidden="true" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/volunteer3.svg" decoding="async" alt="icon" width="32" height="32" loading="lazy">
                    </picture>
                    <div class="cs-flex">
                        <h3 class="cs-h3">Start Donating</h3>
                        <p class="cs-li-text">
                            It’s no secret that one person alone cannot overcome the greatest humanitarian crises. It truly takes all of us.
                        </p>
                    </div>
                </li>
            </ul>             
        </div>
    </div>
</section>

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-1431 {
    padding: var(--sectionPadding);
    overflow: hidden;
  }
  #sbs-1431 .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);
    position: relative;
  }
  #sbs-1431 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 32.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbs-1431 .cs-text {
    margin-bottom: 1rem;
  }
  #sbs-1431 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-1431 .cs-card-group {
    width: 100%;
    max-width: 39.375rem;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 1.5rem;
  }
  #sbs-1431 .cs-li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.25rem);
  }
  #sbs-1431 .cs-li-picture {
    width: 5rem;
    height: 5rem;
    margin: 0;
    border-radius: 50%;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
    z-index: 1;
  }
  #sbs-1431 .cs-li-picture:before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: .1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
  #sbs-1431 .cs-li-icon {
    width: 2rem;
    height: auto;
    display: block;
  }
  #sbs-1431 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    text-align: left;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
  }
  #sbs-1431 .cs-li-text {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: left;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #sbs-1431 .cs-image-group {
    /* scale down the whole section */
    font-size: min(1.6vw, .6em);
    /* aligns the .cs-image-group to the right */
    text-align: right;
    /* using ems so we can scale this container with a font size */
    width: auto;
    min-width: 37.5em;
    max-width: 43.875rem;
    /* changes auto at desktop */
    height: 38.625em;
    /* sends it to the right in the 2nd position */
    order: 2;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
  }
  #sbs-1431 .cs-person {
    height: 100%;
    width: auto;
    /* allows text align to move it left or right */
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
  }
  #sbs-1431 .cs-person img {
    width: auto;
    height: 100%;
    margin: 0;
    display: block;
    object-fit: contain;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-1431 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: flex-end;
    position: relative;
  }
  #sbs-1431 .cs-content {
    width: 50%;
  }
  #sbs-1431 .cs-image-group {
    font-size: min(1.3vw, 1em);
    flex: none;
    /* sends it to the left in the 1st position */
    order: -1;
    /* pushes person image to the right of the container */
    justify-content: flex-end;
    position: absolute;
    /* changes to 0 at large desktop */
    left: -6.25rem;
    bottom: -6.3125rem;
  }
}
/* Large Desktop 1300px */
@media only screen and (min-width: 81.25rem) {
  #sbs-1431 .cs-image-group {
    font-size: min(1.2vw, 1em);
    height: auto;
    margin-right: 1.875rem;
    /* pushes person image to the right of the container */
    justify-content: flex-end;
    /* pushed person image to the bottom of the container */
    align-items: flex-end;
    position: absolute;
    right: 50%;
    top: 0;
    /* same amount as the padding bottom on the #sbs*/
    bottom: -6.25rem;
  }
  #sbs-1431 .cs-content {
    /* pushes it to the right side of the container */
    margin-left: auto;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-1431 {
    padding: var(--sectionPadding);
    overflow: hidden;
  }
  #sbs-1431 .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);
    position: relative;
  }
  #sbs-1431 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 32.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbs-1431 .cs-text {
    margin-bottom: 1rem;
  }
  #sbs-1431 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-1431 .cs-card-group {
    width: 100%;
    max-width: 39.375rem;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 1.5rem;
  }
  #sbs-1431 .cs-li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.25rem);
  }
  #sbs-1431 .cs-li-picture {
    width: 5rem;
    height: 5rem;
    margin: 0;
    border-radius: 50%;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
    z-index: 1;
  }
  #sbs-1431 .cs-li-picture:before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: .1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
  #sbs-1431 .cs-li-icon {
    width: 2rem;
    height: auto;
    display: block;
  }
  #sbs-1431 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    text-align: left;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
  }
  #sbs-1431 .cs-li-text {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: left;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #sbs-1431 .cs-image-group {
    /* scale down the whole section */
    font-size: min(1.6vw, .6em);
    /* aligns the .cs-image-group to the right */
    text-align: right;
    /* using ems so we can scale this container with a font size */
    width: auto;
    min-width: 37.5em;
    max-width: 43.875rem;
    /* changes auto at desktop */
    height: 38.625em;
    /* sends it to the right in the 2nd position */
    order: 2;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
  }
  #sbs-1431 .cs-person {
    height: 100%;
    width: auto;
    /* allows text align to move it left or right */
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
  }
  #sbs-1431 .cs-person img {
    width: auto;
    height: 100%;
    margin: 0;
    display: block;
    object-fit: contain;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-1431 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: flex-end;
    position: relative;
  }
  #sbs-1431 .cs-content {
    width: 50%;
  }
  #sbs-1431 .cs-image-group {
    font-size: min(1.3vw, 1em);
    flex: none;
    /* sends it to the left in the 1st position */
    order: -1;
    /* pushes person image to the right of the container */
    justify-content: flex-end;
    position: absolute;
    /* changes to 0 at large desktop */
    left: -6.25rem;
    bottom: -6.3125rem;
  }
}
/* Large Desktop 1300px */
@media only screen and (min-width: 81.25rem) {
  #sbs-1431 .cs-image-group {
    font-size: min(1.2vw, 1em);
    height: auto;
    margin-right: 1.875rem;
    /* pushes person image to the right of the container */
    justify-content: flex-end;
    /* pushed person image to the bottom of the container */
    align-items: flex-end;
    position: absolute;
    right: 50%;
    top: 0;
    /* same amount as the padding bottom on the #sbs*/
    bottom: -6.25rem;
  }
  #sbs-1431 .cs-content {
    /* pushes it to the right side of the container */
    margin-left: auto;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs-1431 .cs-title,
  body.dark-mode #sbs-1431 .cs-text,
  body.dark-mode #sbs-1431 .cs-li,
  body.dark-mode #sbs-1431 .cs-h3,
  body.dark-mode #sbs-1431 .cs-li-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs-1431 .cs-li-text,
  body.dark-mode #sbs-1431 .cs-text {
    opacity: .8;
  }
  body.dark-mode #sbs-1431 .cs-li-picture {
    background-color: var(--dark);
  }
}

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

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

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

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: left;
            width: 100%;
            max-width: (522/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-card-group {
            width: 100%;
            max-width: (630/16rem);
            margin: 0;
            padding: 0;
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            gap: (24/16rem);
        }
        
        .cs-li {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            /* 16px - 20px */
            gap: clamp(1rem, 2.5vw, 1.25rem);
        }

        .cs-li-picture {
            width: (80/16rem);
            height: (80/16rem);
            margin: 0;
            border-radius: 50%;
            background-color: #fff;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            /* prevents flexbox from squishing it */
            flex: none;
            position: relative;
            z-index: 1;

            &:before {
                content: '';
                width: 100%;
                height: 100%;
                background: var(--primary);
                opacity: .1;
                position: absolute;
                display: block;
                top: 0;
                left: 0;
            }
        }

        .cs-li-icon {
            width: (32/16rem);
            height: auto;
            display: block;
        }

        .cs-h3 {
            font-size: (20/16rem);
            line-height: 1.2em;
            font-weight: 700;
            text-align: left;
            margin: 0 0 (12/16rem) 0;
            color: var(--headerColor);
        }

        .cs-li-text {
            font-size: (16/16rem);
            line-height: 1.5em;
            text-align: left;
            margin: 0;
            color: var(--bodyTextColor);
        }

        .cs-image-group {
            /* scale down the whole section */
            font-size: ~"min(1.6vw, .6em)";
            /* aligns the .cs-image-group to the right */
            text-align: right;
            /* using ems so we can scale this container with a font size */
            width: auto;
            min-width: (600/16em);
            max-width: (702/16rem);
            /* changes auto at desktop */
            height: (618/16em);
            /* sends it to the right in the 2nd position */
            order: 2;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            position: relative;
        }

        .cs-person {
            height: 100%;
            width: auto;
            /* allows text align to move it left or right */
            display: inline-flex;
            align-items: flex-end;
            justify-content: center;
            position: relative;

            img {
                width: auto;
                height: 100%;
                margin: 0;
                display: block;
                object-fit: contain;
            }
        }
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbs-1431 {
        .cs-container {
            max-width: (1280/16rem);
            flex-direction: row;
            justify-content: flex-end;
            position: relative;
        }

        .cs-content {
            width: 50%;
        }

        .cs-image-group {
            font-size: ~"min(1.3vw, 1em)";
            flex: none;
            /* sends it to the left in the 1st position */
            order: -1;
            /* pushes person image to the right of the container */
            justify-content: flex-end;
            position: absolute;
            /* changes to 0 at large desktop */
            left: (-100/16rem);
            bottom: (-101/16rem);
        }
    }
}

/* Large Desktop 1300px */
@media only screen and (min-width: 81.25rem) {
    #sbs-1431 {
        .cs-image-group {
            font-size: ~"min(1.2vw, 1em)";
            height: auto;
            margin-right: (30/16rem);
            /* pushes person image to the right of the container */
            justify-content: flex-end;
            /* pushed person image to the bottom of the container */
            align-items: flex-end;
            position: absolute;
            right: 50%;
            top: 0;
            /* same amount as the padding bottom on the #sbs*/
            bottom: (-100/16rem);
        }

        .cs-content {
            /* pushes it to the right side of the container */
            margin-left: auto;
        }
    }
}

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

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

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

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: left;
            width: 100%;
            max-width: (522/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-card-group {
            width: 100%;
            max-width: (630/16rem);
            margin: 0;
            padding: 0;
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            gap: (24/16rem);
        }
        
        .cs-li {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            /* 16px - 20px */
            gap: clamp(1rem, 2.5vw, 1.25rem);
        }

        .cs-li-picture {
            width: (80/16rem);
            height: (80/16rem);
            margin: 0;
            border-radius: 50%;
            background-color: #fff;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            /* prevents flexbox from squishing it */
            flex: none;
            position: relative;
            z-index: 1;

            &:before {
                content: '';
                width: 100%;
                height: 100%;
                background: var(--primary);
                opacity: .1;
                position: absolute;
                display: block;
                top: 0;
                left: 0;
            }
        }

        .cs-li-icon {
            width: (32/16rem);
            height: auto;
            display: block;
        }

        .cs-h3 {
            font-size: (20/16rem);
            line-height: 1.2em;
            font-weight: 700;
            text-align: left;
            margin: 0 0 (12/16rem) 0;
            color: var(--headerColor);
        }

        .cs-li-text {
            font-size: (16/16rem);
            line-height: 1.5em;
            text-align: left;
            margin: 0;
            color: var(--bodyTextColor);
        }

        .cs-image-group {
            /* scale down the whole section */
            font-size: ~"min(1.6vw, .6em)";
            /* aligns the .cs-image-group to the right */
            text-align: right;
            /* using ems so we can scale this container with a font size */
            width: auto;
            min-width: (600/16em);
            max-width: (702/16rem);
            /* changes auto at desktop */
            height: (618/16em);
            /* sends it to the right in the 2nd position */
            order: 2;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            position: relative;
        }

        .cs-person {
            height: 100%;
            width: auto;
            /* allows text align to move it left or right */
            display: inline-flex;
            align-items: flex-end;
            justify-content: center;
            position: relative;

            img {
                width: auto;
                height: 100%;
                margin: 0;
                display: block;
                object-fit: contain;
            }
        }
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbs-1431 {
        .cs-container {
            max-width: (1280/16rem);
            flex-direction: row;
            justify-content: flex-end;
            position: relative;
        }

        .cs-content {
            width: 50%;
        }

        .cs-image-group {
            font-size: ~"min(1.3vw, 1em)";
            flex: none;
            /* sends it to the left in the 1st position */
            order: -1;
            /* pushes person image to the right of the container */
            justify-content: flex-end;
            position: absolute;
            /* changes to 0 at large desktop */
            left: (-100/16rem);
            bottom: (-101/16rem);
        }
    }
}

/* Large Desktop 1300px */
@media only screen and (min-width: 81.25rem) {
    #sbs-1431 {
        .cs-image-group {
            font-size: ~"min(1.2vw, 1em)";
            height: auto;
            margin-right: (30/16rem);
            /* pushes person image to the right of the container */
            justify-content: flex-end;
            /* pushed person image to the bottom of the container */
            align-items: flex-end;
            position: absolute;
            right: 50%;
            top: 0;
            /* same amount as the padding bottom on the #sbs*/
            bottom: (-100/16rem);
        }

        .cs-content {
            /* pushes it to the right side of the container */
            margin-left: auto;
        }
    }
}

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

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

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

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

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

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

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: left;
            width: 100%;
            max-width: calc(522 / 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-card-group {
            width: 100%;
            max-width: calc(630 / 16 * 1rem);
            margin: 0;
            padding: 0;
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            gap: calc(24 / 16 * 1rem);
        }
        
        .cs-li {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            /* 16px - 20px */
            gap: clamp(1rem, 2.5vw, 1.25rem);
        }

        .cs-li-picture {
            width: calc(80 / 16 * 1rem);
            height: calc(80 / 16 * 1rem);
            margin: 0;
            border-radius: 50%;
            background-color: #fff;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            /* prevents flexbox from squishing it */
            flex: none;
            position: relative;
            z-index: 1;

            &:before {
                content: '';
                width: 100%;
                height: 100%;
                background: var(--primary);
                opacity: .1;
                position: absolute;
                display: block;
                top: 0;
                left: 0;
            }
        }

        .cs-li-icon {
            width: calc(32 / 16 * 1rem);
            height: auto;
            display: block;
        }

        .cs-h3 {
            font-size: calc(20 / 16 * 1rem);
            line-height: 1.2em;
            font-weight: 700;
            text-align: left;
            margin: 0 0 calc(12 / 16 * 1rem) 0;
            color: var(--headerColor);
        }

        .cs-li-text {
            font-size: calc(16 / 16 * 1rem);
            line-height: 1.5em;
            text-align: left;
            margin: 0;
            color: var(--bodyTextColor);
        }

        .cs-image-group {
            /* scale down the whole section */
            font-size: min(1.6vw, .6em);
            /* aligns the .cs-image-group to the right */
            text-align: right;
            /* using ems so we can scale this container with a font size */
            width: auto;
            min-width: calc(600 / 16 * 1em);
            max-width: calc(702 / 16 * 1em);
            /* changes auto at desktop */
            height: calc(618 / 16 * 1em);
            /* sends it to the right in the 2nd position */
            order: 2;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            position: relative;
        }

        .cs-person {
            height: 100%;
            width: auto;
            /* allows text align to move it left or right */
            display: inline-flex;
            align-items: flex-end;
            justify-content: center;
            position: relative;

            img {
                width: auto;
                height: 100%;
                margin: 0;
                display: block;
                object-fit: contain;
            }
        }
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbs-1431 {
        .cs-container {
            max-width: calc(1280 / 16 * 1rem);
            flex-direction: row;
            justify-content: flex-end;
            position: relative;
        }

        .cs-content {
            width: 50%;
        }

        .cs-image-group {
            font-size: min(1.3vw, 1em);
            flex: none;
            /* sends it to the left in the 1st position */
            order: -1;
            /* pushes person image to the right of the container */
            justify-content: flex-end;
            position: absolute;
            /* changes to 0 at large desktop */
            left: calc(-100 / 16 * 1rem);
            bottom: calc(-101 / 16 * 1rem);
        }
    }
}

/* Large Desktop 1300px */
@media only screen and (min-width: 81.25rem) {
    #sbs-1431 {
        .cs-image-group {
            font-size: min(1.2vw, 1em);
            height: auto;
            margin-right: calc(30 / 16 * 1rem);
            /* pushes person image to the right of the container */
            justify-content: flex-end;
            /* pushed person image to the bottom of the container */
            align-items: flex-end;
            position: absolute;
            right: 50%;
            top: 0;
            /* same amount as the padding bottom on the #sbs*/
            bottom: calc(-100 / 16 * 1em);
        }

        .cs-content {
            /* pushes it to the right side of the container */
            margin-left: auto;
        }
    }
}

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

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

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

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: left;
            width: 100%;
            max-width: calc(522 / 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-card-group {
            width: 100%;
            max-width: calc(630 / 16 * 1rem);
            margin: 0;
            padding: 0;
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            gap: calc(24 / 16 * 1rem);
        }
        
        .cs-li {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            /* 16px - 20px */
            gap: clamp(1rem, 2.5vw, 1.25rem);
        }

        .cs-li-picture {
            width: calc(80 / 16 * 1rem);
            height: calc(80 / 16 * 1rem);
            margin: 0;
            border-radius: 50%;
            background-color: #fff;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            /* prevents flexbox from squishing it */
            flex: none;
            position: relative;
            z-index: 1;

            &:before {
                content: '';
                width: 100%;
                height: 100%;
                background: var(--primary);
                opacity: .1;
                position: absolute;
                display: block;
                top: 0;
                left: 0;
            }
        }

        .cs-li-icon {
            width: calc(32 / 16 * 1rem);
            height: auto;
            display: block;
        }

        .cs-h3 {
            font-size: calc(20 / 16 * 1rem);
            line-height: 1.2em;
            font-weight: 700;
            text-align: left;
            margin: 0 0 calc(12 / 16 * 1rem) 0;
            color: var(--headerColor);
        }

        .cs-li-text {
            font-size: calc(16 / 16 * 1rem);
            line-height: 1.5em;
            text-align: left;
            margin: 0;
            color: var(--bodyTextColor);
        }

        .cs-image-group {
            /* scale down the whole section */
            font-size: min(1.6vw, .6em);
            /* aligns the .cs-image-group to the right */
            text-align: right;
            /* using ems so we can scale this container with a font size */
            width: auto;
            min-width: calc(600 / 16 * 1em);
            max-width: calc(702 / 16 * 1em);
            /* changes auto at desktop */
            height: calc(618 / 16 * 1em);
            /* sends it to the right in the 2nd position */
            order: 2;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            position: relative;
        }

        .cs-person {
            height: 100%;
            width: auto;
            /* allows text align to move it left or right */
            display: inline-flex;
            align-items: flex-end;
            justify-content: center;
            position: relative;

            img {
                width: auto;
                height: 100%;
                margin: 0;
                display: block;
                object-fit: contain;
            }
        }
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbs-1431 {
        .cs-container {
            max-width: calc(1280 / 16 * 1rem);
            flex-direction: row;
            justify-content: flex-end;
            position: relative;
        }

        .cs-content {
            width: 50%;
        }

        .cs-image-group {
            font-size: min(1.3vw, 1em);
            flex: none;
            /* sends it to the left in the 1st position */
            order: -1;
            /* pushes person image to the right of the container */
            justify-content: flex-end;
            position: absolute;
            /* changes to 0 at large desktop */
            left: calc(-100 / 16 * 1rem);
            bottom: calc(-101 / 16 * 1rem);
        }
    }
}

/* Large Desktop 1300px */
@media only screen and (min-width: 81.25rem) {
    #sbs-1431 {
        .cs-image-group {
            font-size: min(1.2vw, 1em);
            height: auto;
            margin-right: calc(30 / 16 * 1rem);
            /* pushes person image to the right of the container */
            justify-content: flex-end;
            /* pushed person image to the bottom of the container */
            align-items: flex-end;
            position: absolute;
            right: 50%;
            top: 0;
            /* same amount as the padding bottom on the #sbs*/
            bottom: calc(-100 / 16 * 1em);
        }

        .cs-content {
            /* pushes it to the right side of the container */
            margin-left: auto;
        }
    }
}

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

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

            .cs-li-picture {
                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);
}