CSS minimal grid large screens

grid--lg.css

/* Large screens: big screens */
@media (min-width: 992px) {
    .contain-fluid__slim--lg { width: 70%; }
    .contain-fluid__medium--lg { width: 80%; }
    .contain-fluid__wide--lg { width: 90%; }
    .contain { width: 900px; }
    .contain__slim, .contain__slim--lg { width: 700px; }
    .contain__medium, .contain__medium--lg { width: 800px; }
    .contain__wide, .contain__wide--lg { width: 920px; }

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

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