CSS minimal grid medium screens

grid--md.css

/* Medium screens: desktops */
@media (min-width: 768px) {
    .contain { width: 700px; }
    .contain-fluid__slim--md { width: 70%; }
    .contain-fluid__medium--md { width: 80%; }
    .contain-fluid__wide--md { width: 90%; }
    .contain__slim, .contain__slim--md { width: 500px; }
    .contain__medium, .contain__medium--md { width: 600px; }
    .contain__wide, .contain__wide--md { width: 720px; }

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

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