.steps-timeline {
    --color-fire-opal: #E3544E;
    --color-yale-blue: #18569A;

    .steps-timeline__steps {
        display: flex;
        flex-direction: column;
        row-gap: 1.75rem;
        margin-block: 0;
        padding-left: 0;
        list-style: none;
    }

    .steps-timeline__step {
        display: flex;
        justify-content: start;
        align-items: center;
        column-gap: 11px;

        &:nth-child(1) {
            --icon-color: var(--color-pale-blue);
            --character-color: var(--color-yale-blue);
        }

        &:nth-child(2) {
            --icon-color: var(--color-fire-opal);
            --character-color: var(--color-blood);
        }

        &:nth-child(3) {
            --icon-color: var(--color-yellow-green);
            --character-color: var(--color-rich-black);
        }
    }

    .steps-timeline__step-icon {
        width: 60px;
        height: 60px;
        box-sizing: border-box;
        border-radius: 50%;
        border: 2px solid var(--icon-color);
        font-family: var(--header-font), Arial, sans-serif;
        font-size: 2.25rem;
        font-weight: 700;
        color: var(--character-color);
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .steps-timeline__step--scroll {
        .steps-timeline__step-icon {
            background-color: var(--icon-color);
        }

        &.steps-timeline__step:not(:first-child) .steps-timeline__step-icon::before {
            content: '';
            width: 4px;
            height: 28.5px;
            background-color: var(--color-blue-violet);
            position: absolute;
            bottom: 103%;
            left: calc(50% - 2px);
        }
    }

    .steps-timeline__step-text {
        font-size: 1rem;
        line-height: 1;
        margin-block: 0;
    }

    @media (min-width: 1024px) {

        .steps-timeline__steps {
            row-gap: 2.25rem;
        }

        .steps-timeline__step {
            column-gap: 22px;
        }

        .steps-timeline__step--scroll.steps-timeline__step:not(:first-child) .steps-timeline__step-icon::before {
            height: 36px;
        }

        .steps-timeline__step-text {
            font-size: 1.25rem;

        }

    }
}