CSS minimal grid Xtra large screens

grid--xl.css

@media (min-width: 1200px) {
    .contain-fluid__slim--xl { width: 70%; }
    .contain-fluid__medium--xl { width: 80%; }
    .contain-fluid__wide--xl { width: 90%; }
    .contain { width: 1000px; }
    .contain__slim, .contain__slim--xl { width: 800px; }
    .contain__medium, .contain__medium--xl { width: 900px; }
    .contain__wide, .contain__wide--xl { width: 1020px; }

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

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