#section-process {
    --paddingX: 0;
    position: relative;
    overflow: hidden;
}

#process {
    --maxWidth: 1250px;
}

.process-step {
    display: flex;
    align-items: center;
}

.process-step.left {
    flex-direction: row-reverse;
    text-align: right;
}

.process-step.right {
    text-align: left;
}

.process-step-info {
    flex: 1;
}

.process-step:not(:first-child) {
    margin-top: 30px;
}

.process-step-icon {
    --fontSize: 48px;
    --marginX: 15px;
    --iconSize: calc(var(--fontSize) + 18px * 2);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--red);
    font-size: var(--fontSize);
    width: var(--iconSize);
    height: var(--iconSize);
}

.process-step.left .process-step-icon {
    margin-left: var(--marginX);
}

.process-step.right .process-step-icon {
    margin-right: var(--marginX);
}

.process-step-name {
    color: var(--red);
    font-weight: 700;
    text-transform: uppercase;
}

.process-step-desc {
    margin-top: var(--margin);
}

#process-background {
    --angle: -15deg;
    --width: 0.8;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: #545454;
    overflow: hidden;
    transform: rotate(var(--angle));
    transform-origin: top right;
}

@media (min-width: 1024px) {
    .process-step {
        --marginX: 50%;
    }
    .process-step.left {
        margin-right: var(--marginX);
    }
    .process-step.right {
        margin-left: var(--marginX);
    }
    .process-step-info {
        border-top: 2px solid var(--red);
        padding-top: 8px;
    }
    /* NOTE: Better way to make this responsive? Cant seem to 
    use calc() within rotate */
    #process-background {
        --desktop: 3deg;
    }
}