Code of Stitch

3 Steps

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

<section id="steps-889">
    <div class="cs-container">
        <div class="cs-content">
            <span class="cs-topper">Our Process</span>
            <h2 class="cs-title">How It Works</h2>
            <p class="cs-text">
                Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.
            </p>
        </div>
        <ul class="cs-card-group">
            <li class="cs-item">
                <picture class="cs-picture">
                    <img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Ficon-orange.svg" alt="icon" width="32" height="32" loading="lazy" decoding="async" aria-hidden="true">
                </picture>
                <h3 class="cs-h3">Contact Us</h3>
                <p class="cs-item-p">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero nemo voluptate.
                </p>
            </li>
            <!--Arrow-->
            <li class="cs-item cs-arrow" aria-hidden="true">
                <img class="cs-arrow-img" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Farrow-curve-right.svg" alt="icon" width="80" height="76" loading="lazy" decoding="async" aria-hidden="true">
            </li>
            <li class="cs-item">
                <picture class="cs-picture">
                    <img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Ficon-orange.svg" alt="icon" width="32" height="32" loading="lazy" decoding="async" aria-hidden="true">
                </picture>
                <h3 class="cs-h3">Initial Evaluation</h3>
                <p class="cs-item-p">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero nemo voluptate.
                </p>
            </li>
            <!--Arrow-->
            <li class="cs-item cs-arrow" aria-hidden="true">
                <img class="cs-arrow-img" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Farrow-curve-right.svg" alt="icon" width="80" height="76" loading="lazy" decoding="async" aria-hidden="true">
            </li>
            <li class="cs-item">
                <picture class="cs-picture">
                    <img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Ficon-orange.svg" alt="icon" width="32" height="32" loading="lazy" decoding="async" aria-hidden="true">
                </picture>
                <h3 class="cs-h3">Develop a Plan</h3>
                <p class="cs-item-p">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero nemo voluptate.
                </p>
            </li>
        </ul>
        <a href="" class="cs-button-solid">View All Projects</a>
    </div>
</section>

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

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

    #steps-889 .cs-text {
        max-width: 66.5rem;
    }
    #steps-889 .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 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #steps-889 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #steps-889 .cs-button-solid:hover:before {
        width: 100%;
    }
    #steps-889 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 20px - 40px */
        gap: clamp(1.25rem, 3vw, 2.5rem);
    }
    #steps-889 .cs-item {
        text-align: center;
        list-style: none;
        width: 100%;
        max-width: 20.375rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #steps-889 .cs-picture {
        margin-bottom: 1.5rem;
        width: 4.5rem;
        height: 4.5rem;
        background-color: rgba(206, 65, 13, 0.05);
        border-radius: 1rem 0 1rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #steps-889 .cs-h3 {
        font-size: 1.25rem;
        line-height: 1.2em;
        text-align: inherit;
        margin: 0 0 0.75rem 0;
        color: var(--headerColor);
    }
    #steps-889 .cs-item-p {
        font-size: 1rem;
        line-height: 1.5em;
        text-align: inherit;
        margin: 0;
        color: var(--bodyTextColor);
    }
    #steps-889 .cs-arrow {
        /* 48px - 80px */
        width: clamp(3rem, 6vw, 5rem);
        height: auto;
        display: block;
        flex: none;
        transform: rotate(120deg);
    }
    #steps-889 .cs-arrow-img {
        width: 100%;
        display: block;
    }
    #steps-889 .cs-icon {
        width: 2rem;
        height: auto;
        display: block;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #steps-889 .cs-card-group {
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
    }
    #steps-889 .cs-arrow {
        align-self: center;
        transform: rotate(40deg);
    }
}

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

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

    #steps-889 .cs-text {
        max-width: 66.5rem;
    }
    #steps-889 .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 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #steps-889 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #steps-889 .cs-button-solid:hover:before {
        width: 100%;
    }
    #steps-889 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 20px - 40px */
        gap: clamp(1.25rem, 3vw, 2.5rem);
    }
    #steps-889 .cs-item {
        text-align: center;
        list-style: none;
        width: 100%;
        max-width: 20.375rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #steps-889 .cs-picture {
        margin-bottom: 1.5rem;
        width: 4.5rem;
        height: 4.5rem;
        background-color: rgba(206, 65, 13, 0.05);
        border-radius: 1rem 0 1rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #steps-889 .cs-h3 {
        font-size: 1.25rem;
        line-height: 1.2em;
        text-align: inherit;
        margin: 0 0 0.75rem 0;
        color: var(--headerColor);
    }
    #steps-889 .cs-item-p {
        font-size: 1rem;
        line-height: 1.5em;
        text-align: inherit;
        margin: 0;
        color: var(--bodyTextColor);
    }
    #steps-889 .cs-arrow {
        /* 48px - 80px */
        width: clamp(3rem, 6vw, 5rem);
        height: auto;
        display: block;
        flex: none;
        transform: rotate(120deg);
    }
    #steps-889 .cs-arrow-img {
        width: 100%;
        display: block;
    }
    #steps-889 .cs-icon {
        width: 2rem;
        height: auto;
        display: block;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #steps-889 .cs-card-group {
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
    }
    #steps-889 .cs-arrow {
        align-self: center;
        transform: rotate(40deg);
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #steps-889 .cs-topper {
        color: var(--primaryLight);
    }
    body.dark-mode #steps-889 .cs-title,
    body.dark-mode #steps-889 .cs-text,
    body.dark-mode #steps-889 .cs-h3,
    body.dark-mode #steps-889 .cs-item-p {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #steps-889 .cs-text,
    body.dark-mode #steps-889 .cs-item-p {
        opacity: 0.8;
    }
    body.dark-mode #steps-889 .cs-picture {
        background-color: var(--accent);
    }
    body.dark-mode #steps-889 .cs-arrow {
        opacity: 0.5;
    }
}

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

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

        .cs-container {
            width: 100%;
            max-width: (1280/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%;
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: center;
        }

        .cs-text {
            max-width: (1064/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 (24/16rem);
            background-color: var(--primary);
            border-radius: (4/16rem);
            display: inline-block;
            position: relative;
            z-index: 1;
            /* prevents padding from adding to the width */
            box-sizing: border-box;

            &:before {
                content: "";
                position: absolute;
                height: 100%;
                width: 0%;
                background: #000;
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                border-radius: (4/16rem);
                transition: width 0.3s;
            }

            &:hover {
                &:before {
                    width: 100%;
                }
            }
        }

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 20px - 40px */
            gap: clamp(1.25rem, 3vw, 2.5rem);
        }

        .cs-item {
            text-align: center;
            list-style: none;
            width: 100%;
            max-width: (326/16rem);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .cs-picture {
            margin-bottom: (24/16rem);
            width: (72/16rem);
            height: (72/16rem);
            background-color: rgba(206, 65, 13, 0.05);
            border-radius: (16/16rem) 0 (16/16rem) 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

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

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

        .cs-arrow {
            /* 48px - 80px */
            width: clamp(3rem, 6vw, 5rem);
            height: auto;
            display: block;
            flex: none;
            transform: rotate(120deg);
        }

        .cs-arrow-img {
            width: 100%;
            display: block;
        }

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

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #steps-889 {
        .cs-card-group {
            flex-direction: row;
            justify-content: space-between;
            align-items: stretch;
        }

        .cs-arrow {
            align-self: center;
            transform: rotate(40deg);
        }
    }
}

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

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

        .cs-container {
            width: 100%;
            max-width: (1280/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%;
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: center;
        }

        .cs-text {
            max-width: (1064/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 (24/16rem);
            background-color: var(--primary);
            border-radius: (4/16rem);
            display: inline-block;
            position: relative;
            z-index: 1;
            /* prevents padding from adding to the width */
            box-sizing: border-box;

            &:before {
                content: "";
                position: absolute;
                height: 100%;
                width: 0%;
                background: #000;
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                border-radius: (4/16rem);
                transition: width 0.3s;
            }

            &:hover {
                &:before {
                    width: 100%;
                }
            }
        }

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 20px - 40px */
            gap: clamp(1.25rem, 3vw, 2.5rem);
        }

        .cs-item {
            text-align: center;
            list-style: none;
            width: 100%;
            max-width: (326/16rem);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .cs-picture {
            margin-bottom: (24/16rem);
            width: (72/16rem);
            height: (72/16rem);
            background-color: rgba(206, 65, 13, 0.05);
            border-radius: (16/16rem) 0 (16/16rem) 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

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

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

        .cs-arrow {
            /* 48px - 80px */
            width: clamp(3rem, 6vw, 5rem);
            height: auto;
            display: block;
            flex: none;
            transform: rotate(120deg);
        }

        .cs-arrow-img {
            width: 100%;
            display: block;
        }

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

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #steps-889 {
        .cs-card-group {
            flex-direction: row;
            justify-content: space-between;
            align-items: stretch;
        }

        .cs-arrow {
            align-self: center;
            transform: rotate(40deg);
        }
    }
}

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

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

            .cs-text,
            .cs-item-p {
                opacity: 0.8;
            }

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

            .cs-arrow {
                opacity: 0.5;
            }
        }
    }
}

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

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

        .cs-container {
            width: 100%;
            max-width: calc(1280 / 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%;
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: center;
        }

        .cs-text {
            max-width: calc(1064 / 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(24 / 16 * 1rem);
            background-color: var(--primary);
            border-radius: calc(4 / 16 * 1rem);
            display: inline-block;
            position: relative;
            z-index: 1;
            /* prevents padding from adding to the width */
            box-sizing: border-box;

            &:before {
                content: "";
                position: absolute;
                height: 100%;
                width: 0%;
                background: #000;
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                border-radius: calc(4 / 16 * 1rem);
                transition: width 0.3s;
            }

            &:hover {
                &:before {
                    width: 100%;
                }
            }
        }

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 20px - 40px */
            gap: clamp(1.25rem, 3vw, 2.5rem);
        }

        .cs-item {
            text-align: center;
            list-style: none;
            width: 100%;
            max-width: calc(326 / 16 * 1rem);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .cs-picture {
            margin-bottom: calc(24 / 16 * 1rem);
            width: calc(72 / 16 * 1rem);
            height: calc(72 / 16 * 1rem);
            background-color: rgba(206, 65, 13, 0.05);
            border-radius: calc(16 / 16 * 1rem) 0 calc(16 / 16 * 1rem) 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

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

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

        .cs-arrow {
            /* 48px - 80px */
            width: clamp(3rem, 6vw, 5rem);
            height: auto;
            display: block;
            flex: none;
            transform: rotate(120deg);
        }

        .cs-arrow-img {
            width: 100%;
            display: block;
        }

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

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #steps-889 {
        .cs-card-group {
            flex-direction: row;
            justify-content: space-between;
            align-items: stretch;
        }

        .cs-arrow {
            align-self: center;
            transform: rotate(40deg);
        }
    }
}

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

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

        .cs-container {
            width: 100%;
            max-width: calc(1280 / 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%;
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: center;
        }

        .cs-text {
            max-width: calc(1064 / 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(24 / 16 * 1rem);
            background-color: var(--primary);
            border-radius: calc(4 / 16 * 1rem);
            display: inline-block;
            position: relative;
            z-index: 1;
            /* prevents padding from adding to the width */
            box-sizing: border-box;

            &:before {
                content: "";
                position: absolute;
                height: 100%;
                width: 0%;
                background: #000;
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                border-radius: calc(4 / 16 * 1rem);
                transition: width 0.3s;
            }

            &:hover {
                &:before {
                    width: 100%;
                }
            }
        }

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 20px - 40px */
            gap: clamp(1.25rem, 3vw, 2.5rem);
        }

        .cs-item {
            text-align: center;
            list-style: none;
            width: 100%;
            max-width: calc(326 / 16 * 1rem);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .cs-picture {
            margin-bottom: calc(24 / 16 * 1rem);
            width: calc(72 / 16 * 1rem);
            height: calc(72 / 16 * 1rem);
            background-color: rgba(206, 65, 13, 0.05);
            border-radius: calc(16 / 16 * 1rem) 0 calc(16 / 16 * 1rem) 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

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

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

        .cs-arrow {
            /* 48px - 80px */
            width: clamp(3rem, 6vw, 5rem);
            height: auto;
            display: block;
            flex: none;
            transform: rotate(120deg);
        }

        .cs-arrow-img {
            width: 100%;
            display: block;
        }

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

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #steps-889 {
        .cs-card-group {
            flex-direction: row;
            justify-content: space-between;
            align-items: stretch;
        }

        .cs-arrow {
            align-self: center;
            transform: rotate(40deg);
        }
    }
}

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

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

            .cs-text,
            .cs-item-p {
                opacity: 0.8;
            }

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

            .cs-arrow {
                opacity: 0.5;
            }
        }
    }
}

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