Code of Stitch

Side By Side

<!-- ============================================ -->
<!--                  Donations                   -->
<!-- ============================================ -->

<section id="donations-1428">
    <div class="cs-container">
        <div class="cs-content">
            <span class="cs-topper">Popular Causes</span>
            <h2 class="cs-title">Find Our Popular Causes</h2>
            <p class="cs-text">
                Join the community to give education for the children and together make them educated for their lives. We help companies develop powerful corporate. Every man must decide whether he will walk in the light. 
            </p>
            <a href="" class="cs-button-solid">View All Causes</a>
        </div>
        <ul class="cs-card-group">
            <li class="cs-item">
                <a href="" class="cs-link">
                    <picture class="cs-picture" aria-hidden="true">
                        <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Landscapes/factory.jpg">
                        <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Landscapes/factory.jpg">
                        <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Landscapes/factory.jpg" alt="factory" width="305" height="240">
                    </picture>
                    <div class="cs-flex">
                        <h3 class="cs-h3">Reduce Air Pollution</h3>
                        <p class="cs-item-text">
                            We help companies develop powerful corporate responsibility and employee engagement.
                        </p>
                        <div class="cs-donations-flex">
                            <div class="cs-bar">
                                <!--change the --progress number to match the percentage in cs-number-->
                                <div class="cs-progress" aria-hidden="true">
                                    <span class="cs-progress-bar"  style="--progress: 65%"></span>
                                </div>
                            </div>
                        </div>
                        <div class="cs-number-group">
                            <span class="cs-raised">
                                <span class="cs-number">$5200 Raised Of $15000</span>
                            </span>
                            <span class="cs-percentage">65%</span>
                        </div>
                    </div>
                </a>
            </li>
            <li class="cs-item">
                <a href="" class="cs-link">
                    <picture class="cs-picture" aria-hidden="true">
                        <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Landscapes/table.jpg">
                        <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Landscapes/table.jpg">
                        <img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Landscapes/table.jpg" alt="desk" width="305" height="240">
                    </picture>
                    <div class="cs-flex">
                        <h3 class="cs-h3">Be Efficient In Energy Use</h3>
                        <p class="cs-item-text">
                            We help companies develop powerful corporate responsibility and employee engagement.
                        </p>
                        <div class="cs-donations-flex">
                            <div class="cs-bar">
                                <!--change the --progress number to match the percentage in cs-number-->
                                <div class="cs-progress" aria-hidden="true">
                                    <span class="cs-progress-bar"  style="--progress: 90%"></span>
                                </div>
                            </div>
                        </div>
                        <div class="cs-number-group">
                            <span class="cs-raised">
                                <span class="cs-number">$5200 Raised Of $15000</span>
                            </span>
                            <span class="cs-percentage">65%</span>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <!--Stats Group-->
    <div class="cs-stats-container">
        <ul class="cs-stats-group">
            <li class="cs-stat">
                <picture class="cs-icon-wrapper">
                    <img class="cs-icon" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/box-heart.svg" alt="icon" width="48" height="48">
                </picture>
                <div class="cs-info">
                    <span class="cs-stat-number">78k+</span>
                    <span class="cs-desc">Raised by 6,388 people in 7 days</span>
                </div>
            </li>
            <li class="cs-stat">
                <picture class="cs-icon-wrapper">
                    <img class="cs-icon" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/hands.svg" alt="icon" width="48" height="48">
                </picture>
                <div class="cs-info">
                    <span class="cs-stat-number">8M+</span>
                    <span class="cs-desc">People got your support in 5 years</span>
                </div>
            </li>
        </ul>
    </div>
    <!-- Background Graphic -->
    <picture class="cs-background">
        <img src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/waves5.svg" alt="waves" >
    </picture>
</section>

/*-- -------------------------- -->
<---         Donations          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #donations-1428 {
    padding: var(--sectionPadding);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    position: relative;
    z-index: 1;
  }
  #donations-1428 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
    z-index: 10;
  }
  #donations-1428 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 32.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #donations-1428 .cs-topper {
    color: var(--secondary);
  }
  #donations-1428 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  #donations-1428 .cs-text {
    margin-bottom: 1rem;
    color: var(--bodyTextColorWhite);
    opacity: .8;
  }
  #donations-1428 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #donations-1428 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 2rem;
    background-color: var(--primary);
    border-radius: 0.5rem;
    overflow: hidden;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color .3s;
  }
  #donations-1428 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #fff;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.5rem;
    transition: width .3s;
  }
  #donations-1428 .cs-button-solid:hover {
    color: var(--primary);
  }
  #donations-1428 .cs-button-solid:hover:before {
    width: 100%;
  }
  #donations-1428 .cs-card-group {
    width: 100%;
    /* changes to 630px at large desktop */
    max-width: 59rem;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
  }
  #donations-1428 .cs-item {
    text-align: left;
    list-style: none;
    border-radius: 1rem;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0px 4px 120px 0px rgba(0, 0, 0, 0.12);
    grid-column: span 12;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.3s, transform 0.3s;
  }
  #donations-1428 .cs-item:hover {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
  #donations-1428 .cs-item:hover .cs-picture img {
    opacity: .3;
    transform: scale(1.1);
  }
  #donations-1428 .cs-item:hover .cs-h3 {
    color: var(--primary);
  }
  #donations-1428 .cs-link {
    text-decoration: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
  }
  #donations-1428 .cs-picture {
    width: 100%;
    height: 15rem;
    background-color: var(--primary);
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
  }
  #donations-1428 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform .6s, opacity .3s;
  }
  #donations-1428 .cs-flex {
    padding: 1.5rem;
    /* prblog padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 2;
  }
  #donations-1428 .cs-h3 {
    font-size: 1.25rem;
    text-align: inherit;
    line-height: 1.2em;
    font-weight: 700;
    color: var(--headerColor);
    margin: 0 0 0.75rem 0;
    transition: color .3s;
  }
  #donations-1428 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: inherit;
    margin: 0 0 1.5rem;
    padding: 0 0 1.5rem;
    color: var(--bodyTextColor);
    border-bottom: 1px solid #E8E8E8;
  }
  #donations-1428 .cs-donations-flex {
    width: 100%;
    margin: 0 0 0.5rem;
  }
  #donations-1428 .cs-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 4px - 8px */
    gap: clamp(0.25rem, 1vw, 0.5rem);
  }
  #donations-1428 .cs-progress {
    width: 100%;
    height: 6px;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #E8E8E8;
  }
  #donations-1428 .cs-progress-bar {
    width: var(--progress);
    height: 100%;
    background-color: var(--secondary);
    border-radius: 0.5rem;
    display: block;
  }
  #donations-1428 .cs-percentage {
    font-size: 0.875rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: block;
  }
  #donations-1428 .cs-number-group {
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
  }
  #donations-1428 .cs-raised {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0.25rem;
  }
  #donations-1428 .cs-number {
    font-size: 0.875rem;
    line-height: 1.2em;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
  }
  #donations-1428 .cs-stats-container {
    width: 100%;
    /* changes to 1280px at large desktop */
    max-width: 59rem;
    position: relative;
    z-index: 1;
  }
  #donations-1428 .cs-stats-group {
    width: 100%;
    max-width: 59rem;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    /* 16px - 20px */
    gap: clamp(1rem, 4vw, 4rem);
  }
  #donations-1428 .cs-stat {
    list-style: none;
    width: 100%;
    max-width: 25rem;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 16px - 20xp */
    gap: clamp(1rem, 2vw, 1.25rem);
    grid-column: span 6;
  }
  #donations-1428 .cs-info {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  #donations-1428 .cs-icon-wrapper {
    /* 60px - 88px */
    width: clamp(3.75rem, 7vw, 5.5rem);
    height: clamp(3.75rem, 7vw, 5.5rem);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
    z-index: 1;
  }
  #donations-1428 .cs-icon-wrapper:before {
    /* background color */
    content: '';
    width: 100%;
    height: 100%;
    background: var(--secondary);
    opacity: .1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
  #donations-1428 .cs-icon {
    /* 32px - 48px */
    width: clamp(2rem, 4vw, 3rem);
    height: auto;
    display: block;
  }
  #donations-1428 .cs-stat-number {
    /* 25px - 39px */
    font-size: clamp(1.5625rem, 3vw, 2.4375rem);
    text-align: inherit;
    line-height: 1.2em;
    font-weight: 900;
    margin: 0;
    color: var(--headerColor);
  }
  #donations-1428 .cs-desc {
    /* 14px - 16px */
    font-size: clamp(0.875em, 3vw, 1rem);
    text-align: inherit;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #donations-1428 .cs-background {
    width: 100%;
    /* 100% at large desktop */
    height: 70%;
    /* removed at large desktop */
    max-height: 40.625rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #donations-1428 .cs-background:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #1A1A1A;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #donations-1428 .cs-background img {
    width: 100%;
    height: 100%;
    opacity: .02;
    object-fit: cover;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #donations-1428 .cs-container {
    max-width: 80rem;
  }
  #donations-1428 .cs-item {
    grid-column: span 6;
  }
  #donations-1428 .cs-stat {
    flex-direction: row;
    align-items: flex-start;
  }
  #donations-1428 .cs-info {
    text-align: left;
    align-items: flex-start;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #donations-1428 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  #donations-1428 .cs-content {
    text-align: left;
    /* this padding will push down and maintain the same distance between the bottom of the group and the top of the cs-stats-container.  That way when you add or subtract content from this group it will always be the right distance from the stat container below it */
    padding-bottom: 15.625rem;
    align-items: flex-start;
  }
  #donations-1428 .cs-card-group {
    /* same amount as the translateY value to offset it */
    margin-bottom: 6.25rem;
    /* sends it to the left in the 1st position */
    order: -1;
    align-self: center;
  }
  #donations-1428 .cs-item:nth-of-type(2) {
    transform: translateY(6.25rem);
  }
  #donations-1428 .cs-card-group {
    max-width: 39.375rem;
  }
  #donations-1428 .cs-stats-container {
    max-width: 80rem;
    /* makes it overlap the cs-container so the cards are next to it on the left */
    margin-top: -9.375rem;
    display: flex;
    justify-content: flex-end;
  }
  #donations-1428 .cs-stats-container:before {
    /* white background on the stats */
    /* we add this to be the background so as the height of the cs-content changes, this white background area will ALWAYS have 36 pixels between the top of it and the stats content below it.  This is an "illusion" we use to create the LOOK of it being the section background so we have mroe control over the white space above the stats group. */
    content: '';
    width: 105vw;
    height: 62.5rem;
    background: #fff;
    opacity: 1;
    position: absolute;
    display: block;
    top: -2.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
  }
  #donations-1428 .cs-stats-group {
    max-width: 36.5625rem;
    justify-content: flex-end;
  }
  #donations-1428 .cs-background {
    height: 100%;
    max-height: 100%;
  }
}

/*-- -------------------------- -->
<---         Donations          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #donations-1428 {
    padding: var(--sectionPadding);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    position: relative;
    z-index: 1;
  }
  #donations-1428 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
    z-index: 10;
  }
  #donations-1428 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 32.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #donations-1428 .cs-topper {
    color: var(--secondary);
  }
  #donations-1428 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  #donations-1428 .cs-text {
    margin-bottom: 1rem;
    color: var(--bodyTextColorWhite);
    opacity: .8;
  }
  #donations-1428 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #donations-1428 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 2rem;
    background-color: var(--primary);
    border-radius: 0.5rem;
    overflow: hidden;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color .3s;
  }
  #donations-1428 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #fff;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.5rem;
    transition: width .3s;
  }
  #donations-1428 .cs-button-solid:hover {
    color: var(--primary);
  }
  #donations-1428 .cs-button-solid:hover:before {
    width: 100%;
  }
  #donations-1428 .cs-card-group {
    width: 100%;
    /* changes to 630px at large desktop */
    max-width: 59rem;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
  }
  #donations-1428 .cs-item {
    text-align: left;
    list-style: none;
    border-radius: 1rem;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0px 4px 120px 0px rgba(0, 0, 0, 0.12);
    grid-column: span 12;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.3s, transform 0.3s;
  }
  #donations-1428 .cs-item:hover {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
  #donations-1428 .cs-item:hover .cs-picture img {
    opacity: .3;
    transform: scale(1.1);
  }
  #donations-1428 .cs-item:hover .cs-h3 {
    color: var(--primary);
  }
  #donations-1428 .cs-link {
    text-decoration: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
  }
  #donations-1428 .cs-picture {
    width: 100%;
    height: 15rem;
    background-color: var(--primary);
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
  }
  #donations-1428 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform .6s, opacity .3s;
  }
  #donations-1428 .cs-flex {
    padding: 1.5rem;
    /* prblog padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 2;
  }
  #donations-1428 .cs-h3 {
    font-size: 1.25rem;
    text-align: inherit;
    line-height: 1.2em;
    font-weight: 700;
    color: var(--headerColor);
    margin: 0 0 0.75rem 0;
    transition: color .3s;
  }
  #donations-1428 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: inherit;
    margin: 0 0 1.5rem;
    padding: 0 0 1.5rem;
    color: var(--bodyTextColor);
    border-bottom: 1px solid #E8E8E8;
  }
  #donations-1428 .cs-donations-flex {
    width: 100%;
    margin: 0 0 0.5rem;
  }
  #donations-1428 .cs-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 4px - 8px */
    gap: clamp(0.25rem, 1vw, 0.5rem);
  }
  #donations-1428 .cs-progress {
    width: 100%;
    height: 6px;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #E8E8E8;
  }
  #donations-1428 .cs-progress-bar {
    width: var(--progress);
    height: 100%;
    background-color: var(--secondary);
    border-radius: 0.5rem;
    display: block;
  }
  #donations-1428 .cs-percentage {
    font-size: 0.875rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: block;
  }
  #donations-1428 .cs-number-group {
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
  }
  #donations-1428 .cs-raised {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0.25rem;
  }
  #donations-1428 .cs-number {
    font-size: 0.875rem;
    line-height: 1.2em;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
  }
  #donations-1428 .cs-stats-container {
    width: 100%;
    /* changes to 1280px at large desktop */
    max-width: 59rem;
    position: relative;
    z-index: 1;
  }
  #donations-1428 .cs-stats-group {
    width: 100%;
    max-width: 59rem;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    /* 16px - 20px */
    gap: clamp(1rem, 4vw, 4rem);
  }
  #donations-1428 .cs-stat {
    list-style: none;
    width: 100%;
    max-width: 25rem;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 16px - 20xp */
    gap: clamp(1rem, 2vw, 1.25rem);
    grid-column: span 6;
  }
  #donations-1428 .cs-info {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  #donations-1428 .cs-icon-wrapper {
    /* 60px - 88px */
    width: clamp(3.75rem, 7vw, 5.5rem);
    height: clamp(3.75rem, 7vw, 5.5rem);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
    z-index: 1;
  }
  #donations-1428 .cs-icon-wrapper:before {
    /* background color */
    content: '';
    width: 100%;
    height: 100%;
    background: var(--secondary);
    opacity: .1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
  #donations-1428 .cs-icon {
    /* 32px - 48px */
    width: clamp(2rem, 4vw, 3rem);
    height: auto;
    display: block;
  }
  #donations-1428 .cs-stat-number {
    /* 25px - 39px */
    font-size: clamp(1.5625rem, 3vw, 2.4375rem);
    text-align: inherit;
    line-height: 1.2em;
    font-weight: 900;
    margin: 0;
    color: var(--headerColor);
  }
  #donations-1428 .cs-desc {
    /* 14px - 16px */
    font-size: clamp(0.875em, 3vw, 1rem);
    text-align: inherit;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #donations-1428 .cs-background {
    width: 100%;
    /* 100% at large desktop */
    height: 70%;
    /* removed at large desktop */
    max-height: 40.625rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #donations-1428 .cs-background:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #1A1A1A;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #donations-1428 .cs-background img {
    width: 100%;
    height: 100%;
    opacity: .02;
    object-fit: cover;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #donations-1428 .cs-container {
    max-width: 80rem;
  }
  #donations-1428 .cs-item {
    grid-column: span 6;
  }
  #donations-1428 .cs-stat {
    flex-direction: row;
    align-items: flex-start;
  }
  #donations-1428 .cs-info {
    text-align: left;
    align-items: flex-start;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #donations-1428 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  #donations-1428 .cs-content {
    text-align: left;
    /* this padding will push down and maintain the same distance between the bottom of the group and the top of the cs-stats-container.  That way when you add or subtract content from this group it will always be the right distance from the stat container below it */
    padding-bottom: 15.625rem;
    align-items: flex-start;
  }
  #donations-1428 .cs-card-group {
    /* same amount as the translateY value to offset it */
    margin-bottom: 6.25rem;
    /* sends it to the left in the 1st position */
    order: -1;
    align-self: center;
  }
  #donations-1428 .cs-item:nth-of-type(2) {
    transform: translateY(6.25rem);
  }
  #donations-1428 .cs-card-group {
    max-width: 39.375rem;
  }
  #donations-1428 .cs-stats-container {
    max-width: 80rem;
    /* makes it overlap the cs-container so the cards are next to it on the left */
    margin-top: -9.375rem;
    display: flex;
    justify-content: flex-end;
  }
  #donations-1428 .cs-stats-container:before {
    /* white background on the stats */
    /* we add this to be the background so as the height of the cs-content changes, this white background area will ALWAYS have 36 pixels between the top of it and the stats content below it.  This is an "illusion" we use to create the LOOK of it being the section background so we have mroe control over the white space above the stats group. */
    content: '';
    width: 105vw;
    height: 62.5rem;
    background: #fff;
    opacity: 1;
    position: absolute;
    display: block;
    top: -2.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
  }
  #donations-1428 .cs-stats-group {
    max-width: 36.5625rem;
    justify-content: flex-end;
  }
  #donations-1428 .cs-background {
    height: 100%;
    max-height: 100%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #donations-1428 .cs-topper {
    color: var(--secondary);
  }
  body.dark-mode #donations-1428 .cs-title,
  body.dark-mode #donations-1428 .cs-text,
  body.dark-mode #donations-1428 .cs-h3,
  body.dark-mode #donations-1428 .cs-link,
  body.dark-mode #donations-1428 .cs-item-text,
  body.dark-mode #donations-1428 .cs-number,
  body.dark-mode #donations-1428 .cs-desc,
  body.dark-mode #donations-1428 .cs-percentage {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #donations-1428 .cs-link:hover {
    color: var(--secondary);
  }
  body.dark-mode #donations-1428 .cs-text,
  body.dark-mode #donations-1428 .cs-item-text,
  body.dark-mode #donations-1428 .cs-desc {
    opacity: .8;
  }
  body.dark-mode #donations-1428 .cs-item {
    background-color: var(--medium);
    border-color: rgba(255, 255, 255, 0.2);
  }
  body.dark-mode #donations-1428 .cs-item:before {
    opacity: .3;
  }
  body.dark-mode #donations-1428 .cs-item-text {
    border-color: rgba(255, 255, 255, 0.2);
  }
  body.dark-mode #donations-1428 .cs-picture:before {
    background-color: #FFF;
  }
  body.dark-mode #donations-1428 .cs-progress {
    background-color: rgba(255, 255, 255, 0.2);
  }
  body.dark-mode #donations-1428 .cs-background:before {
    background-color: rgba(0, 0, 0, 0.6);
  }
  body.dark-mode #donations-1428 .cs-stats-container:before {
    background-color: var(--dark);
  }
  body.dark-mode #donations-1428 .cs-stat-number,
  body.dark-mode #donations-1428 .cs-desc {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #donations-1428 .cs-desc {
    opacity: .8;
  }
}

/*-- -------------------------- -->
<---         Donations          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #donations-1428 {
        padding: var(--sectionPadding);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: (40/16rem);
        position: relative;
        z-index: 1;
        
        .cs-container {
            width: 100%;
            /* changes to 1280px at tablet */
            max-width: (550/16rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
            position: relative;
            z-index: 10;
        }

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

        .cs-topper {
            color: var(--secondary);
        }

        .cs-title {
            color: var(--bodyTextColorWhite);
        }
    
        .cs-text {
            margin-bottom: (16/16rem);
            color: var(--bodyTextColorWhite);
            opacity: .8;
            &:last-of-type {
                margin-bottom: (32/16rem);
            }
        }

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

            &:before {
                content: '';
                position: absolute;
                height: 100%;
                width: 0%;
                background: #fff;
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                border-radius: (8/16rem);
                transition: width .3s;
            }

            &:hover {
                color: var(--primary);
                &:before {
                    width: 100%;
                }
            }
        }

        .cs-card-group {
            width: 100%;
            /* changes to 630px at large desktop */
            max-width: (944/16rem);
            padding: 0;
            margin: 0;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: (20/16rem);
        }

        .cs-item {
            text-align: left;
            list-style: none;
            border-radius: (16/16rem);
            overflow: hidden;
            background-color: #fff;
            box-shadow: 0px 4px 120px 0px rgba(0, 0, 0, 0.12);
            grid-column: span 12;
            position: relative;
            z-index: 1;
            transition: box-shadow .3s, transform .3s;

            &:hover {
                box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
                .cs-picture {
                    img {
                        opacity: .3;
                        transform: scale(1.1);
                    }
                }

                .cs-h3 {
                    color: var(--primary);
                }
            }
        }

        .cs-link {
            text-decoration: none;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
        }

        .cs-picture {
            width: 100%;
            height: (240/16rem);
            background-color: var(--primary);
            overflow: hidden;
            display: block;
            position: relative;
            z-index: 1;

            img {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                object-fit: cover;
                transition: transform .6s, opacity .3s;
            }
        }

        .cs-flex {
            padding: (24/16rem);
            /* prblog padding from affecting height and width */
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            position: relative;
            z-index: 2;
        }

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

        .cs-item-text {
            /* 14px - 16px */
            font-size: clamp(.875rem, 1.5vw, 1rem);
            line-height: 1.5em;
            text-align: inherit;
            margin: 0 0 (24/16rem);
            padding: 0 0 (24/16rem);
            color: var(--bodyTextColor);
            border-bottom: 1px solid #E8E8E8;
        }

        .cs-donations-flex {
            width: 100%;
            margin: 0 0 (8/16rem);
        }

        .cs-bar {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            /* 4px - 8px */
            gap: clamp(.25rem, 1vw, .5rem);
        }

        .cs-progress {
            width: 100%;
            height: 6px;
            border-radius: (8/16rem);
            overflow: hidden;
            background-color: #E8E8E8;
        }

        .cs-progress-bar {
            width: var(--progress);
            height: 100%;
            background-color: var(--secondary);
            border-radius: (8/16rem);
            display: block;
        }

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

        .cs-number-group {
            width: 100%;
            margin: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: (24/16rem);
        }

        .cs-raised {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            gap: (4/16rem);
        }

        .cs-number {
            font-size: (14/16rem);
            line-height: 1.2em;
            margin: 0;
            color: var(--bodyTextColor);
            display: block;
        }

        .cs-stats-container {
            width: 100%;
            /* changes to 1280px at large desktop */
            max-width: (944/16rem);
            position: relative;
            z-index: 1;
        }

        .cs-stats-group {
            width: 100%;
            max-width: (944/16rem);
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            /* 16px - 20px */
            gap: clamp(1rem, 4vw, 4rem);
        }

        .cs-stat {
            list-style: none;
            width: 100%;
            max-width: (400/16rem);
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 16px - 20xp */
            gap: clamp(1rem, 2vw, 1.25rem);
            grid-column: span 6;
        }

        .cs-info {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: (8/16rem);
        }

        .cs-icon-wrapper {
            /* 60px - 88px */
            width: clamp(3.75rem, 7vw, 5.5rem);
            height: clamp(3.75rem, 7vw, 5.5rem);
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            /* prevents flexbox from squishing it */
            flex: none;
            position: relative;
            z-index: 1;

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

        .cs-icon {
            /* 32px - 48px */
            width: clamp(2rem, 4vw, 3rem);
            height: auto;
            display: block;
        }

        .cs-stat-number {
            /* 25px - 39px */
            font-size: clamp(1.5625rem, 3vw, 2.4375rem);
            text-align: inherit;
            line-height: 1.2em;
            font-weight: 900;
            margin: 0;
            color: var(--headerColor);
        }

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

        .cs-background {
            width: 100%;
            /* 100% at large desktop */
            height: 70%;
            /* removed at large desktop */
            max-height: (650/16rem);
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;

            &:before {
                content: "";
                width: 100%;
                height: 100%;
                background-color: #1A1A1A;
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
            }

            img {
                width: 100%;
                height: 100%;
                opacity: .02;
                object-fit: cover;
                top: 0;
                left: 0;
            }
        }
    }
}

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

        .cs-item {
            grid-column: span 6;
        }

        .cs-stat {
            flex-direction: row;
            align-items: flex-start;
        }

        .cs-info {
            text-align: left;
            align-items: flex-start;
        }
    }
}

/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #donations-1428 {
        .cs-container {
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
        }

        .cs-content {
            text-align: left;
            /* this padding will push down and maintain the same distance between the bottom of the group and the top of the cs-stats-container.  That way when you add or subtract content from this group it will always be the right distance from the stat container below it */
            padding-bottom: (250/16rem);
            align-items: flex-start;
        }

        .cs-card-group {
            /* same amount as the translateY value to offset it */
            margin-bottom: (100/16rem);
            /* sends it to the left in the 1st position */
            order: -1;
            align-self: center;
        }

        .cs-item {
            &:nth-of-type(2) {
                transform: translateY(6.25rem);
            }
        }

        .cs-card-group {
            max-width: (630/16rem);
        }

        .cs-stats-container {
            max-width: (1280/16rem);
            /* makes it overlap the cs-container so the cards are next to it on the left */
            margin-top: (-150/16rem);
            display: flex;
            justify-content: flex-end;

            &:before {
                /* white background on the stats */
                /* we add this to be the background so as the height of the cs-content changes, this white background area will ALWAYS have 36 pixels between the top of it and the stats content below it.  This is an "illusion" we use to create the LOOK of it being the section background so we have mroe control over the white space above the stats group. */
                content: '';
                width: 105vw;
                height: (1000/16rem);
                background: #fff;
                opacity: 1;
                position: absolute;
                display: block;
                top: (-36/16rem);
                left: 50%;
                transform: translateX(-50%);
                z-index: -1;
            }
        }

        .cs-stats-group {
            max-width: (585/16rem);
            justify-content: flex-end;
        }

        .cs-background {
            height: 100%;
            max-height: 100%;
        }
    }
}

/*-- -------------------------- -->
<---         Donations          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #donations-1428 {
        padding: var(--sectionPadding);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: (40/16rem);
        position: relative;
        z-index: 1;
        
        .cs-container {
            width: 100%;
            /* changes to 1280px at tablet */
            max-width: (550/16rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
            position: relative;
            z-index: 10;
        }

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

        .cs-topper {
            color: var(--secondary);
        }

        .cs-title {
            color: var(--bodyTextColorWhite);
        }
    
        .cs-text {
            margin-bottom: (16/16rem);
            color: var(--bodyTextColorWhite);
            opacity: .8;
            &:last-of-type {
                margin-bottom: (32/16rem);
            }
        }

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

            &:before {
                content: '';
                position: absolute;
                height: 100%;
                width: 0%;
                background: #fff;
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                border-radius: (8/16rem);
                transition: width .3s;
            }

            &:hover {
                color: var(--primary);
                &:before {
                    width: 100%;
                }
            }
        }

        .cs-card-group {
            width: 100%;
            /* changes to 630px at large desktop */
            max-width: (944/16rem);
            padding: 0;
            margin: 0;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: (20/16rem);
        }

        .cs-item {
            text-align: left;
            list-style: none;
            border-radius: (16/16rem);
            overflow: hidden;
            background-color: #fff;
            box-shadow: 0px 4px 120px 0px rgba(0, 0, 0, 0.12);
            grid-column: span 12;
            position: relative;
            z-index: 1;
            transition: box-shadow .3s, transform .3s;

            &:hover {
                box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
                .cs-picture {
                    img {
                        opacity: .3;
                        transform: scale(1.1);
                    }
                }

                .cs-h3 {
                    color: var(--primary);
                }
            }
        }

        .cs-link {
            text-decoration: none;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
        }

        .cs-picture {
            width: 100%;
            height: (240/16rem);
            background-color: var(--primary);
            overflow: hidden;
            display: block;
            position: relative;
            z-index: 1;

            img {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                object-fit: cover;
                transition: transform .6s, opacity .3s;
            }
        }

        .cs-flex {
            padding: (24/16rem);
            /* prblog padding from affecting height and width */
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            position: relative;
            z-index: 2;
        }

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

        .cs-item-text {
            /* 14px - 16px */
            font-size: clamp(.875rem, 1.5vw, 1rem);
            line-height: 1.5em;
            text-align: inherit;
            margin: 0 0 (24/16rem);
            padding: 0 0 (24/16rem);
            color: var(--bodyTextColor);
            border-bottom: 1px solid #E8E8E8;
        }

        .cs-donations-flex {
            width: 100%;
            margin: 0 0 (8/16rem);
        }

        .cs-bar {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            /* 4px - 8px */
            gap: clamp(.25rem, 1vw, .5rem);
        }

        .cs-progress {
            width: 100%;
            height: 6px;
            border-radius: (8/16rem);
            overflow: hidden;
            background-color: #E8E8E8;
        }

        .cs-progress-bar {
            width: var(--progress);
            height: 100%;
            background-color: var(--secondary);
            border-radius: (8/16rem);
            display: block;
        }

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

        .cs-number-group {
            width: 100%;
            margin: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: (24/16rem);
        }

        .cs-raised {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            gap: (4/16rem);
        }

        .cs-number {
            font-size: (14/16rem);
            line-height: 1.2em;
            margin: 0;
            color: var(--bodyTextColor);
            display: block;
        }

        .cs-stats-container {
            width: 100%;
            /* changes to 1280px at large desktop */
            max-width: (944/16rem);
            position: relative;
            z-index: 1;
        }

        .cs-stats-group {
            width: 100%;
            max-width: (944/16rem);
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            /* 16px - 20px */
            gap: clamp(1rem, 4vw, 4rem);
        }

        .cs-stat {
            list-style: none;
            width: 100%;
            max-width: (400/16rem);
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 16px - 20xp */
            gap: clamp(1rem, 2vw, 1.25rem);
            grid-column: span 6;
        }

        .cs-info {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: (8/16rem);
        }

        .cs-icon-wrapper {
            /* 60px - 88px */
            width: clamp(3.75rem, 7vw, 5.5rem);
            height: clamp(3.75rem, 7vw, 5.5rem);
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            /* prevents flexbox from squishing it */
            flex: none;
            position: relative;
            z-index: 1;

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

        .cs-icon {
            /* 32px - 48px */
            width: clamp(2rem, 4vw, 3rem);
            height: auto;
            display: block;
        }

        .cs-stat-number {
            /* 25px - 39px */
            font-size: clamp(1.5625rem, 3vw, 2.4375rem);
            text-align: inherit;
            line-height: 1.2em;
            font-weight: 900;
            margin: 0;
            color: var(--headerColor);
        }

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

        .cs-background {
            width: 100%;
            /* 100% at large desktop */
            height: 70%;
            /* removed at large desktop */
            max-height: (650/16rem);
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;

            &:before {
                content: "";
                width: 100%;
                height: 100%;
                background-color: #1A1A1A;
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
            }

            img {
                width: 100%;
                height: 100%;
                opacity: .02;
                object-fit: cover;
                top: 0;
                left: 0;
            }
        }
    }
}

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

        .cs-item {
            grid-column: span 6;
        }

        .cs-stat {
            flex-direction: row;
            align-items: flex-start;
        }

        .cs-info {
            text-align: left;
            align-items: flex-start;
        }
    }
}

/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #donations-1428 {
        .cs-container {
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
        }

        .cs-content {
            text-align: left;
            /* this padding will push down and maintain the same distance between the bottom of the group and the top of the cs-stats-container.  That way when you add or subtract content from this group it will always be the right distance from the stat container below it */
            padding-bottom: (250/16rem);
            align-items: flex-start;
        }

        .cs-card-group {
            /* same amount as the translateY value to offset it */
            margin-bottom: (100/16rem);
            /* sends it to the left in the 1st position */
            order: -1;
            align-self: center;
        }

        .cs-item {
            &:nth-of-type(2) {
                transform: translateY(6.25rem);
            }
        }

        .cs-card-group {
            max-width: (630/16rem);
        }

        .cs-stats-container {
            max-width: (1280/16rem);
            /* makes it overlap the cs-container so the cards are next to it on the left */
            margin-top: (-150/16rem);
            display: flex;
            justify-content: flex-end;

            &:before {
                /* white background on the stats */
                /* we add this to be the background so as the height of the cs-content changes, this white background area will ALWAYS have 36 pixels between the top of it and the stats content below it.  This is an "illusion" we use to create the LOOK of it being the section background so we have mroe control over the white space above the stats group. */
                content: '';
                width: 105vw;
                height: (1000/16rem);
                background: #fff;
                opacity: 1;
                position: absolute;
                display: block;
                top: (-36/16rem);
                left: 50%;
                transform: translateX(-50%);
                z-index: -1;
            }
        }

        .cs-stats-group {
            max-width: (585/16rem);
            justify-content: flex-end;
        }

        .cs-background {
            height: 100%;
            max-height: 100%;
        }
    }
}

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

            .cs-title, .cs-text, .cs-h3, .cs-link, .cs-item-text, .cs-number, .cs-desc, .cs-percentage {
                color: var(--bodyTextColorWhite);
            }

            .cs-link {
                &:hover {
                    color: var(--secondary);
                }
            }

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

            .cs-item {
                background-color: var(--medium);
                border-color: rgba(255, 255, 255, .2);
                &:before {
                    opacity: .3;
                }
            }

            .cs-item-text {
                border-color: rgba(255, 255, 255, .2);
            }

            .cs-picture {
                &:before {
                    background-color: #FFF;
                }
            }

            .cs-progress {
                background-color: rgba(255, 255, 255, .2);
            }

            .cs-background {
                &:before {
                    background-color: rgba(0, 0, 0, .6);
                }
            }

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

            .cs-stat-number, .cs-desc {
                color: var(--bodyTextColorWhite);
            }

            .cs-desc {
                opacity: .8;
            }
        }
    }
}

/*-- -------------------------- -->
<---         Donations          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #donations-1428 {
        padding: var(--sectionPadding);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(40 / 16 * 1rem);
        position: relative;
        z-index: 1;
        
        .cs-container {
            width: 100%;
            /* changes to 1280px at tablet */
            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;
            z-index: 10;
        }

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: center;
            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: center;
        }

        .cs-topper {
            color: var(--secondary);
        }

        .cs-title {
            color: var(--bodyTextColorWhite);
        }
    
        .cs-text {
            margin-bottom: calc(16 / 16 * 1rem);
            color: var(--bodyTextColorWhite);
            opacity: .8;
            &:last-of-type {
                margin-bottom: calc(32 / 16 * 1rem);
            }
        }

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

            &:before {
                content: '';
                position: absolute;
                height: 100%;
                width: 0%;
                background: #fff;
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                border-radius: calc(8 / 16 * 1rem);
                transition: width .3s;
            }

            &:hover {
                color: var(--primary);
                &:before {
                    width: 100%;
                }
            }
        }

        .cs-card-group {
            width: 100%;
            /* changes to 630px at large desktop */
            max-width: calc(944 / 16 * 1rem);
            padding: 0;
            margin: 0;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: calc(20 / 16 * 1rem);
        }

        .cs-item {
            text-align: left;
            list-style: none;
            border-radius: calc(16 / 16 * 1rem);
            overflow: hidden;
            background-color: #fff;
            box-shadow: 0px 4px 120px 0px rgba(0, 0, 0, 0.12);
            grid-column: span 12;
            position: relative;
            z-index: 1;
            transition: box-shadow .3s, transform .3s;

            &:hover {
                box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
                .cs-picture {
                    img {
                        opacity: .3;
                        transform: scale(1.1);
                    }
                }

                .cs-h3 {
                    color: var(--primary);
                }
            }
        }

        .cs-link {
            text-decoration: none;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
        }

        .cs-picture {
            width: 100%;
            height: calc(240 / 16 * 1rem);
            background-color: var(--primary);
            overflow: hidden;
            display: block;
            position: relative;
            z-index: 1;

            img {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                object-fit: cover;
                transition: transform .6s, opacity .3s;
            }
        }

        .cs-flex {
            padding: calc(24 / 16 * 1rem);
            /* prblog padding from affecting height and width */
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            position: relative;
            z-index: 2;
        }

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

        .cs-item-text {
            /* 14px - 16px */
            font-size: clamp(.875rem, 1.5vw, 1rem);
            line-height: 1.5em;
            text-align: inherit;
            margin: 0 0 calc(24 / 16 * 1rem);
            padding: 0 0 calc(24 / 16 * 1rem);
            color: var(--bodyTextColor);
            border-bottom: 1px solid #E8E8E8;
        }

        .cs-donations-flex {
            width: 100%;
            margin: 0 0 calc(8 / 16 * 1rem);
        }

        .cs-bar {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            /* 4px - 8px */
            gap: clamp(.25rem, 1vw, .5rem);
        }

        .cs-progress {
            width: 100%;
            height: 6px;
            border-radius: calc(8 / 16 * 1rem);
            overflow: hidden;
            background-color: #E8E8E8;
        }

        .cs-progress-bar {
            width: var(--progress);
            height: 100%;
            background-color: var(--secondary);
            border-radius: calc(8 / 16 * 1rem);
            display: block;
        }

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

        .cs-number-group {
            width: 100%;
            margin: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: calc(24 / 16 * 1rem);
        }

        .cs-raised {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            gap: calc(4 / 16 * 1rem);
        }

        .cs-number {
            font-size: calc(14 / 16 * 1rem);
            line-height: 1.2em;
            margin: 0;
            color: var(--bodyTextColor);
            display: block;
        }

        .cs-stats-container {
            width: 100%;
            /* changes to 1280px at large desktop */
            max-width: calc(944 / 16 * 1rem);
            position: relative;
            z-index: 1;
        }

        .cs-stats-group {
            width: 100%;
            max-width: calc(944 / 16 * 1rem);
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            /* 16px - 20px */
            gap: clamp(1rem, 4vw, 4rem);
        }

        .cs-stat {
            list-style: none;
            width: 100%;
            max-width: calc(400 / 16 * 1rem);
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 16px - 20xp */
            gap: clamp(1rem, 2vw, 1.25rem);
            grid-column: span 6;
        }

        .cs-info {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: calc(8 / 16 * 1rem);
        }

        .cs-icon-wrapper {
            /* 60px - 88px */
            width: clamp(3.75rem, 7vw, 5.5rem);
            height: clamp(3.75rem, 7vw, 5.5rem);
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            /* prevents flexbox from squishing it */
            flex: none;
            position: relative;
            z-index: 1;

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

        .cs-icon {
            /* 32px - 48px */
            width: clamp(2rem, 4vw, 3rem);
            height: auto;
            display: block;
        }

        .cs-stat-number {
            /* 25px - 39px */
            font-size: clamp(1.5625rem, 3vw, 2.4375rem);
            text-align: inherit;
            line-height: 1.2em;
            font-weight: 900;
            margin: 0;
            color: var(--headerColor);
        }

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

        .cs-background {
            width: 100%;
            /* 100% at large desktop */
            height: 70%;
            /* removed at large desktop */
            max-height: calc(650 / 16 * 1rem);
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;

            &:before {
                content: "";
                width: 100%;
                height: 100%;
                background-color: #1A1A1A;
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
            }

            img {
                width: 100%;
                height: 100%;
                opacity: .02;
                object-fit: cover;
                top: 0;
                left: 0;
            }
        }
    }
}

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

        .cs-item {
            grid-column: span 6;
        }

        .cs-stat {
            flex-direction: row;
            align-items: flex-start;
        }

        .cs-info {
            text-align: left;
            align-items: flex-start;
        }
    }
}

/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #donations-1428 {
        .cs-container {
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
        }

        .cs-content {
            text-align: left;
            /* this padding will push down and maintain the same distance between the bottom of the group and the top of the cs-stats-container.  That way when you add or subtract content from this group it will always be the right distance from the stat container below it */
            padding-bottom: calc(250 / 16 * 1rem);
            align-items: flex-start;
        }

        .cs-card-group {
            /* same amount as the translateY value to offset it */
            margin-bottom: calc(100 / 16 * 1rem);
            /* sends it to the left in the 1st position */
            order: -1;
            align-self: center;
        }

        .cs-item {
            &:nth-of-type(2) {
                transform: translateY(6.25rem);
            }
        }

        .cs-card-group {
            max-width: calc(630 / 16 * 1rem);
        }

        .cs-stats-container {
            max-width: calc(1280 / 16 * 1rem);
            /* makes it overlap the cs-container so the cards are next to it on the left */
            margin-top: calc(-150 / 16 * 1rem);
            display: flex;
            justify-content: flex-end;

            &:before {
                /* white background on the stats */
                /* we add this to be the background so as the height of the cs-content changes, this white background area will ALWAYS have 36 pixels between the top of it and the stats content below it.  This is an "illusion" we use to create the LOOK of it being the section background so we have mroe control over the white space above the stats group. */
                content: '';
                width: 105vw;
                height: calc(1000 / 16 * 1rem);
                background: #fff;
                opacity: 1;
                position: absolute;
                display: block;
                top: calc(-36 / 16 * 1rem);
                left: 50%;
                transform: translateX(-50%);
                z-index: -1;
            }
        }

        .cs-stats-group {
            max-width: calc(585 / 16 * 1rem);
            justify-content: flex-end;
        }

        .cs-background {
            height: 100%;
            max-height: 100%;
        }
    }
}

/*-- -------------------------- -->
<---         Donations          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #donations-1428 {
        padding: var(--sectionPadding);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(40 / 16 * 1rem);
        position: relative;
        z-index: 1;
        
        .cs-container {
            width: 100%;
            /* changes to 1280px at tablet */
            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;
            z-index: 10;
        }

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: center;
            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: center;
        }

        .cs-topper {
            color: var(--secondary);
        }

        .cs-title {
            color: var(--bodyTextColorWhite);
        }
    
        .cs-text {
            margin-bottom: calc(16 / 16 * 1rem);
            color: var(--bodyTextColorWhite);
            opacity: .8;
            &:last-of-type {
                margin-bottom: calc(32 / 16 * 1rem);
            }
        }

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

            &:before {
                content: '';
                position: absolute;
                height: 100%;
                width: 0%;
                background: #fff;
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                border-radius: calc(8 / 16 * 1rem);
                transition: width .3s;
            }

            &:hover {
                color: var(--primary);
                &:before {
                    width: 100%;
                }
            }
        }

        .cs-card-group {
            width: 100%;
            /* changes to 630px at large desktop */
            max-width: calc(944 / 16 * 1rem);
            padding: 0;
            margin: 0;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: calc(20 / 16 * 1rem);
        }

        .cs-item {
            text-align: left;
            list-style: none;
            border-radius: calc(16 / 16 * 1rem);
            overflow: hidden;
            background-color: #fff;
            box-shadow: 0px 4px 120px 0px rgba(0, 0, 0, 0.12);
            grid-column: span 12;
            position: relative;
            z-index: 1;
            transition: box-shadow .3s, transform .3s;

            &:hover {
                box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
                .cs-picture {
                    img {
                        opacity: .3;
                        transform: scale(1.1);
                    }
                }

                .cs-h3 {
                    color: var(--primary);
                }
            }
        }

        .cs-link {
            text-decoration: none;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
        }

        .cs-picture {
            width: 100%;
            height: calc(240 / 16 * 1rem);
            background-color: var(--primary);
            overflow: hidden;
            display: block;
            position: relative;
            z-index: 1;

            img {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                object-fit: cover;
                transition: transform .6s, opacity .3s;
            }
        }

        .cs-flex {
            padding: calc(24 / 16 * 1rem);
            /* prblog padding from affecting height and width */
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            position: relative;
            z-index: 2;
        }

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

        .cs-item-text {
            /* 14px - 16px */
            font-size: clamp(.875rem, 1.5vw, 1rem);
            line-height: 1.5em;
            text-align: inherit;
            margin: 0 0 calc(24 / 16 * 1rem);
            padding: 0 0 calc(24 / 16 * 1rem);
            color: var(--bodyTextColor);
            border-bottom: 1px solid #E8E8E8;
        }

        .cs-donations-flex {
            width: 100%;
            margin: 0 0 calc(8 / 16 * 1rem);
        }

        .cs-bar {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            /* 4px - 8px */
            gap: clamp(.25rem, 1vw, .5rem);
        }

        .cs-progress {
            width: 100%;
            height: 6px;
            border-radius: calc(8 / 16 * 1rem);
            overflow: hidden;
            background-color: #E8E8E8;
        }

        .cs-progress-bar {
            width: var(--progress);
            height: 100%;
            background-color: var(--secondary);
            border-radius: calc(8 / 16 * 1rem);
            display: block;
        }

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

        .cs-number-group {
            width: 100%;
            margin: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: calc(24 / 16 * 1rem);
        }

        .cs-raised {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            gap: calc(4 / 16 * 1rem);
        }

        .cs-number {
            font-size: calc(14 / 16 * 1rem);
            line-height: 1.2em;
            margin: 0;
            color: var(--bodyTextColor);
            display: block;
        }

        .cs-stats-container {
            width: 100%;
            /* changes to 1280px at large desktop */
            max-width: calc(944 / 16 * 1rem);
            position: relative;
            z-index: 1;
        }

        .cs-stats-group {
            width: 100%;
            max-width: calc(944 / 16 * 1rem);
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            /* 16px - 20px */
            gap: clamp(1rem, 4vw, 4rem);
        }

        .cs-stat {
            list-style: none;
            width: 100%;
            max-width: calc(400 / 16 * 1rem);
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 16px - 20xp */
            gap: clamp(1rem, 2vw, 1.25rem);
            grid-column: span 6;
        }

        .cs-info {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: calc(8 / 16 * 1rem);
        }

        .cs-icon-wrapper {
            /* 60px - 88px */
            width: clamp(3.75rem, 7vw, 5.5rem);
            height: clamp(3.75rem, 7vw, 5.5rem);
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            /* prevents flexbox from squishing it */
            flex: none;
            position: relative;
            z-index: 1;

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

        .cs-icon {
            /* 32px - 48px */
            width: clamp(2rem, 4vw, 3rem);
            height: auto;
            display: block;
        }

        .cs-stat-number {
            /* 25px - 39px */
            font-size: clamp(1.5625rem, 3vw, 2.4375rem);
            text-align: inherit;
            line-height: 1.2em;
            font-weight: 900;
            margin: 0;
            color: var(--headerColor);
        }

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

        .cs-background {
            width: 100%;
            /* 100% at large desktop */
            height: 70%;
            /* removed at large desktop */
            max-height: calc(650 / 16 * 1rem);
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;

            &:before {
                content: "";
                width: 100%;
                height: 100%;
                background-color: #1A1A1A;
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
            }

            img {
                width: 100%;
                height: 100%;
                opacity: .02;
                object-fit: cover;
                top: 0;
                left: 0;
            }
        }
    }
}

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

        .cs-item {
            grid-column: span 6;
        }

        .cs-stat {
            flex-direction: row;
            align-items: flex-start;
        }

        .cs-info {
            text-align: left;
            align-items: flex-start;
        }
    }
}

/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #donations-1428 {
        .cs-container {
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
        }

        .cs-content {
            text-align: left;
            /* this padding will push down and maintain the same distance between the bottom of the group and the top of the cs-stats-container.  That way when you add or subtract content from this group it will always be the right distance from the stat container below it */
            padding-bottom: calc(250 / 16 * 1rem);
            align-items: flex-start;
        }

        .cs-card-group {
            /* same amount as the translateY value to offset it */
            margin-bottom: calc(100 / 16 * 1rem);
            /* sends it to the left in the 1st position */
            order: -1;
            align-self: center;
        }

        .cs-item {
            &:nth-of-type(2) {
                transform: translateY(6.25rem);
            }
        }

        .cs-card-group {
            max-width: calc(630 / 16 * 1rem);
        }

        .cs-stats-container {
            max-width: calc(1280 / 16 * 1rem);
            /* makes it overlap the cs-container so the cards are next to it on the left */
            margin-top: calc(-150 / 16 * 1rem);
            display: flex;
            justify-content: flex-end;

            &:before {
                /* white background on the stats */
                /* we add this to be the background so as the height of the cs-content changes, this white background area will ALWAYS have 36 pixels between the top of it and the stats content below it.  This is an "illusion" we use to create the LOOK of it being the section background so we have mroe control over the white space above the stats group. */
                content: '';
                width: 105vw;
                height: calc(1000 / 16 * 1rem);
                background: #fff;
                opacity: 1;
                position: absolute;
                display: block;
                top: calc(-36 / 16 * 1rem);
                left: 50%;
                transform: translateX(-50%);
                z-index: -1;
            }
        }

        .cs-stats-group {
            max-width: calc(585 / 16 * 1rem);
            justify-content: flex-end;
        }

        .cs-background {
            height: 100%;
            max-height: 100%;
        }
    }
}

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

            .cs-title, .cs-text, .cs-h3, .cs-link, .cs-item-text, .cs-number, .cs-desc, .cs-percentage {
                color: var(--bodyTextColorWhite);
            }

            .cs-link {
                &:hover {
                    color: var(--secondary);
                }
            }

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

            .cs-item {
                background-color: var(--medium);
                border-color: rgba(255, 255, 255, .2);
                &:before {
                    opacity: .3;
                }
            }

            .cs-item-text {
                border-color: rgba(255, 255, 255, .2);
            }

            .cs-picture {
                &:before {
                    background-color: #FFF;
                }
            }

            .cs-progress {
                background-color: rgba(255, 255, 255, .2);
            }

            .cs-background {
                &:before {
                    background-color: rgba(0, 0, 0, .6);
                }
            }

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

            .cs-stat-number, .cs-desc {
                color: var(--bodyTextColorWhite);
            }

            .cs-desc {
                opacity: .8;
            }
        }
    }
}

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