.stages > * {
    margin: 6rem 0;
}
.after {
    min-height: 16rem;
    min-width: 12rem;
    position: absolute;
    background: linear-gradient(135deg, transparent 46%, rgb(237, 237, 237) 46%, rgb(237, 237, 237) 54%, transparent 54%);
    z-index: -5;
    right: calc(100% - 12rem / 2);
    top: 6rem;
}
.stage:nth-child(2n) .after {
    background: linear-gradient(45deg, transparent 46%, rgb(237, 237, 237) 46%, rgb(237, 237, 237) 54%, transparent 54%);
    right: calc(100% - 18rem);
    top: calc(22.5rem);
}

.stage:nth-child(2n+1) {
    position: relative;
    left: 12rem;
}

.stage img {
    height: 18rem;
    width: auto;
    margin: -4.375rem -2rem;
}
.stage h2, .stage p {
    text-indent: 2rem;
    letter-spacing: 0;
}

/* media */
@media (max-width: 1200px) {
    .stages > * {
        margin: 4rem 0;
    }
    .stage:nth-child(2n+1) {
        position: relative;
        left: 8rem;
    }
}
@media (max-width: 992px) {
    html {
        font-size: 14px;
    }
    .stages > * {
        margin: 2rem 0;
    }
    .stage:nth-child(2n+1) {
        position: relative;
        left: 0;
    }
    .stage img {
        margin: 0;
    }
    .stage h2, .stage p {
        text-align: center;
    }
    .after {
        display: none;
    }
}
@media (max-width: 768px) {
    h1 {
        text-align: center;
    }
    .stages > * {
        margin: 1rem 0;
    }

    .stage {
        flex-direction: column;
    }

    .stage img {
        margin-bottom: -1rem;
    }
    .stage p, .stage h2 {
        text-indent: 0;
        text-align: center;
        padding: 0 2%;
    }
}