* { box-sizing: border-box; }

/* .row { border: solid 1px green; } */ /* TEST ROW SHRINKING... */

.row::after {
    content: "";
    clear: both;
    display: table;
}

.D-02 > * { width: 50%; float: left; border: solid 1px navy; }
.D-03 > * { width: 33.33332%; float: left; border: solid 1px navy; }
.D-04 > * { width: 25%; float: left; border: solid 1px navy; }
.D-05 > * { width: 20%; float: left; border: solid 1px navy; }
.D-06 > * { width: 16.66666%; float: left; border: solid 1px navy; }
.D-07 > * { width: 14.28571%; float: left; border: solid 1px navy; }
.D-08 > * { width: 12.5%; float: left; border: solid 1px navy; }
.D-09 > * { width: 11.11111%; float: left; border: solid 1px navy; }
.D-10 > * { width: 10%; float: left; border: solid 1px navy; }
.D-11 > * { width: 9.090909%; float: left; border: solid 1px navy; }
.D-12 > * { width: 8.33333%; float: left; border: solid 1px navy; }
.Y { background-color: yellow; }

/* DEFAULT (HIGH) RESOLUTION ----------------------------------------------------- */

.Column { border: solid 1px green; padding: 10px; text-align: center; }

.C-x12 { width: 100%; float: left; }
.C-x11 { width: 91.66666%; float: left; }
.C-x10 { width: 83.33333%; float: left; }
.C-x09 { width: 75%; float: left; }
.C-x08 { width: 66.66666%; float: left; }
.C-x07 { width: 58.33333%; float: left; }
.C-x06 { width: 50%; float: left; }
.C-x05 { width: 41.66666%; float: left; }
.C-x04 { width: 33.33332%; float: left; }
.C-x03 { width: 25%; float: left; }
.C-x02 { width: 16.66666%; float: left; }
.C-x01 { width: 8.33333%; float: left; }
.C-f08 { width: 12.5%; float: left; }
.C-f09 { width: 11.11111%; float: left; }
.C-f10 { width: 10%; float: left; }
.C-f11 { width: 9.0909%; float: left; }

/* MIDDLE RANGE RESOLUTION ------------------------------------------------------- */

@media all and (max-width: 960px) {

   [class*="M-"] { border: solid 1px gray; }

   .M-x12 { width: 100%; float: left; }
   .M-x11 { width: 91.66666%; float: left; }
   .M-x10 { width: 83.33333%; float: left; }
   .M-x09 { width: 75%; float: left; }
   .M-x08 { width: 66.66666%; float: left; }
   .M-x07 { width: 58.33333%; float: left; }
   .M-x06 { width: 50%; float: left; }
   .M-x05 { width: 41.66666%; float: left; }
   .M-x04 { width: 33.33332%; float: left; }
   .M-x03 { width: 25%; float: left; }
   .M-x02 { width: 16.66666%; float: left; }
   .M-x01 { width: 8.33333%; float: left; }
   .M-f08 { width: 12.5%; float: left; }
   .M-f09 { width: 11.11111%; float: left; }
   .M-f10 { width: 10%; float: left; }
   .M-f11 { width: 9.0909%; float: left; }

}

/* LOW RANGE RESOLUTION ---------------------------------------------------------- */

@media all and ( max-width: 640px ) {

   [class*="S-"] { border: solid 1px red; }

   .S-x12 { width: 100%; float: left; }
   .S-x11 { width: 91.66666%; float: left; }
   .S-x10 { width: 83.33333%; float: left; }
   .S-x09 { width: 75%; float: left; }
   .S-x08 { width: 66.66666%; float: left; }
   .S-x07 { width: 58.33333%; float: left; }
   .S-x06 { width: 50%; float: left; }
   .S-x05 { width: 41.66666%; float: left; }
   .S-x04 { width: 33.33332%; float: left; }
   .S-x03 { width: 25%; float: left; }
   .S-x02 { width: 16.66666%; float: left; }
   .S-x01 { width: 8.33333%; float: left; }
   .S-f08 { width: 12.5%; float: left; }
   .S-f09 { width: 11.11111%; float: left; }
   .S-f10 { width: 10%; float: left; }
   .S-f11 { width: 9.0909%; float: left; }

}

[class*="D-"] { border: solid 1px violet; }