Code of Stitch

4 Steps

<!-- ============================================ -->
<!--                   Steps                      -->
<!-- ============================================ -->

<section id="steps-1675">
    <div class="cs-container">
        <div class="cs-content">
            <span class="cs-topper">Our Steps</span>
            <h2 class="cs-title">How To Get Started</h2>
            <p class="cs-text">
                Designed to maintain your current colour, blend out a growing root or balance your blonde while providing full and semi-permanent coverage.
            </p>
        </div>
        <ul class="cs-card-group">
            <li class="cs-item">
                <span class="cs-number">01</span>
                <h3 class="cs-h3">Connect With Us</h3>
                <p class="cs-item-text">
                    We provide some of the finest quality, most responsive and reliable, and cost effective services and solutions.
                </p>
            </li>
            <li class="cs-item">
                <span class="cs-number">02</span>
                <h3 class="cs-h3">Make A schedule</h3>
                <p class="cs-item-text">
                    Fortune 500 companies to smaller and medium-sized companies to help manage risks to as low as reasonably practical.
                </p>
            </li>
            <li class="cs-item">
                <span class="cs-number">03</span>
                <h3 class="cs-h3">Describe Your Problem</h3>
                <p class="cs-item-text">
                    Highly experienced staff of more than 100 professionals averaging 29+ years in industry and hands-on knowledge.
                </p>
            </li>
            <li class="cs-item">
                <span class="cs-number">04</span>
                <h3 class="cs-h3">Get Expert Consultation</h3>
                <p class="cs-item-text">
                    Highly experienced staff of more than 100 professionals averaging 29+ years in industry and hands-on knowledge.
                </p>
            </li>
        </ul>
    </div>
</section>

/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #steps-1675 {
    padding: var(--sectionPadding);
    padding-left: 0;
    padding-right: 0;
  }
  #steps-1675 .cs-container {
    width: 100%;
    /* changes to 1920px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #steps-1675 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #steps-1675 .cs-text {
    /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
    max-width: 32.625rem;
  }
  #steps-1675 .cs-card-group {
    margin: 0;
    padding: 0;
    display: grid;
    justify-items: center;
    align-items: stretch;
    grid-auto-flow: row;
  }
  #steps-1675 .cs-item {
    list-style: none;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    /* bottom border */
  }
  #steps-1675 .cs-item::after {
    content: "";
    width: 100%;
    height: 1px;
    /* to change the color of the bottom border, adjust the second color (at 50%). the first and third will blend the color to transparent */
    /* note you'll also have to change the color in the tablet media query when the lines go vertical */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #bababa 50%, rgba(255, 255, 255, 0) 100%);
    opacity: .6;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #steps-1675 .cs-item:first-of-type {
    padding-top: 0;
  }
  #steps-1675 .cs-item:last-of-type {
    padding-bottom: 0;
  }
  #steps-1675 .cs-item:last-of-type::after {
    content: none;
  }
  #steps-1675 .cs-number {
    /* 80px - 100px */
    font-size: clamp(5rem, 1vw, 6.25rem);
    font-weight: 900;
    line-height: 1.2em;
    color: var(--primary);
    opacity: 0.12;
    display: block;
  }
  #steps-1675 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    margin: -1.9375rem 0 1rem 0;
    color: var(--headerColor);
  }
  #steps-1675 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2vw, 1rem);
    line-height: 1.5em;
    text-align: left;
    margin: 0;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #steps-1675 .cs-container {
    max-width: 120rem;
  }
  #steps-1675 .cs-card-group {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  #steps-1675 .cs-item {
    /* 24px - 60px */
    padding: clamp(1.5rem, 3vw, 3.75rem);
    /* the specificity of the mobile .cs-item means we need to explicitly define the first and last items here, too */
  }
  #steps-1675 .cs-item::after {
    width: 1px;
    height: 100%;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #bababa 50%, rgba(255, 255, 255, 0) 100%);
    opacity: .6;
    right: 0;
    left: initial;
  }
  #steps-1675 .cs-item:first-of-type,
  #steps-1675 .cs-item:last-of-type {
    /* 24px - 60px */
    padding: clamp(1.5rem, 3vw, 3.75rem);
  }
}

/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #steps-1675 {
    padding: var(--sectionPadding);
    padding-left: 0;
    padding-right: 0;
  }
  #steps-1675 .cs-container {
    width: 100%;
    /* changes to 1920px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #steps-1675 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #steps-1675 .cs-text {
    /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
    max-width: 32.625rem;
  }
  #steps-1675 .cs-card-group {
    margin: 0;
    padding: 0;
    display: grid;
    justify-items: center;
    align-items: stretch;
    grid-auto-flow: row;
  }
  #steps-1675 .cs-item {
    list-style: none;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    /* bottom border */
  }
  #steps-1675 .cs-item::after {
    content: "";
    width: 100%;
    height: 1px;
    /* to change the color of the bottom border, adjust the second color (at 50%). the first and third will blend the color to transparent */
    /* note you'll also have to change the color in the tablet media query when the lines go vertical */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #bababa 50%, rgba(255, 255, 255, 0) 100%);
    opacity: .6;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #steps-1675 .cs-item:first-of-type {
    padding-top: 0;
  }
  #steps-1675 .cs-item:last-of-type {
    padding-bottom: 0;
  }
  #steps-1675 .cs-item:last-of-type::after {
    content: none;
  }
  #steps-1675 .cs-number {
    /* 80px - 100px */
    font-size: clamp(5rem, 1vw, 6.25rem);
    font-weight: 900;
    line-height: 1.2em;
    color: var(--primary);
    opacity: 0.12;
    display: block;
  }
  #steps-1675 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    margin: -1.9375rem 0 1rem 0;
    color: var(--headerColor);
  }
  #steps-1675 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2vw, 1rem);
    line-height: 1.5em;
    text-align: left;
    margin: 0;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #steps-1675 .cs-container {
    max-width: 120rem;
  }
  #steps-1675 .cs-card-group {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  #steps-1675 .cs-item {
    /* 24px - 60px */
    padding: clamp(1.5rem, 3vw, 3.75rem);
    /* the specificity of the mobile .cs-item means we need to explicitly define the first and last items here, too */
  }
  #steps-1675 .cs-item::after {
    width: 1px;
    height: 100%;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #bababa 50%, rgba(255, 255, 255, 0) 100%);
    opacity: .6;
    right: 0;
    left: initial;
  }
  #steps-1675 .cs-item:first-of-type,
  #steps-1675 .cs-item:last-of-type {
    /* 24px - 60px */
    padding: clamp(1.5rem, 3vw, 3.75rem);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #steps-1675 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #steps-1675 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #steps-1675 .cs-item {
    border-color: var(--bodyTextColorWhite);
  }
  body.dark-mode #steps-1675 .cs-item:after {
    opacity: .2;
  }
  body.dark-mode #steps-1675 .cs-item-text,
  body.dark-mode #steps-1675 .cs-text {
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  body.dark-mode #steps-1675 .cs-h3,
  body.dark-mode #steps-1675 .cs-number {
    color: var(--primaryLight);
  }
}

/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/

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

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

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

        .cs-text {
            /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
            max-width: (522/16rem);
        }

        .cs-card-group {
            margin: 0;
            padding: 0;
            display: grid;
            justify-items: center;
            align-items: stretch;
            grid-auto-flow: row;
        }

        .cs-item {
            list-style: none;
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            padding: (24/16rem);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            position: relative;

            /* bottom border */
            &::after {
                content: "";
                width: 100%;
                height: 1px;
                /* to change the color of the bottom border, adjust the second color (at 50%). the first and third will blend the color to transparent */
                /* note you'll also have to change the color in the tablet media query when the lines go vertical */
                background: linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(186, 186, 186, 1) 50%,
                    rgba(255, 255, 255, 0) 100%
                );
                opacity: .6;
                position: absolute;
                bottom: 0;
                left: 0;
            }

            &:first-of-type {
                padding-top: 0;
            }

            &:last-of-type {
                padding-bottom: 0;

                &::after {
                    content: none;
                }
            }
        }

        .cs-number {
            /* 80px - 100px */
            font-size: clamp(5rem, 1vw, 6.25rem);
            font-weight: 900;
            line-height: 1.2em;
            color: var(--primary);
            opacity: 0.12;
            display: block;
        }

        .cs-h3 {
            /* 20px - 25px */
            font-size: clamp(1.25rem, 2vw, 1.5625rem);
            font-weight: 700;
            line-height: 1.2em;
            margin: (-31/16rem) 0 (16/16rem) 0;
            color: var(--headerColor);
        }

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

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

        .cs-card-group {
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
        }

        .cs-item {
            /* 24px - 60px */
            padding: clamp(1.5rem, 3vw, 3.75rem);

            &::after {
                width: 1px;
                height: 100%;
                background: linear-gradient(
                    0deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(186, 186, 186, 1) 50%,
                    rgba(255, 255, 255, 0) 100%
                );
                opacity: .6;
                right: 0;
                left: initial;
            }

            /* the specificity of the mobile .cs-item means we need to explicitly define the first and last items here, too */
            &:first-of-type,
            &:last-of-type {
                /* 24px - 60px */
                padding: clamp(1.5rem, 3vw, 3.75rem);
            }
        }
    }
}

/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/

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

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

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

        .cs-text {
            /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
            max-width: (522/16rem);
        }

        .cs-card-group {
            margin: 0;
            padding: 0;
            display: grid;
            justify-items: center;
            align-items: stretch;
            grid-auto-flow: row;
        }

        .cs-item {
            list-style: none;
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            padding: (24/16rem);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            position: relative;

            /* bottom border */
            &::after {
                content: "";
                width: 100%;
                height: 1px;
                /* to change the color of the bottom border, adjust the second color (at 50%). the first and third will blend the color to transparent */
                /* note you'll also have to change the color in the tablet media query when the lines go vertical */
                background: linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(186, 186, 186, 1) 50%,
                    rgba(255, 255, 255, 0) 100%
                );
                opacity: .6;
                position: absolute;
                bottom: 0;
                left: 0;
            }

            &:first-of-type {
                padding-top: 0;
            }

            &:last-of-type {
                padding-bottom: 0;

                &::after {
                    content: none;
                }
            }
        }

        .cs-number {
            /* 80px - 100px */
            font-size: clamp(5rem, 1vw, 6.25rem);
            font-weight: 900;
            line-height: 1.2em;
            color: var(--primary);
            opacity: 0.12;
            display: block;
        }

        .cs-h3 {
            /* 20px - 25px */
            font-size: clamp(1.25rem, 2vw, 1.5625rem);
            font-weight: 700;
            line-height: 1.2em;
            margin: (-31/16rem) 0 (16/16rem) 0;
            color: var(--headerColor);
        }

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

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

        .cs-card-group {
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
        }

        .cs-item {
            /* 24px - 60px */
            padding: clamp(1.5rem, 3vw, 3.75rem);

            &::after {
                width: 1px;
                height: 100%;
                background: linear-gradient(
                    0deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(186, 186, 186, 1) 50%,
                    rgba(255, 255, 255, 0) 100%
                );
                opacity: .6;
                right: 0;
                left: initial;
            }

            /* the specificity of the mobile .cs-item means we need to explicitly define the first and last items here, too */
            &:first-of-type,
            &:last-of-type {
                /* 24px - 60px */
                padding: clamp(1.5rem, 3vw, 3.75rem);
            }
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #steps-1675 {
            .cs-topper {
                color: var(--primaryLight);
            }
            .cs-title {
                color: var(--bodyTextColorWhite);
            }

            .cs-item {
                border-color: var(--bodyTextColorWhite);
                &:after {
                    opacity: .2;
                }
            }

            .cs-item-text, .cs-text {
                color: var(--bodyTextColorWhite);
                opacity: 0.8;
            }

            .cs-h3,
            .cs-number {
                color: var(--primaryLight);
            }
        }
    }
}

/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/

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

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

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

        .cs-text {
            /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
            max-width: calc(522 / 16 * 1rem);
        }

        .cs-card-group {
            margin: 0;
            padding: 0;
            display: grid;
            justify-items: center;
            align-items: stretch;
            grid-auto-flow: row;
        }

        .cs-item {
            list-style: none;
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            padding: calc(24 / 16 * 1rem);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            position: relative;

            /* bottom border */
            &::after {
                content: "";
                width: 100%;
                height: 1px;
                /* to change the color of the bottom border, adjust the second color (at 50%). the first and third will blend the color to transparent */
                /* note you'll also have to change the color in the tablet media query when the lines go vertical */
                background: linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(186, 186, 186, 1) 50%,
                    rgba(255, 255, 255, 0) 100%
                );
                position: absolute;
                bottom: 0;
                left: 0;
            }

            &:first-of-type {
                padding-top: 0;
            }

            &:last-of-type {
                padding-bottom: 0;

                &::after {
                    content: none;
                }
            }
        }

        .cs-number {
            /* 80px - 100px */
            font-size: clamp(5rem, 1vw, 6.25rem);
            font-weight: 900;
            line-height: 1.2em;
            color: var(--primary);
            opacity: 0.12;
            display: block;
        }

        .cs-h3 {
            /* 20px - 25px */
            font-size: clamp(1.25rem, 2vw, 1.5625rem);
            font-weight: 700;
            line-height: 1.2em;
            margin: calc(-31 / 16 * 1rem) 0 calc(16 / 16 * 1rem) 0;
            color: var(--headerColor);
        }

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

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

        .cs-card-group {
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
        }

        .cs-item {
            /* 24px - 60px */
            padding: clamp(1.5rem, 3vw, 3.75rem);

            &::after {
                width: 1px;
                height: 100%;
                background: linear-gradient(
                    0deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(186, 186, 186, 1) 50%,
                    rgba(255, 255, 255, 0) 100%
                );
                opacity: .6;
                opacity: .6;
                right: 0;
                left: initial;
            }

            /* the specificity of the mobile .cs-item means we need to explicitly define the first and last items here, too */
            &:first-of-type,
            &:last-of-type {
                /* 24px - 60px */
                padding: clamp(1.5rem, 3vw, 3.75rem);
            }
        }
    }
}

/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/

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

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

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

        .cs-text {
            /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
            max-width: calc(522 / 16 * 1rem);
        }

        .cs-card-group {
            margin: 0;
            padding: 0;
            display: grid;
            justify-items: center;
            align-items: stretch;
            grid-auto-flow: row;
        }

        .cs-item {
            list-style: none;
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            padding: calc(24 / 16 * 1rem);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            position: relative;

            /* bottom border */
            &::after {
                content: "";
                width: 100%;
                height: 1px;
                /* to change the color of the bottom border, adjust the second color (at 50%). the first and third will blend the color to transparent */
                /* note you'll also have to change the color in the tablet media query when the lines go vertical */
                background: linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(186, 186, 186, 1) 50%,
                    rgba(255, 255, 255, 0) 100%
                );
                position: absolute;
                bottom: 0;
                left: 0;
            }

            &:first-of-type {
                padding-top: 0;
            }

            &:last-of-type {
                padding-bottom: 0;

                &::after {
                    content: none;
                }
            }
        }

        .cs-number {
            /* 80px - 100px */
            font-size: clamp(5rem, 1vw, 6.25rem);
            font-weight: 900;
            line-height: 1.2em;
            color: var(--primary);
            opacity: 0.12;
            display: block;
        }

        .cs-h3 {
            /* 20px - 25px */
            font-size: clamp(1.25rem, 2vw, 1.5625rem);
            font-weight: 700;
            line-height: 1.2em;
            margin: calc(-31 / 16 * 1rem) 0 calc(16 / 16 * 1rem) 0;
            color: var(--headerColor);
        }

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

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

        .cs-card-group {
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
        }

        .cs-item {
            /* 24px - 60px */
            padding: clamp(1.5rem, 3vw, 3.75rem);

            &::after {
                width: 1px;
                height: 100%;
                background: linear-gradient(
                    0deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(186, 186, 186, 1) 50%,
                    rgba(255, 255, 255, 0) 100%
                );
                opacity: .6;
                opacity: .6;
                right: 0;
                left: initial;
            }

            /* the specificity of the mobile .cs-item means we need to explicitly define the first and last items here, too */
            &:first-of-type,
            &:last-of-type {
                /* 24px - 60px */
                padding: clamp(1.5rem, 3vw, 3.75rem);
            }
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #steps-1675 {
            .cs-topper {
                color: var(--primaryLight);
            }
            .cs-title {
                color: var(--bodyTextColorWhite);
            }

            .cs-item {
                border-color: var(--bodyTextColorWhite);
                &:after {
                    opacity: .2;
                }
            }

            .cs-item-text, .cs-text {
                color: var(--bodyTextColorWhite);
                opacity: 0.8;
            }

            .cs-h3,
            .cs-number {
                color: var(--primaryLight);
            }
        }
    }
}

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