CSS minimal grid small screens

grid--sm.css

/* Small screens: tablets */
@media (min-width: 576px) {
    .contain { width: 500px; }
    .contain-fluid__slim--sm { width: 70%; }
    .contain-fluid__medium--sm { width: 80%; }
    .contain-fluid__wide--sm { width: 90%; }
    .contain__slim, .contain__slim--sm { width: 300px; }
    .contain__medium, .contain__medium--sm { width: 400px; }
    .contain__wide, .contain__wide--sm { width: 520px; }

    .items__start--sm { align-items: flex-start; }
    .items__end--sm { align-items: flex-end; }
    .items__center--sm { align-items: center; }
    .self__start--sm { align-self: flex-start; }
    .self__end--sm { align-self: flex-end; }
    .self__center--sm { align-self: center; }
    .justify__start--sm { justify-content: flex-start; }
    .justify__center--sm { justify-content: center; }
    .justify__end--sm { justify-content: flex-end; }
    .justify__between--sm { justify-content: space-between; }
    .justify__around--sm { justify-content: space-around; }

    .col__fill--sm { flex: 1; }
    .col__12--sm { flex: 0 0 100%; }
    .col__11--sm { flex: 0 0 91.6666666667%; }
    .col__10--sm { flex: 0 0 83.3333333333%; }
    .col__9--sm { flex: 0 0 75%; }
    .col__8--sm { flex: 0 0 66.6666666667%; }
    .col__7--sm { flex: 0 0 58.3333333333%; }
    .col__6--sm { flex: 0 0 50%; }
    .col__5--sm { flex: 0 0 41.6666666667%; }
    .col__4--sm { flex: 0 0 33.3333333333%; }
    .col__3--sm { flex: 0 0 25%; }
    .col__2--sm { flex: 0 0 16.6666666667%; }
    .col__1--sm { flex: 0 0 8.3333333333%; }
}