/* flex */
[class*=fl--] {
    display: flex;
}

.fl--r {
    flex-direction: row;
}

.fl--c {
    flex-direction: column;
}

.fl--cr {
    flex-direction: column-reverse;
}

.fl--rw {
    flex-direction: row;
    flex-wrap: wrap;
}

.unit {
    flex: 1;
}

@media screen and (min-width: 720px) {
    .fl--r\@md {
        flex-direction: row;
    }
}

/* alignment */
.jc--sb {
    justify-content: space-between;
}

.jc--sa {
    justify-content: space-around;
}

.jc--c {
    justify-content: center;
}

.ai--c {
    align-items: center;
}