.fade-in {
    opacity: 0;
    transition: opacity 250ms ease-in;
}

.fade-in.appear {
    opacity: 1;
}

.more-stuff-grid {
    background: #f4f4f4;
    padding: 4em 0;
    display: grid;
    grid-gap: 2em;
    align-items: center;
    grid-template-columns: minmax(1em, 1fr) repeat(2, minmax(200px, 400px)) minmax(
            1em,
            1fr
    );
}

.from-left {
    grid-column: 2 / 3;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.from-right {
    grid-column: 3 / 4;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
}

.from-left,
.from-right {
    transition: opacity 250ms ease-in, -webkit-transform 400ms ease-in;
    transition: opacity 250ms ease-in, transform 400ms ease-in;
    transition: opacity 250ms ease-in, transform 400ms ease-in,
    -webkit-transform 400ms ease-in;
    opacity: 0;
}

.from-left.appear,
.from-right.appear {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
}