Code of Stitch

Side By Side

<!-- ============================================ -->
<!--                Why Choose Us                 -->
<!-- ============================================ -->

<section id="why-choose-1634">
    <div class="cs-container">
        <div class="cs-content">
            <div class="cs-flex">
                <span class="cs-topper">Why Choose Us</span>
                <h2 class="cs-title">Grow Your Business with Our New Bold Agency</h2>
            </div>
            <p class="cs-text">
                Aqestic recusandae laudantium optio amet a quisquam saepe aliquid, voluptate praesentium dicta fuga dolor error perspiciatis voluptatem eum cupiditate totam reiciendis quam minus inventore sint rem impedit esse quasi Tenetur sed reprehenderit earum a magni aliquid blanditiis dolores, veritatis soluta autem beatae officia expedita ipsum rerum doloribus sit provident delectus.
            </p>
        </div>  
        <div class="cs-wrapper">
            <ul class="cs-card-group">
                <li class="cs-item">
                    <picture class="cs-icon-wrapper">
                        <img class="cs-icon"
                                src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/chat-gold.svg"
                                loading="lazy" decoding="async" alt="icon" width="32" height="32" aria-hidden="true">
                    </picture>
                    <!-- Text Grouped For Flexbox-->
                    <div class="cs-text-group">
                        <h3 class="cs-h3">Answer a Few Questions</h3>
                        <p class="cs-item-text">
                            We welcome and celebrate different perspectives to help our firm, our clients and our people adip iscing elit achieve.
                        </p>
                    </div>
                </li>
                <li class="cs-item">
                    <picture class="cs-icon-wrapper">
                        <img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/call-gold.svg"
                                loading="lazy" decoding="async" alt="icon" width="32" height="32" aria-hidden="true">
                    </picture>
                    <!-- Text Grouped For Flexbox-->
                    <div class="cs-text-group">
                        <h3 class="cs-h3">Complimentary Call</h3>
                        <p class="cs-item-text">
                            We welcome and celebrate different perspectives to help our firm, our clients and our people adip iscing elit achieve.
                        </p>
                    </div>
                </li>
                <li class="cs-item">
                    <picture class="cs-icon-wrapper">
                        <img class="cs-icon"
                                src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/money-gold.svg"
                                loading="lazy" decoding="async" alt="icon" width="32" height="32" aria-hidden="true">
                    </picture>
                    <!-- Text Grouped For Flexbox-->
                    <div class="cs-text-group">
                        <h3 class="cs-h3">Grow Your Wealth</h3>
                        <p class="cs-item-text">
                            We welcome and celebrate different perspectives to help our firm, our clients and our people adip iscing elit achieve.
                        </p>
                    </div>
                </li>
            </ul>
            <div class="cs-image-group">
                <div class="cs-picture-wrapper">
                    <picture class="cs-picture cs-picture1">
                        <!--Mobile Image-->
                        <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting9.jpg">
                        <!--Tablet and above Image-->
                        <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting9.jpg">
                        <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/meeting9.jpg" alt="meeting" width="434" height="414">
                    </picture>
                    <div class="cs-box">
                        <span class="cs-header">Attorney Growth</span>
                        <span class="cs-desc">Aqestic recusandae lauda </span>
                    </div>
                </div>
                <picture class="cs-picture cs-picture2">
                    <!--Mobile Image-->
                    <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/computer.jpg">
                    <!--Tablet and above Image-->
                    <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/computer.jpg">
                    <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/computer.jpg" alt="on computer" width="197" height="197">
                </picture>
            </div>
        </div>
    </div>
</section>

/*-- -------------------------- -->
<---      Why Choose Us         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-1634 {
    padding: var(--sectionPadding);
  }
  #why-choose-1634 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 100px */
    gap: clamp(3rem, 10vw, 6.25rem);
  }
  #why-choose-1634 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #why-choose-1634 .cs-flex {
    max-width: 38.5rem;
  }
  #why-choose-1634 .cs-title {
    max-width: 20ch;
  }
  #why-choose-1634 .cs-text {
    margin-bottom: 1rem;
  }
  #why-choose-1634 .cs-text:last-of-type {
    margin-bottom: 0;
  }
  #why-choose-1634 .cs-wrapper {
    width: 100%;
  }
  #why-choose-1634 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: 1.75rem;
    /* 16px - 20px */
    column-gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #why-choose-1634 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    align-items: flex-start;
    /* 16px - 24px */
    gap: clamp(1rem, 3vw, 1.5rem);
  }
  #why-choose-1634 .cs-icon-wrapper {
    /* 60px - 80px */
    width: clamp(3.75rem, 7vw, 5rem);
    height: clamp(3.75rem, 7vw, 5rem);
    margin: 0;
    box-sizing: border-box;
    border: 1px solid var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #why-choose-1634 .cs-icon {
    width: 2rem;
    height: auto;
    display: block;
  }
  #why-choose-1634 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.5em;
    margin: 0;
    margin-bottom: 0.5rem;
    color: var(--headerColor);
    text-align: inherit;
  }
  #why-choose-1634 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    text-align: inherit;
  }
  #why-choose-1634 .cs-wrapper {
    /* makes the contents of this container act as though the container doesn't exist. They are now children of the cs-container so they can be positioned around each other. This allows us to sue the order property to place the cs-image-group at the top of the page on mobile */
    display: contents;
  }
  #why-choose-1634 .cs-image-group {
    font-size: min(2.7vw, 1em);
    width: 33.875em;
    height: 30.875em;
    /* sends it to teh top in the 1st position */
    order: -1;
    position: relative;
    z-index: 1;
  }
  #why-choose-1634 .cs-picture-wrapper {
    width: 80.073801%;
    height: 83.805668%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: stretch;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
  }
  #why-choose-1634 .cs-box {
    width: 60%;
    margin-top: -2.375em;
    margin-left: 1.5em;
    padding: 1em;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    position: relative;
    z-index: 10;
  }
  #why-choose-1634 .cs-header {
    font-size: 1em;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: block;
  }
  #why-choose-1634 .cs-desc {
    font-size: 0.875em;
    line-height: 1.5em;
    margin: 0;
    color: var(--primary);
    display: block;
  }
  #why-choose-1634 .cs-picture {
    position: relative;
    z-index: 1;
  }
  #why-choose-1634 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #why-choose-1634 .cs-picture1 {
    width: 100%;
    height: 100%;
  }
  #why-choose-1634 .cs-picture2 {
    width: 36.346863%;
    height: 39.878543%;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-1634 .cs-container {
    max-width: 80rem;
  }
  #why-choose-1634 .cs-content {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  #why-choose-1634 .cs-flex {
    text-align: left;
    width: 40vw;
    max-width: 40rem;
    flex: none;
  }
  #why-choose-1634 .cs-title {
    margin: 0;
  }
  #why-choose-1634 .cs-h3,
  #why-choose-1634 .cs-item-text {
    text-align: left;
  }
  #why-choose-1634 .cs-item {
    grid-column: span 4;
  }
  #why-choose-1634 .cs-image-group {
    width: 100%;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #why-choose-1634 {
    /* set the darker background color on the main div */
    background-color: #F8F5F1;
    overflow: hidden;
  }
  #why-choose-1634 .cs-content {
    align-items: flex-start;
  }
  #why-choose-1634 .cs-flex {
    width: 50%;
  }
  #why-choose-1634 .cs-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 2.5rem;
    position: relative;
    z-index: 1;
  }
  #why-choose-1634 .cs-wrapper:before {
    /* make the white space dependant on the height of the cs-wrapper as a pseudo element attached to the cs wrapper. This makes the white background responsive to the amount of items you have in your list. When the list grows or shrinks, the design will maintain its same spacing */
    content: '';
    width: 100vw;
    height: 100vw;
    background: #fff;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
  }
  #why-choose-1634 .cs-card-group {
    max-width: 39.375rem;
    /* use padding to push add the same amount of space between the content and the top of the card group as the negative margin top value on the cs-image-group. This makes sure that it counter acts the effects of the negative margin affecting the card group as well */
    padding-top: 3rem;
    align-self: flex-start;
  }
  #why-choose-1634 .cs-image-group {
    width: 33.875em;
    /* by setting height to auto, it will stretch to fill the container height. So when you add or subtract more cards and change the height of the container, the image group will shrink as well. Thats why we set the heights of the images in percentages. They will always be X% tall inside the cs-image-group. So when the image group stretches to match the container height, the pictures percentage height also grows proportionally. This ensures the design responds to changes in height from the card section on the left. */
    height: auto;
    min-height: 30.875em;
    /* makes it overlap the .cs-wrapper div */
    margin-top: -3rem;
    order: 2;
    flex: none;
  }
  #why-choose-1634 .cs-item {
    grid-column: span 12;
    flex-direction: row;
  }
}

/*-- -------------------------- -->
<---      Why Choose Us         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-1634 {
    padding: var(--sectionPadding);
  }
  #why-choose-1634 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 100px */
    gap: clamp(3rem, 10vw, 6.25rem);
  }
  #why-choose-1634 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #why-choose-1634 .cs-flex {
    max-width: 38.5rem;
  }
  #why-choose-1634 .cs-title {
    max-width: 20ch;
  }
  #why-choose-1634 .cs-text {
    margin-bottom: 1rem;
  }
  #why-choose-1634 .cs-text:last-of-type {
    margin-bottom: 0;
  }
  #why-choose-1634 .cs-wrapper {
    width: 100%;
  }
  #why-choose-1634 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: 1.75rem;
    /* 16px - 20px */
    column-gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #why-choose-1634 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    align-items: flex-start;
    /* 16px - 24px */
    gap: clamp(1rem, 3vw, 1.5rem);
  }
  #why-choose-1634 .cs-icon-wrapper {
    /* 60px - 80px */
    width: clamp(3.75rem, 7vw, 5rem);
    height: clamp(3.75rem, 7vw, 5rem);
    margin: 0;
    box-sizing: border-box;
    border: 1px solid var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #why-choose-1634 .cs-icon {
    width: 2rem;
    height: auto;
    display: block;
  }
  #why-choose-1634 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.5em;
    margin: 0;
    margin-bottom: 0.5rem;
    color: var(--headerColor);
    text-align: inherit;
  }
  #why-choose-1634 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    text-align: inherit;
  }
  #why-choose-1634 .cs-wrapper {
    /* makes the contents of this container act as though the container doesn't exist. They are now children of the cs-container so they can be positioned around each other. This allows us to sue the order property to place the cs-image-group at the top of the page on mobile */
    display: contents;
  }
  #why-choose-1634 .cs-image-group {
    font-size: min(2.7vw, 1em);
    width: 33.875em;
    height: 30.875em;
    /* sends it to teh top in the 1st position */
    order: -1;
    position: relative;
    z-index: 1;
  }
  #why-choose-1634 .cs-picture-wrapper {
    width: 80.073801%;
    height: 83.805668%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: stretch;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
  }
  #why-choose-1634 .cs-box {
    width: 60%;
    margin-top: -2.375em;
    margin-left: 1.5em;
    padding: 1em;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    position: relative;
    z-index: 10;
  }
  #why-choose-1634 .cs-header {
    font-size: 1em;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: block;
  }
  #why-choose-1634 .cs-desc {
    font-size: 0.875em;
    line-height: 1.5em;
    margin: 0;
    color: var(--primary);
    display: block;
  }
  #why-choose-1634 .cs-picture {
    position: relative;
    z-index: 1;
  }
  #why-choose-1634 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #why-choose-1634 .cs-picture1 {
    width: 100%;
    height: 100%;
  }
  #why-choose-1634 .cs-picture2 {
    width: 36.346863%;
    height: 39.878543%;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-1634 .cs-container {
    max-width: 80rem;
  }
  #why-choose-1634 .cs-content {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  #why-choose-1634 .cs-flex {
    text-align: left;
    width: 40vw;
    max-width: 40rem;
    flex: none;
  }
  #why-choose-1634 .cs-title {
    margin: 0;
  }
  #why-choose-1634 .cs-h3,
  #why-choose-1634 .cs-item-text {
    text-align: left;
  }
  #why-choose-1634 .cs-item {
    grid-column: span 4;
  }
  #why-choose-1634 .cs-image-group {
    width: 100%;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #why-choose-1634 {
    /* set the darker background color on the main div */
    background-color: #F8F5F1;
    overflow: hidden;
  }
  #why-choose-1634 .cs-content {
    align-items: flex-start;
  }
  #why-choose-1634 .cs-flex {
    width: 50%;
  }
  #why-choose-1634 .cs-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 2.5rem;
    position: relative;
    z-index: 1;
  }
  #why-choose-1634 .cs-wrapper:before {
    /* make the white space dependant on the height of the cs-wrapper as a pseudo element attached to the cs wrapper. This makes the white background responsive to the amount of items you have in your list. When the list grows or shrinks, the design will maintain its same spacing */
    content: '';
    width: 100vw;
    height: 100vw;
    background: #fff;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
  }
  #why-choose-1634 .cs-card-group {
    max-width: 39.375rem;
    /* use padding to push add the same amount of space between the content and the top of the card group as the negative margin top value on the cs-image-group. This makes sure that it counter acts the effects of the negative margin affecting the card group as well */
    padding-top: 3rem;
    align-self: flex-start;
  }
  #why-choose-1634 .cs-image-group {
    width: 33.875em;
    /* by setting height to auto, it will stretch to fill the container height. So when you add or subtract more cards and change the height of the container, the image group will shrink as well. Thats why we set the heights of the images in percentages. They will always be X% tall inside the cs-image-group. So when the image group stretches to match the container height, the pictures percentage height also grows proportionally. This ensures the design responds to changes in height from the card section on the left. */
    height: auto;
    min-height: 30.875em;
    /* makes it overlap the .cs-wrapper div */
    margin-top: -3rem;
    order: 2;
    flex: none;
  }
  #why-choose-1634 .cs-item {
    grid-column: span 12;
    flex-direction: row;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #why-choose-1634 {
    background-color: rgba(0, 0, 0, 0.3);
  }
  body.dark-mode #why-choose-1634 .cs-title,
  body.dark-mode #why-choose-1634 .cs-text,
  body.dark-mode #why-choose-1634 .cs-h3,
  body.dark-mode #why-choose-1634 .cs-item-text,
  body.dark-mode #why-choose-1634 .cs-header {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #why-choose-1634 .cs-text,
  body.dark-mode #why-choose-1634 .cs-item-text {
    opacity: .8;
  }
  body.dark-mode #why-choose-1634 .cs-box {
    background-color: var(--dark);
    position: relative;
    z-index: 1;
  }
  body.dark-mode #why-choose-1634 .cs-box:before {
    content: '';
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .2;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  body.dark-mode #why-choose-1634 .cs-wrapper:before {
    background-color: var(--dark);
  }
}

/*-- -------------------------- -->
<---      Why Choose Us         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #why-choose-1634 {
        padding: var(--sectionPadding);
        
        .cs-container {
            width: 100%;
            /* changes to 1280px at tablet */
            max-width: (584/16rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 100px */
            gap: clamp(3rem, 10vw, 6.25rem);
        }
    
        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: left;
            width: 100%;
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: flex-start;
        }

        .cs-flex {
            max-width: (616/16rem);
        }
    
        .cs-title {
            max-width: 20ch;
        }

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

        .cs-wrapper {
            width: 100%;
        }

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            row-gap: (28/16rem);
            /* 16px - 20px */
            column-gap: clamp(1rem, 2.3vw, 1.25rem);
        }

        .cs-item {
            text-align: left;
            list-style: none;
            width: 100%;
            margin: 0;
            box-sizing: border-box;
            display: flex;
            grid-column: span 12;
            flex-direction: column;
            align-items: flex-start;
            /* 16px - 24px */
            gap: clamp(1rem, 3vw, 1.5rem);
        }

        .cs-icon-wrapper {
            /* 60px - 80px */
            width: clamp(3.75rem, 7vw, 5rem);
            height: clamp(3.75rem, 7vw, 5rem);
            margin: 0;
            box-sizing: border-box;
            border: 1px solid var(--primary);
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            /* prevents flexbox from squishing it */
            flex: none;
        }

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

        .cs-h3 {
            font-size: (20/16rem);
            line-height: 1.5em;
            margin: 0;
            margin-bottom: (8/16rem);
            color: var(--headerColor);
            text-align: inherit;
        }

        .cs-item-text {
            /* 14px - 16px */
            font-size: clamp(0.875rem, 1.5vw, 1rem);
            line-height: 1.5em;
            margin: 0;
            color: var(--bodyTextColor);
            text-align: inherit;
        }

        .cs-wrapper {
            /* makes the contents of this container act as though the container doesn't exist. They are now children of the cs-container so they can be positioned around each other. This allows us to sue the order property to place the cs-image-group at the top of the page on mobile */
            display: contents;
        }

        .cs-image-group {
            font-size:~"min(2.7vw, 1em)";
            width: (542/16em);
            height: (494/16em);
            /* sends it to teh top in the 1st position */
            order: -1;
            position: relative;
            z-index: 1;
        }

        .cs-picture-wrapper {
            width: 80.073801%;
            height: 83.805668%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: stretch;
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
        }

        .cs-box {
            width: 60%;
            margin-top: (-38/16em);
            margin-left: (24/16em);
            padding: (16/16em);
            background-color: #f7f7f7;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: (4/16rem);
            position: relative;
            z-index: 10;
        }

        .cs-header {
            font-size: (16/16em);
            line-height: 1.2em;
            font-weight: 700;
            margin: 0;
            color: var(--headerColor);
            display: block;
        }

        .cs-desc {
            font-size: (14/16em);
            line-height: 1.5em;
            margin: 0;
            color: var(--primary);
            display: block;
        }

        .cs-picture {
            position: relative;
            z-index: 1;

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

        .cs-picture1 {
            width: 100%;
            height: 100%;
        }

        .cs-picture2 {
            width: 36.346863%;
            height: 39.878543%;
            position: absolute;
            bottom: 0;
            right: 0;
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #why-choose-1634 {
        .cs-container {
            max-width: (1280/16rem);
        }

        .cs-content {
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .cs-flex {
            text-align: left;
            width: 40vw;
            max-width: (640/16rem);
            flex: none;
        }

        .cs-title {
            margin: 0;
        }

        .cs-h3,
        .cs-item-text {
            text-align: left;
        }
        
        .cs-item {
            grid-column: span 4;
        }

        .cs-image-group {
            width: 100%;
        }
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #why-choose-1634 {
        /* set the darker background color on the main div */
        background-color: #F8F5F1;
        overflow: hidden;
        
        .cs-content {
            align-items: flex-start;
        }

        .cs-flex {
            width: 50%;
        }

        .cs-wrapper {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: stretch;
            gap: (40/16rem);
            position: relative;
            z-index: 1;

            &:before {
                /* make the white space dependant on the height of the cs-wrapper as a pseudo element attached to the cs wrapper. This makes the white background responsive to the amount of items you have in your list. When the list grows or shrinks, the design will maintain its same spacing */
                content: '';
                width: 100vw;
                height: 100vw;
                background: #fff;
                opacity: 1;
                position: absolute;
                display: block;
                top: 0;
                left: 50%;
                z-index: -1;
                transform: translateX(-50%);
            }
        }

        .cs-card-group {
            max-width: (630/16rem);
            /* use padding to push add the same amount of space between the content and the top of the card group as the negative margin top value on the cs-image-group. This makes sure that it counter acts the effects of the negative margin affecting the card group as well */
            padding-top: (48/16rem);
            align-self: flex-start;
        }

        .cs-image-group {
            width: (542/16em);
            /* by setting height to auto, it will stretch to fill the container height. So when you add or subtract more cards and change the height of the container, the image group will shrink as well. Thats why we set the heights of the images in percentages. They will always be X% tall inside the cs-image-group. So when the image group stretches to match the container height, the pictures percentage height also grows proportionally. This ensures the design responds to changes in height from the card section on the left. */
            height: auto;
            min-height: (494/16em);
            /* makes it overlap the .cs-wrapper div */
            margin-top: (-48/16rem);
            order: 2;
            flex: none;
        }

        .cs-item {
            grid-column: span 12;
            flex-direction: row;
        }
    }
}

/*-- -------------------------- -->
<---      Why Choose Us         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #why-choose-1634 {
        padding: var(--sectionPadding);
        
        .cs-container {
            width: 100%;
            /* changes to 1280px at tablet */
            max-width: (584/16rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 100px */
            gap: clamp(3rem, 10vw, 6.25rem);
        }
    
        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: left;
            width: 100%;
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: flex-start;
        }

        .cs-flex {
            max-width: (616/16rem);
        }
    
        .cs-title {
            max-width: 20ch;
        }

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

        .cs-wrapper {
            width: 100%;
        }

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            row-gap: (28/16rem);
            /* 16px - 20px */
            column-gap: clamp(1rem, 2.3vw, 1.25rem);
        }

        .cs-item {
            text-align: left;
            list-style: none;
            width: 100%;
            margin: 0;
            box-sizing: border-box;
            display: flex;
            grid-column: span 12;
            flex-direction: column;
            align-items: flex-start;
            /* 16px - 24px */
            gap: clamp(1rem, 3vw, 1.5rem);
        }

        .cs-icon-wrapper {
            /* 60px - 80px */
            width: clamp(3.75rem, 7vw, 5rem);
            height: clamp(3.75rem, 7vw, 5rem);
            margin: 0;
            box-sizing: border-box;
            border: 1px solid var(--primary);
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            /* prevents flexbox from squishing it */
            flex: none;
        }

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

        .cs-h3 {
            font-size: (20/16rem);
            line-height: 1.5em;
            margin: 0;
            margin-bottom: (8/16rem);
            color: var(--headerColor);
            text-align: inherit;
        }

        .cs-item-text {
            /* 14px - 16px */
            font-size: clamp(0.875rem, 1.5vw, 1rem);
            line-height: 1.5em;
            margin: 0;
            color: var(--bodyTextColor);
            text-align: inherit;
        }

        .cs-wrapper {
            /* makes the contents of this container act as though the container doesn't exist. They are now children of the cs-container so they can be positioned around each other. This allows us to sue the order property to place the cs-image-group at the top of the page on mobile */
            display: contents;
        }

        .cs-image-group {
            font-size:~"min(2.7vw, 1em)";
            width: (542/16em);
            height: (494/16em);
            /* sends it to teh top in the 1st position */
            order: -1;
            position: relative;
            z-index: 1;
        }

        .cs-picture-wrapper {
            width: 80.073801%;
            height: 83.805668%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: stretch;
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
        }

        .cs-box {
            width: 60%;
            margin-top: (-38/16em);
            margin-left: (24/16em);
            padding: (16/16em);
            background-color: #f7f7f7;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: (4/16rem);
            position: relative;
            z-index: 10;
        }

        .cs-header {
            font-size: (16/16em);
            line-height: 1.2em;
            font-weight: 700;
            margin: 0;
            color: var(--headerColor);
            display: block;
        }

        .cs-desc {
            font-size: (14/16em);
            line-height: 1.5em;
            margin: 0;
            color: var(--primary);
            display: block;
        }

        .cs-picture {
            position: relative;
            z-index: 1;

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

        .cs-picture1 {
            width: 100%;
            height: 100%;
        }

        .cs-picture2 {
            width: 36.346863%;
            height: 39.878543%;
            position: absolute;
            bottom: 0;
            right: 0;
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #why-choose-1634 {
        .cs-container {
            max-width: (1280/16rem);
        }

        .cs-content {
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .cs-flex {
            text-align: left;
            width: 40vw;
            max-width: (640/16rem);
            flex: none;
        }

        .cs-title {
            margin: 0;
        }

        .cs-h3,
        .cs-item-text {
            text-align: left;
        }
        
        .cs-item {
            grid-column: span 4;
        }

        .cs-image-group {
            width: 100%;
        }
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #why-choose-1634 {
        /* set the darker background color on the main div */
        background-color: #F8F5F1;
        overflow: hidden;
        
        .cs-content {
            align-items: flex-start;
        }

        .cs-flex {
            width: 50%;
        }

        .cs-wrapper {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: stretch;
            gap: (40/16rem);
            position: relative;
            z-index: 1;

            &:before {
                /* make the white space dependant on the height of the cs-wrapper as a pseudo element attached to the cs wrapper. This makes the white background responsive to the amount of items you have in your list. When the list grows or shrinks, the design will maintain its same spacing */
                content: '';
                width: 100vw;
                height: 100vw;
                background: #fff;
                opacity: 1;
                position: absolute;
                display: block;
                top: 0;
                left: 50%;
                z-index: -1;
                transform: translateX(-50%);
            }
        }

        .cs-card-group {
            max-width: (630/16rem);
            /* use padding to push add the same amount of space between the content and the top of the card group as the negative margin top value on the cs-image-group. This makes sure that it counter acts the effects of the negative margin affecting the card group as well */
            padding-top: (48/16rem);
            align-self: flex-start;
        }

        .cs-image-group {
            width: (542/16em);
            /* by setting height to auto, it will stretch to fill the container height. So when you add or subtract more cards and change the height of the container, the image group will shrink as well. Thats why we set the heights of the images in percentages. They will always be X% tall inside the cs-image-group. So when the image group stretches to match the container height, the pictures percentage height also grows proportionally. This ensures the design responds to changes in height from the card section on the left. */
            height: auto;
            min-height: (494/16em);
            /* makes it overlap the .cs-wrapper div */
            margin-top: (-48/16rem);
            order: 2;
            flex: none;
        }

        .cs-item {
            grid-column: span 12;
            flex-direction: row;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #why-choose-1634 {
            background-color: rgba(0, 0, 0, .3);

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

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

            .cs-box {
                background-color: var(--dark);
                position: relative;
                z-index: 1;

                &:before {
                    content: '';
                    width: 100%;
                    height: 100%;
                    background: #000;
                    opacity: .2;
                    position: absolute;
                    display: block;
                    top: 0;
                    left: 0;
                    z-index: -1;
                }
            }

            .cs-wrapper {
                &:before {
                    background-color: var(--dark);
                }
            }
        }
    }
}

/*-- -------------------------- -->
<---      Why Choose Us         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #why-choose-1634 {
        padding: var(--sectionPadding);
        
        .cs-container {
            width: 100%;
            /* changes to 1280px at tablet */
            max-width: calc(584 / 16 * 1rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 100px */
            gap: clamp(3rem, 10vw, 6.25rem);
        }
    
        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: left;
            width: 100%;
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: flex-start;
        }

        .cs-flex {
            max-width: calc(616 / 16 * 1rem);
        }
    
        .cs-title {
            max-width: 20ch;
        }

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

        .cs-wrapper {
            width: 100%;
        }

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            row-gap: calc(28 / 16 * 1rem);
            /* 16px - 20px */
            column-gap: clamp(1rem, 2.3vw, 1.25rem);
        }

        .cs-item {
            text-align: left;
            list-style: none;
            width: 100%;
            margin: 0;
            box-sizing: border-box;
            display: flex;
            grid-column: span 12;
            flex-direction: column;
            align-items: flex-start;
            /* 16px - 24px */
            gap: clamp(1rem, 3vw, 1.5rem);
        }

        .cs-icon-wrapper {
            /* 60px - 80px */
            width: clamp(3.75rem, 7vw, 5rem);
            height: clamp(3.75rem, 7vw, 5rem);
            margin: 0;
            box-sizing: border-box;
            border: 1px solid var(--primary);
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            /* prevents flexbox from squishing it */
            flex: none;
        }

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

        .cs-h3 {
            font-size: calc(20 / 16 * 1rem);
            line-height: 1.5em;
            margin: 0;
            margin-bottom: calc(8 / 16 * 1rem);
            color: var(--headerColor);
            text-align: inherit;
        }

        .cs-item-text {
            /* 14px - 16px */
            font-size: clamp(0.875rem, 1.5vw, 1rem);
            line-height: 1.5em;
            margin: 0;
            color: var(--bodyTextColor);
            text-align: inherit;
        }

        .cs-wrapper {
            /* makes the contents of this container act as though the container doesn't exist. They are now children of the cs-container so they can be positioned around each other. This allows us to sue the order property to place the cs-image-group at the top of the page on mobile */
            display: contents;
        }

        .cs-image-group {
            font-size: min(2.7vw, 1em);
            width: calc(584 / 16 * 1em);
            height: calc(494 / 16 * 1em);
            /* sends it to teh top in the 1st position */
            order: -1;
            position: relative;
            z-index: 1;
        }

        .cs-picture-wrapper {
            width: 80.073801%;
            height: 83.805668%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: stretch;
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
        }

        .cs-box {
            width: 60%;
            margin-top: calc(-38 / 16 * 1em);
            margin-left: calc(24 / 16 * 1em);
            padding: calc(16 / 16 * 1em);
            background-color: #f7f7f7;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: calc(4 / 16 * 1em);
            position: relative;
            z-index: 10;
        }

        .cs-header {
            font-size: calc(16 / 16 * 1em);
            line-height: 1.2em;
            font-weight: 700;
            margin: 0;
            color: var(--headerColor);
            display: block;
        }

        .cs-desc {
            font-size: calc(14 / 16 * 1em);
            line-height: 1.5em;
            margin: 0;
            color: var(--primary);
            display: block;
        }

        .cs-picture {
            position: relative;
            z-index: 1;

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

        .cs-picture1 {
            width: 100%;
            height: 100%;
        }

        .cs-picture2 {
            width: 36.346863%;
            height: 39.878543%;
            position: absolute;
            bottom: 0;
            right: 0;
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #why-choose-1634 {
        .cs-container {
            max-width: calc(1280 / 16 * 1rem);
        }

        .cs-content {
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .cs-flex {
            text-align: left;
            width: 40vw;
            max-width: calc(640 / 16 * 1rem);
            flex: none;
        }

        .cs-title {
            margin: 0;
        }

        .cs-h3,
        .cs-item-text {
            text-align: left;
        }
        
        .cs-item {
            grid-column: span 4;
        }

        .cs-image-group {
            width: 100%;
        }
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #why-choose-1634 {
        /* set the darker background color on the main div */
        background-color: #F8F5F1;
        overflow: hidden;
        
        .cs-content {
            align-items: flex-start;
        }

        .cs-flex {
            width: 50%;
        }

        .cs-wrapper {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: stretch;
            gap: calc(40 / 16 * 1rem);
            position: relative;
            z-index: 1;

            &:before {
                /* make the white space dependant on the height of the cs-wrapper as a pseudo element attached to the cs wrapper. This makes the white background responsive to the amount of items you have in your list. When the list grows or shrinks, the design will maintain its same spacing */
                content: '';
                width: 100vw;
                height: 100vw;
                background: #fff;
                opacity: 1;
                position: absolute;
                display: block;
                top: 0;
                left: 50%;
                z-index: -1;
                transform: translateX(-50%);
            }
        }

        .cs-card-group {
            max-width: calc(630 / 16 * 1rem);
            /* use padding to push add the same amount of space between the content and the top of the card group as the negative margin top value on the cs-image-group. This makes sure that it counter acts the effects of the negative margin affecting the card group as well */
            padding-top: calc(48 / 16 * 1rem);
            align-self: flex-start;
        }

        .cs-image-group {
            width: calc(542 / 16 * 1em);
            /* by setting height to auto, it will stretch to fill the container height. So when you add or subtract more cards and change the height of the container, the image group will shrink as well. Thats why we set the heights of the images in percentages. They will always be X% tall inside the cs-image-group. So when the image group stretches to match the container height, the pictures percentage height also grows proportionally. This ensures the design responds to changes in height from the card section on the left. */
            height: auto;
            min-height: calc(494 / 16 * 1em);
            /* makes it overlap the .cs-wrapper div */
            margin-top: calc(-48 / 16 * 1em);
            order: 2;
            flex: none;
        }

        .cs-item {
            grid-column: span 12;
            flex-direction: row;
        }
    }
}

/*-- -------------------------- -->
<---      Why Choose Us         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #why-choose-1634 {
        padding: var(--sectionPadding);
        
        .cs-container {
            width: 100%;
            /* changes to 1280px at tablet */
            max-width: calc(584 / 16 * 1rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 100px */
            gap: clamp(3rem, 10vw, 6.25rem);
        }
    
        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: left;
            width: 100%;
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: flex-start;
        }

        .cs-flex {
            max-width: calc(616 / 16 * 1rem);
        }
    
        .cs-title {
            max-width: 20ch;
        }

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

        .cs-wrapper {
            width: 100%;
        }

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            row-gap: calc(28 / 16 * 1rem);
            /* 16px - 20px */
            column-gap: clamp(1rem, 2.3vw, 1.25rem);
        }

        .cs-item {
            text-align: left;
            list-style: none;
            width: 100%;
            margin: 0;
            box-sizing: border-box;
            display: flex;
            grid-column: span 12;
            flex-direction: column;
            align-items: flex-start;
            /* 16px - 24px */
            gap: clamp(1rem, 3vw, 1.5rem);
        }

        .cs-icon-wrapper {
            /* 60px - 80px */
            width: clamp(3.75rem, 7vw, 5rem);
            height: clamp(3.75rem, 7vw, 5rem);
            margin: 0;
            box-sizing: border-box;
            border: 1px solid var(--primary);
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            /* prevents flexbox from squishing it */
            flex: none;
        }

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

        .cs-h3 {
            font-size: calc(20 / 16 * 1rem);
            line-height: 1.5em;
            margin: 0;
            margin-bottom: calc(8 / 16 * 1rem);
            color: var(--headerColor);
            text-align: inherit;
        }

        .cs-item-text {
            /* 14px - 16px */
            font-size: clamp(0.875rem, 1.5vw, 1rem);
            line-height: 1.5em;
            margin: 0;
            color: var(--bodyTextColor);
            text-align: inherit;
        }

        .cs-wrapper {
            /* makes the contents of this container act as though the container doesn't exist. They are now children of the cs-container so they can be positioned around each other. This allows us to sue the order property to place the cs-image-group at the top of the page on mobile */
            display: contents;
        }

        .cs-image-group {
            font-size: min(2.7vw, 1em);
            width: calc(584 / 16 * 1em);
            height: calc(494 / 16 * 1em);
            /* sends it to teh top in the 1st position */
            order: -1;
            position: relative;
            z-index: 1;
        }

        .cs-picture-wrapper {
            width: 80.073801%;
            height: 83.805668%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: stretch;
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
        }

        .cs-box {
            width: 60%;
            margin-top: calc(-38 / 16 * 1em);
            margin-left: calc(24 / 16 * 1em);
            padding: calc(16 / 16 * 1em);
            background-color: #f7f7f7;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: calc(4 / 16 * 1em);
            position: relative;
            z-index: 10;
        }

        .cs-header {
            font-size: calc(16 / 16 * 1em);
            line-height: 1.2em;
            font-weight: 700;
            margin: 0;
            color: var(--headerColor);
            display: block;
        }

        .cs-desc {
            font-size: calc(14 / 16 * 1em);
            line-height: 1.5em;
            margin: 0;
            color: var(--primary);
            display: block;
        }

        .cs-picture {
            position: relative;
            z-index: 1;

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

        .cs-picture1 {
            width: 100%;
            height: 100%;
        }

        .cs-picture2 {
            width: 36.346863%;
            height: 39.878543%;
            position: absolute;
            bottom: 0;
            right: 0;
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #why-choose-1634 {
        .cs-container {
            max-width: calc(1280 / 16 * 1rem);
        }

        .cs-content {
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .cs-flex {
            text-align: left;
            width: 40vw;
            max-width: calc(640 / 16 * 1rem);
            flex: none;
        }

        .cs-title {
            margin: 0;
        }

        .cs-h3,
        .cs-item-text {
            text-align: left;
        }
        
        .cs-item {
            grid-column: span 4;
        }

        .cs-image-group {
            width: 100%;
        }
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #why-choose-1634 {
        /* set the darker background color on the main div */
        background-color: #F8F5F1;
        overflow: hidden;
        
        .cs-content {
            align-items: flex-start;
        }

        .cs-flex {
            width: 50%;
        }

        .cs-wrapper {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: stretch;
            gap: calc(40 / 16 * 1rem);
            position: relative;
            z-index: 1;

            &:before {
                /* make the white space dependant on the height of the cs-wrapper as a pseudo element attached to the cs wrapper. This makes the white background responsive to the amount of items you have in your list. When the list grows or shrinks, the design will maintain its same spacing */
                content: '';
                width: 100vw;
                height: 100vw;
                background: #fff;
                opacity: 1;
                position: absolute;
                display: block;
                top: 0;
                left: 50%;
                z-index: -1;
                transform: translateX(-50%);
            }
        }

        .cs-card-group {
            max-width: calc(630 / 16 * 1rem);
            /* use padding to push add the same amount of space between the content and the top of the card group as the negative margin top value on the cs-image-group. This makes sure that it counter acts the effects of the negative margin affecting the card group as well */
            padding-top: calc(48 / 16 * 1rem);
            align-self: flex-start;
        }

        .cs-image-group {
            width: calc(542 / 16 * 1em);
            /* by setting height to auto, it will stretch to fill the container height. So when you add or subtract more cards and change the height of the container, the image group will shrink as well. Thats why we set the heights of the images in percentages. They will always be X% tall inside the cs-image-group. So when the image group stretches to match the container height, the pictures percentage height also grows proportionally. This ensures the design responds to changes in height from the card section on the left. */
            height: auto;
            min-height: calc(494 / 16 * 1em);
            /* makes it overlap the .cs-wrapper div */
            margin-top: calc(-48 / 16 * 1em);
            order: 2;
            flex: none;
        }

        .cs-item {
            grid-column: span 12;
            flex-direction: row;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #why-choose-1634 {
            background-color: rgba(0, 0, 0, .3);

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

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

            .cs-box {
                background-color: var(--dark);
                position: relative;
                z-index: 1;

                &:before {
                    content: '';
                    width: 100%;
                    height: 100%;
                    background: #000;
                    opacity: .2;
                    position: absolute;
                    display: block;
                    top: 0;
                    left: 0;
                    z-index: -1;
                }
            }

            .cs-wrapper {
                &:before {
                    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);
}