fomantic-ui 2.9.0-beta.77 → 2.9.0-beta.80

package/src/definitions/collections/grid.less

@@ -39,13 +39,17 @@
   margin-left: -(@gutterWidth / 2);
   margin-right: -(@gutterWidth / 2);
 }
-.ui.relaxed.grid  {
-  margin-left: -(@relaxedGutterWidth / 2);
-  margin-right: -(@relaxedGutterWidth / 2);
-}
-.ui[class*="very relaxed"].grid  {
-  margin-left: -(@veryRelaxedGutterWidth / 2);
-  margin-right: -(@veryRelaxedGutterWidth / 2);
+& when (@variationGridRelaxed) {
+  .ui.relaxed.grid {
+    margin-left: -(@relaxedGutterWidth / 2);
+    margin-right: -(@relaxedGutterWidth / 2);
+  }
+  & when (@variationGridVeryRelaxed) {
+    .ui[class*="very relaxed"].grid {
+      margin-left: -(@veryRelaxedGutterWidth / 2);
+      margin-right: -(@veryRelaxedGutterWidth / 2);
+    }
+  }
 }
 
 
@@ -338,609 +342,611 @@
   }
 }
 
-/*-------------------
-    Column Width
---------------------*/
-
-/* Sizing Combinations */
-.ui.grid > .row > [class*="one wide"].column,
-.ui.grid > .column.row > [class*="one wide"].column,
-.ui.grid > [class*="one wide"].column,
-.ui.column.grid > [class*="one wide"].column {
-  width: @oneWide !important;
-}
-.ui.grid > .row > [class*="two wide"].column,
-.ui.grid > .column.row > [class*="two wide"].column,
-.ui.grid > [class*="two wide"].column,
-.ui.column.grid > [class*="two wide"].column {
-  width: @twoWide !important;
-}
-.ui.grid > .row > [class*="three wide"].column,
-.ui.grid > .column.row > [class*="three wide"].column,
-.ui.grid > [class*="three wide"].column,
-.ui.column.grid > [class*="three wide"].column {
-  width: @threeWide !important;
-}
-.ui.grid > .row > [class*="four wide"].column,
-.ui.grid > .column.row > [class*="four wide"].column,
-.ui.grid > [class*="four wide"].column,
-.ui.column.grid > [class*="four wide"].column {
-  width: @fourWide !important;
-}
-.ui.grid > .row > [class*="five wide"].column,
-.ui.grid > .column.row > [class*="five wide"].column,
-.ui.grid > [class*="five wide"].column,
-.ui.column.grid > [class*="five wide"].column {
-  width: @fiveWide !important;
-}
-.ui.grid > .row > [class*="six wide"].column,
-.ui.grid > .column.row > [class*="six wide"].column,
-.ui.grid > [class*="six wide"].column,
-.ui.column.grid > [class*="six wide"].column {
-  width: @sixWide !important;
-}
-.ui.grid > .row > [class*="seven wide"].column,
-.ui.grid > .column.row > [class*="seven wide"].column,
-.ui.grid > [class*="seven wide"].column,
-.ui.column.grid > [class*="seven wide"].column {
-  width: @sevenWide !important;
-}
-.ui.grid > .row > [class*="eight wide"].column,
-.ui.grid > .column.row > [class*="eight wide"].column,
-.ui.grid > [class*="eight wide"].column,
-.ui.column.grid > [class*="eight wide"].column {
-  width: @eightWide !important;
-}
-.ui.grid > .row > [class*="nine wide"].column,
-.ui.grid > .column.row > [class*="nine wide"].column,
-.ui.grid > [class*="nine wide"].column,
-.ui.column.grid > [class*="nine wide"].column {
-  width: @nineWide !important;
-}
-.ui.grid > .row > [class*="ten wide"].column,
-.ui.grid > .column.row > [class*="ten wide"].column,
-.ui.grid > [class*="ten wide"].column,
-.ui.column.grid > [class*="ten wide"].column {
-  width: @tenWide !important;
-}
-.ui.grid > .row > [class*="eleven wide"].column,
-.ui.grid > .column.row > [class*="eleven wide"].column,
-.ui.grid > [class*="eleven wide"].column,
-.ui.column.grid > [class*="eleven wide"].column {
-  width: @elevenWide !important;
-}
-.ui.grid > .row > [class*="twelve wide"].column,
-.ui.grid > .column.row > [class*="twelve wide"].column,
-.ui.grid > [class*="twelve wide"].column,
-.ui.column.grid > [class*="twelve wide"].column {
-  width: @twelveWide !important;
-}
-.ui.grid > .row > [class*="thirteen wide"].column,
-.ui.grid > .column.row > [class*="thirteen wide"].column,
-.ui.grid > [class*="thirteen wide"].column,
-.ui.column.grid > [class*="thirteen wide"].column {
-  width: @thirteenWide !important;
-}
-.ui.grid > .row > [class*="fourteen wide"].column,
-.ui.grid > .column.row > [class*="fourteen wide"].column,
-.ui.grid > [class*="fourteen wide"].column,
-.ui.column.grid > [class*="fourteen wide"].column {
-  width: @fourteenWide !important;
-}
-.ui.grid > .row > [class*="fifteen wide"].column,
-.ui.grid > .column.row > [class*="fifteen wide"].column,
-.ui.grid > [class*="fifteen wide"].column,
-.ui.column.grid > [class*="fifteen wide"].column {
-  width: @fifteenWide !important;
-}
-.ui.grid > .row > [class*="sixteen wide"].column,
-.ui.grid > .column.row > [class*="sixteen wide"].column,
-.ui.grid > [class*="sixteen wide"].column,
-.ui.column.grid > [class*="sixteen wide"].column {
-  width: @sixteenWide !important;
-}
-
-/*----------------------
-    Width per Device
------------------------*/
+& when (@variationGridWide) {
+  /*-------------------
+      Column Width
+  --------------------*/
 
-/* Mobile Sizing Combinations */
-@media only screen and (min-width: @mobileBreakpoint) and (max-width: @largestMobileScreen) {
-  .ui.grid > .row > [class*="one wide mobile"].column,
-  .ui.grid > .column.row > [class*="one wide mobile"].column,
-  .ui.grid > [class*="one wide mobile"].column,
-  .ui.column.grid > [class*="one wide mobile"].column {
+  /* Sizing Combinations */
+  .ui.grid > .row > [class*="one wide"].column,
+  .ui.grid > .column.row > [class*="one wide"].column,
+  .ui.grid > [class*="one wide"].column,
+  .ui.column.grid > [class*="one wide"].column {
     width: @oneWide !important;
   }
-  .ui.grid > .row > [class*="two wide mobile"].column,
-  .ui.grid > .column.row > [class*="two wide mobile"].column,
-  .ui.grid > [class*="two wide mobile"].column,
-  .ui.column.grid > [class*="two wide mobile"].column {
+  .ui.grid > .row > [class*="two wide"].column,
+  .ui.grid > .column.row > [class*="two wide"].column,
+  .ui.grid > [class*="two wide"].column,
+  .ui.column.grid > [class*="two wide"].column {
     width: @twoWide !important;
   }
-  .ui.grid > .row > [class*="three wide mobile"].column,
-  .ui.grid > .column.row > [class*="three wide mobile"].column,
-  .ui.grid > [class*="three wide mobile"].column,
-  .ui.column.grid > [class*="three wide mobile"].column {
+  .ui.grid > .row > [class*="three wide"].column,
+  .ui.grid > .column.row > [class*="three wide"].column,
+  .ui.grid > [class*="three wide"].column,
+  .ui.column.grid > [class*="three wide"].column {
     width: @threeWide !important;
   }
-  .ui.grid > .row > [class*="four wide mobile"].column,
-  .ui.grid > .column.row > [class*="four wide mobile"].column,
-  .ui.grid > [class*="four wide mobile"].column,
-  .ui.column.grid > [class*="four wide mobile"].column {
+  .ui.grid > .row > [class*="four wide"].column,
+  .ui.grid > .column.row > [class*="four wide"].column,
+  .ui.grid > [class*="four wide"].column,
+  .ui.column.grid > [class*="four wide"].column {
     width: @fourWide !important;
   }
-  .ui.grid > .row > [class*="five wide mobile"].column,
-  .ui.grid > .column.row > [class*="five wide mobile"].column,
-  .ui.grid > [class*="five wide mobile"].column,
-  .ui.column.grid > [class*="five wide mobile"].column {
+  .ui.grid > .row > [class*="five wide"].column,
+  .ui.grid > .column.row > [class*="five wide"].column,
+  .ui.grid > [class*="five wide"].column,
+  .ui.column.grid > [class*="five wide"].column {
     width: @fiveWide !important;
   }
-  .ui.grid > .row > [class*="six wide mobile"].column,
-  .ui.grid > .column.row > [class*="six wide mobile"].column,
-  .ui.grid > [class*="six wide mobile"].column,
-  .ui.column.grid > [class*="six wide mobile"].column {
+  .ui.grid > .row > [class*="six wide"].column,
+  .ui.grid > .column.row > [class*="six wide"].column,
+  .ui.grid > [class*="six wide"].column,
+  .ui.column.grid > [class*="six wide"].column {
     width: @sixWide !important;
   }
-  .ui.grid > .row > [class*="seven wide mobile"].column,
-  .ui.grid > .column.row > [class*="seven wide mobile"].column,
-  .ui.grid > [class*="seven wide mobile"].column,
-  .ui.column.grid > [class*="seven wide mobile"].column {
+  .ui.grid > .row > [class*="seven wide"].column,
+  .ui.grid > .column.row > [class*="seven wide"].column,
+  .ui.grid > [class*="seven wide"].column,
+  .ui.column.grid > [class*="seven wide"].column {
     width: @sevenWide !important;
   }
-  .ui.grid > .row > [class*="eight wide mobile"].column,
-  .ui.grid > .column.row > [class*="eight wide mobile"].column,
-  .ui.grid > [class*="eight wide mobile"].column,
-  .ui.column.grid > [class*="eight wide mobile"].column {
+  .ui.grid > .row > [class*="eight wide"].column,
+  .ui.grid > .column.row > [class*="eight wide"].column,
+  .ui.grid > [class*="eight wide"].column,
+  .ui.column.grid > [class*="eight wide"].column {
     width: @eightWide !important;
   }
-  .ui.grid > .row > [class*="nine wide mobile"].column,
-  .ui.grid > .column.row > [class*="nine wide mobile"].column,
-  .ui.grid > [class*="nine wide mobile"].column,
-  .ui.column.grid > [class*="nine wide mobile"].column {
+  .ui.grid > .row > [class*="nine wide"].column,
+  .ui.grid > .column.row > [class*="nine wide"].column,
+  .ui.grid > [class*="nine wide"].column,
+  .ui.column.grid > [class*="nine wide"].column {
     width: @nineWide !important;
   }
-  .ui.grid > .row > [class*="ten wide mobile"].column,
-  .ui.grid > .column.row > [class*="ten wide mobile"].column,
-  .ui.grid > [class*="ten wide mobile"].column,
-  .ui.column.grid > [class*="ten wide mobile"].column {
+  .ui.grid > .row > [class*="ten wide"].column,
+  .ui.grid > .column.row > [class*="ten wide"].column,
+  .ui.grid > [class*="ten wide"].column,
+  .ui.column.grid > [class*="ten wide"].column {
     width: @tenWide !important;
   }
-  .ui.grid > .row > [class*="eleven wide mobile"].column,
-  .ui.grid > .column.row > [class*="eleven wide mobile"].column,
-  .ui.grid > [class*="eleven wide mobile"].column,
-  .ui.column.grid > [class*="eleven wide mobile"].column {
+  .ui.grid > .row > [class*="eleven wide"].column,
+  .ui.grid > .column.row > [class*="eleven wide"].column,
+  .ui.grid > [class*="eleven wide"].column,
+  .ui.column.grid > [class*="eleven wide"].column {
     width: @elevenWide !important;
   }
-  .ui.grid > .row > [class*="twelve wide mobile"].column,
-  .ui.grid > .column.row > [class*="twelve wide mobile"].column,
-  .ui.grid > [class*="twelve wide mobile"].column,
-  .ui.column.grid > [class*="twelve wide mobile"].column {
+  .ui.grid > .row > [class*="twelve wide"].column,
+  .ui.grid > .column.row > [class*="twelve wide"].column,
+  .ui.grid > [class*="twelve wide"].column,
+  .ui.column.grid > [class*="twelve wide"].column {
     width: @twelveWide !important;
   }
-  .ui.grid > .row > [class*="thirteen wide mobile"].column,
-  .ui.grid > .column.row > [class*="thirteen wide mobile"].column,
-  .ui.grid > [class*="thirteen wide mobile"].column,
-  .ui.column.grid > [class*="thirteen wide mobile"].column {
+  .ui.grid > .row > [class*="thirteen wide"].column,
+  .ui.grid > .column.row > [class*="thirteen wide"].column,
+  .ui.grid > [class*="thirteen wide"].column,
+  .ui.column.grid > [class*="thirteen wide"].column {
     width: @thirteenWide !important;
   }
-  .ui.grid > .row > [class*="fourteen wide mobile"].column,
-  .ui.grid > .column.row > [class*="fourteen wide mobile"].column,
-  .ui.grid > [class*="fourteen wide mobile"].column,
-  .ui.column.grid > [class*="fourteen wide mobile"].column {
+  .ui.grid > .row > [class*="fourteen wide"].column,
+  .ui.grid > .column.row > [class*="fourteen wide"].column,
+  .ui.grid > [class*="fourteen wide"].column,
+  .ui.column.grid > [class*="fourteen wide"].column {
     width: @fourteenWide !important;
   }
-  .ui.grid > .row > [class*="fifteen wide mobile"].column,
-  .ui.grid > .column.row > [class*="fifteen wide mobile"].column,
-  .ui.grid > [class*="fifteen wide mobile"].column,
-  .ui.column.grid > [class*="fifteen wide mobile"].column {
+  .ui.grid > .row > [class*="fifteen wide"].column,
+  .ui.grid > .column.row > [class*="fifteen wide"].column,
+  .ui.grid > [class*="fifteen wide"].column,
+  .ui.column.grid > [class*="fifteen wide"].column {
     width: @fifteenWide !important;
   }
-  .ui.grid > .row > [class*="sixteen wide mobile"].column,
-  .ui.grid > .column.row > [class*="sixteen wide mobile"].column,
-  .ui.grid > [class*="sixteen wide mobile"].column,
-  .ui.column.grid > [class*="sixteen wide mobile"].column {
+  .ui.grid > .row > [class*="sixteen wide"].column,
+  .ui.grid > .column.row > [class*="sixteen wide"].column,
+  .ui.grid > [class*="sixteen wide"].column,
+  .ui.column.grid > [class*="sixteen wide"].column {
     width: @sixteenWide !important;
   }
-}
 
-/* Tablet Sizing Combinations */
-@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
-  .ui.grid > .row > [class*="one wide tablet"].column,
-  .ui.grid > .column.row > [class*="one wide tablet"].column,
-  .ui.grid > [class*="one wide tablet"].column,
-  .ui.column.grid > [class*="one wide tablet"].column {
-    width: @oneWide !important;
-  }
-  .ui.grid > .row > [class*="two wide tablet"].column,
-  .ui.grid > .column.row > [class*="two wide tablet"].column,
-  .ui.grid > [class*="two wide tablet"].column,
-  .ui.column.grid > [class*="two wide tablet"].column {
-    width: @twoWide !important;
-  }
-  .ui.grid > .row > [class*="three wide tablet"].column,
-  .ui.grid > .column.row > [class*="three wide tablet"].column,
-  .ui.grid > [class*="three wide tablet"].column,
-  .ui.column.grid > [class*="three wide tablet"].column {
-    width: @threeWide !important;
-  }
-  .ui.grid > .row > [class*="four wide tablet"].column,
-  .ui.grid > .column.row > [class*="four wide tablet"].column,
-  .ui.grid > [class*="four wide tablet"].column,
-  .ui.column.grid > [class*="four wide tablet"].column {
-    width: @fourWide !important;
-  }
-  .ui.grid > .row > [class*="five wide tablet"].column,
-  .ui.grid > .column.row > [class*="five wide tablet"].column,
-  .ui.grid > [class*="five wide tablet"].column,
-  .ui.column.grid > [class*="five wide tablet"].column {
-    width: @fiveWide !important;
-  }
-  .ui.grid > .row > [class*="six wide tablet"].column,
-  .ui.grid > .column.row > [class*="six wide tablet"].column,
-  .ui.grid > [class*="six wide tablet"].column,
-  .ui.column.grid > [class*="six wide tablet"].column {
-    width: @sixWide !important;
-  }
-  .ui.grid > .row > [class*="seven wide tablet"].column,
-  .ui.grid > .column.row > [class*="seven wide tablet"].column,
-  .ui.grid > [class*="seven wide tablet"].column,
-  .ui.column.grid > [class*="seven wide tablet"].column {
-    width: @sevenWide !important;
-  }
-  .ui.grid > .row > [class*="eight wide tablet"].column,
-  .ui.grid > .column.row > [class*="eight wide tablet"].column,
-  .ui.grid > [class*="eight wide tablet"].column,
-  .ui.column.grid > [class*="eight wide tablet"].column {
-    width: @eightWide !important;
-  }
-  .ui.grid > .row > [class*="nine wide tablet"].column,
-  .ui.grid > .column.row > [class*="nine wide tablet"].column,
-  .ui.grid > [class*="nine wide tablet"].column,
-  .ui.column.grid > [class*="nine wide tablet"].column {
-    width: @nineWide !important;
-  }
-  .ui.grid > .row > [class*="ten wide tablet"].column,
-  .ui.grid > .column.row > [class*="ten wide tablet"].column,
-  .ui.grid > [class*="ten wide tablet"].column,
-  .ui.column.grid > [class*="ten wide tablet"].column {
-    width: @tenWide !important;
-  }
-  .ui.grid > .row > [class*="eleven wide tablet"].column,
-  .ui.grid > .column.row > [class*="eleven wide tablet"].column,
-  .ui.grid > [class*="eleven wide tablet"].column,
-  .ui.column.grid > [class*="eleven wide tablet"].column {
-    width: @elevenWide !important;
-  }
-  .ui.grid > .row > [class*="twelve wide tablet"].column,
-  .ui.grid > .column.row > [class*="twelve wide tablet"].column,
-  .ui.grid > [class*="twelve wide tablet"].column,
-  .ui.column.grid > [class*="twelve wide tablet"].column {
-    width: @twelveWide !important;
-  }
-  .ui.grid > .row > [class*="thirteen wide tablet"].column,
-  .ui.grid > .column.row > [class*="thirteen wide tablet"].column,
-  .ui.grid > [class*="thirteen wide tablet"].column,
-  .ui.column.grid > [class*="thirteen wide tablet"].column {
-    width: @thirteenWide !important;
-  }
-  .ui.grid > .row > [class*="fourteen wide tablet"].column,
-  .ui.grid > .column.row > [class*="fourteen wide tablet"].column,
-  .ui.grid > [class*="fourteen wide tablet"].column,
-  .ui.column.grid > [class*="fourteen wide tablet"].column {
-    width: @fourteenWide !important;
-  }
-  .ui.grid > .row > [class*="fifteen wide tablet"].column,
-  .ui.grid > .column.row > [class*="fifteen wide tablet"].column,
-  .ui.grid > [class*="fifteen wide tablet"].column,
-  .ui.column.grid > [class*="fifteen wide tablet"].column {
-    width: @fifteenWide !important;
-  }
-  .ui.grid > .row > [class*="sixteen wide tablet"].column,
-  .ui.grid > .column.row > [class*="sixteen wide tablet"].column,
-  .ui.grid > [class*="sixteen wide tablet"].column,
-  .ui.column.grid > [class*="sixteen wide tablet"].column {
-    width: @sixteenWide !important;
-  }
-}
+  /*----------------------
+      Width per Device
+  -----------------------*/
 
-/* Computer/Desktop Sizing Combinations */
-@media only screen and (min-width: @computerBreakpoint) {
+  /* Mobile Sizing Combinations */
+  @media only screen and (min-width: @mobileBreakpoint) and (max-width: @largestMobileScreen) {
+    .ui.grid > .row > [class*="one wide mobile"].column,
+    .ui.grid > .column.row > [class*="one wide mobile"].column,
+    .ui.grid > [class*="one wide mobile"].column,
+    .ui.column.grid > [class*="one wide mobile"].column {
+      width: @oneWide !important;
+    }
+    .ui.grid > .row > [class*="two wide mobile"].column,
+    .ui.grid > .column.row > [class*="two wide mobile"].column,
+    .ui.grid > [class*="two wide mobile"].column,
+    .ui.column.grid > [class*="two wide mobile"].column {
+      width: @twoWide !important;
+    }
+    .ui.grid > .row > [class*="three wide mobile"].column,
+    .ui.grid > .column.row > [class*="three wide mobile"].column,
+    .ui.grid > [class*="three wide mobile"].column,
+    .ui.column.grid > [class*="three wide mobile"].column {
+      width: @threeWide !important;
+    }
+    .ui.grid > .row > [class*="four wide mobile"].column,
+    .ui.grid > .column.row > [class*="four wide mobile"].column,
+    .ui.grid > [class*="four wide mobile"].column,
+    .ui.column.grid > [class*="four wide mobile"].column {
+      width: @fourWide !important;
+    }
+    .ui.grid > .row > [class*="five wide mobile"].column,
+    .ui.grid > .column.row > [class*="five wide mobile"].column,
+    .ui.grid > [class*="five wide mobile"].column,
+    .ui.column.grid > [class*="five wide mobile"].column {
+      width: @fiveWide !important;
+    }
+    .ui.grid > .row > [class*="six wide mobile"].column,
+    .ui.grid > .column.row > [class*="six wide mobile"].column,
+    .ui.grid > [class*="six wide mobile"].column,
+    .ui.column.grid > [class*="six wide mobile"].column {
+      width: @sixWide !important;
+    }
+    .ui.grid > .row > [class*="seven wide mobile"].column,
+    .ui.grid > .column.row > [class*="seven wide mobile"].column,
+    .ui.grid > [class*="seven wide mobile"].column,
+    .ui.column.grid > [class*="seven wide mobile"].column {
+      width: @sevenWide !important;
+    }
+    .ui.grid > .row > [class*="eight wide mobile"].column,
+    .ui.grid > .column.row > [class*="eight wide mobile"].column,
+    .ui.grid > [class*="eight wide mobile"].column,
+    .ui.column.grid > [class*="eight wide mobile"].column {
+      width: @eightWide !important;
+    }
+    .ui.grid > .row > [class*="nine wide mobile"].column,
+    .ui.grid > .column.row > [class*="nine wide mobile"].column,
+    .ui.grid > [class*="nine wide mobile"].column,
+    .ui.column.grid > [class*="nine wide mobile"].column {
+      width: @nineWide !important;
+    }
+    .ui.grid > .row > [class*="ten wide mobile"].column,
+    .ui.grid > .column.row > [class*="ten wide mobile"].column,
+    .ui.grid > [class*="ten wide mobile"].column,
+    .ui.column.grid > [class*="ten wide mobile"].column {
+      width: @tenWide !important;
+    }
+    .ui.grid > .row > [class*="eleven wide mobile"].column,
+    .ui.grid > .column.row > [class*="eleven wide mobile"].column,
+    .ui.grid > [class*="eleven wide mobile"].column,
+    .ui.column.grid > [class*="eleven wide mobile"].column {
+      width: @elevenWide !important;
+    }
+    .ui.grid > .row > [class*="twelve wide mobile"].column,
+    .ui.grid > .column.row > [class*="twelve wide mobile"].column,
+    .ui.grid > [class*="twelve wide mobile"].column,
+    .ui.column.grid > [class*="twelve wide mobile"].column {
+      width: @twelveWide !important;
+    }
+    .ui.grid > .row > [class*="thirteen wide mobile"].column,
+    .ui.grid > .column.row > [class*="thirteen wide mobile"].column,
+    .ui.grid > [class*="thirteen wide mobile"].column,
+    .ui.column.grid > [class*="thirteen wide mobile"].column {
+      width: @thirteenWide !important;
+    }
+    .ui.grid > .row > [class*="fourteen wide mobile"].column,
+    .ui.grid > .column.row > [class*="fourteen wide mobile"].column,
+    .ui.grid > [class*="fourteen wide mobile"].column,
+    .ui.column.grid > [class*="fourteen wide mobile"].column {
+      width: @fourteenWide !important;
+    }
+    .ui.grid > .row > [class*="fifteen wide mobile"].column,
+    .ui.grid > .column.row > [class*="fifteen wide mobile"].column,
+    .ui.grid > [class*="fifteen wide mobile"].column,
+    .ui.column.grid > [class*="fifteen wide mobile"].column {
+      width: @fifteenWide !important;
+    }
+    .ui.grid > .row > [class*="sixteen wide mobile"].column,
+    .ui.grid > .column.row > [class*="sixteen wide mobile"].column,
+    .ui.grid > [class*="sixteen wide mobile"].column,
+    .ui.column.grid > [class*="sixteen wide mobile"].column {
+      width: @sixteenWide !important;
+    }
+  }
+
+  /* Tablet Sizing Combinations */
+  @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+    .ui.grid > .row > [class*="one wide tablet"].column,
+    .ui.grid > .column.row > [class*="one wide tablet"].column,
+    .ui.grid > [class*="one wide tablet"].column,
+    .ui.column.grid > [class*="one wide tablet"].column {
+      width: @oneWide !important;
+    }
+    .ui.grid > .row > [class*="two wide tablet"].column,
+    .ui.grid > .column.row > [class*="two wide tablet"].column,
+    .ui.grid > [class*="two wide tablet"].column,
+    .ui.column.grid > [class*="two wide tablet"].column {
+      width: @twoWide !important;
+    }
+    .ui.grid > .row > [class*="three wide tablet"].column,
+    .ui.grid > .column.row > [class*="three wide tablet"].column,
+    .ui.grid > [class*="three wide tablet"].column,
+    .ui.column.grid > [class*="three wide tablet"].column {
+      width: @threeWide !important;
+    }
+    .ui.grid > .row > [class*="four wide tablet"].column,
+    .ui.grid > .column.row > [class*="four wide tablet"].column,
+    .ui.grid > [class*="four wide tablet"].column,
+    .ui.column.grid > [class*="four wide tablet"].column {
+      width: @fourWide !important;
+    }
+    .ui.grid > .row > [class*="five wide tablet"].column,
+    .ui.grid > .column.row > [class*="five wide tablet"].column,
+    .ui.grid > [class*="five wide tablet"].column,
+    .ui.column.grid > [class*="five wide tablet"].column {
+      width: @fiveWide !important;
+    }
+    .ui.grid > .row > [class*="six wide tablet"].column,
+    .ui.grid > .column.row > [class*="six wide tablet"].column,
+    .ui.grid > [class*="six wide tablet"].column,
+    .ui.column.grid > [class*="six wide tablet"].column {
+      width: @sixWide !important;
+    }
+    .ui.grid > .row > [class*="seven wide tablet"].column,
+    .ui.grid > .column.row > [class*="seven wide tablet"].column,
+    .ui.grid > [class*="seven wide tablet"].column,
+    .ui.column.grid > [class*="seven wide tablet"].column {
+      width: @sevenWide !important;
+    }
+    .ui.grid > .row > [class*="eight wide tablet"].column,
+    .ui.grid > .column.row > [class*="eight wide tablet"].column,
+    .ui.grid > [class*="eight wide tablet"].column,
+    .ui.column.grid > [class*="eight wide tablet"].column {
+      width: @eightWide !important;
+    }
+    .ui.grid > .row > [class*="nine wide tablet"].column,
+    .ui.grid > .column.row > [class*="nine wide tablet"].column,
+    .ui.grid > [class*="nine wide tablet"].column,
+    .ui.column.grid > [class*="nine wide tablet"].column {
+      width: @nineWide !important;
+    }
+    .ui.grid > .row > [class*="ten wide tablet"].column,
+    .ui.grid > .column.row > [class*="ten wide tablet"].column,
+    .ui.grid > [class*="ten wide tablet"].column,
+    .ui.column.grid > [class*="ten wide tablet"].column {
+      width: @tenWide !important;
+    }
+    .ui.grid > .row > [class*="eleven wide tablet"].column,
+    .ui.grid > .column.row > [class*="eleven wide tablet"].column,
+    .ui.grid > [class*="eleven wide tablet"].column,
+    .ui.column.grid > [class*="eleven wide tablet"].column {
+      width: @elevenWide !important;
+    }
+    .ui.grid > .row > [class*="twelve wide tablet"].column,
+    .ui.grid > .column.row > [class*="twelve wide tablet"].column,
+    .ui.grid > [class*="twelve wide tablet"].column,
+    .ui.column.grid > [class*="twelve wide tablet"].column {
+      width: @twelveWide !important;
+    }
+    .ui.grid > .row > [class*="thirteen wide tablet"].column,
+    .ui.grid > .column.row > [class*="thirteen wide tablet"].column,
+    .ui.grid > [class*="thirteen wide tablet"].column,
+    .ui.column.grid > [class*="thirteen wide tablet"].column {
+      width: @thirteenWide !important;
+    }
+    .ui.grid > .row > [class*="fourteen wide tablet"].column,
+    .ui.grid > .column.row > [class*="fourteen wide tablet"].column,
+    .ui.grid > [class*="fourteen wide tablet"].column,
+    .ui.column.grid > [class*="fourteen wide tablet"].column {
+      width: @fourteenWide !important;
+    }
+    .ui.grid > .row > [class*="fifteen wide tablet"].column,
+    .ui.grid > .column.row > [class*="fifteen wide tablet"].column,
+    .ui.grid > [class*="fifteen wide tablet"].column,
+    .ui.column.grid > [class*="fifteen wide tablet"].column {
+      width: @fifteenWide !important;
+    }
+    .ui.grid > .row > [class*="sixteen wide tablet"].column,
+    .ui.grid > .column.row > [class*="sixteen wide tablet"].column,
+    .ui.grid > [class*="sixteen wide tablet"].column,
+    .ui.column.grid > [class*="sixteen wide tablet"].column {
+      width: @sixteenWide !important;
+    }
+  }
+
+  /* Computer/Desktop Sizing Combinations */
+  @media only screen and (min-width: @computerBreakpoint) {
     .ui.grid > .row > [class*="one wide computer"].column,
-  .ui.grid > .column.row > [class*="one wide computer"].column,
-  .ui.grid > [class*="one wide computer"].column,
-  .ui.column.grid > [class*="one wide computer"].column {
-    width: @oneWide !important;
-  }
-  .ui.grid > .row > [class*="two wide computer"].column,
-  .ui.grid > .column.row > [class*="two wide computer"].column,
-  .ui.grid > [class*="two wide computer"].column,
-  .ui.column.grid > [class*="two wide computer"].column {
-    width: @twoWide !important;
-  }
-  .ui.grid > .row > [class*="three wide computer"].column,
-  .ui.grid > .column.row > [class*="three wide computer"].column,
-  .ui.grid > [class*="three wide computer"].column,
-  .ui.column.grid > [class*="three wide computer"].column {
-    width: @threeWide !important;
-  }
-  .ui.grid > .row > [class*="four wide computer"].column,
-  .ui.grid > .column.row > [class*="four wide computer"].column,
-  .ui.grid > [class*="four wide computer"].column,
-  .ui.column.grid > [class*="four wide computer"].column {
-    width: @fourWide !important;
-  }
-  .ui.grid > .row > [class*="five wide computer"].column,
-  .ui.grid > .column.row > [class*="five wide computer"].column,
-  .ui.grid > [class*="five wide computer"].column,
-  .ui.column.grid > [class*="five wide computer"].column {
-    width: @fiveWide !important;
-  }
-  .ui.grid > .row > [class*="six wide computer"].column,
-  .ui.grid > .column.row > [class*="six wide computer"].column,
-  .ui.grid > [class*="six wide computer"].column,
-  .ui.column.grid > [class*="six wide computer"].column {
-    width: @sixWide !important;
-  }
-  .ui.grid > .row > [class*="seven wide computer"].column,
-  .ui.grid > .column.row > [class*="seven wide computer"].column,
-  .ui.grid > [class*="seven wide computer"].column,
-  .ui.column.grid > [class*="seven wide computer"].column {
-    width: @sevenWide !important;
-  }
-  .ui.grid > .row > [class*="eight wide computer"].column,
-  .ui.grid > .column.row > [class*="eight wide computer"].column,
-  .ui.grid > [class*="eight wide computer"].column,
-  .ui.column.grid > [class*="eight wide computer"].column {
-    width: @eightWide !important;
-  }
-  .ui.grid > .row > [class*="nine wide computer"].column,
-  .ui.grid > .column.row > [class*="nine wide computer"].column,
-  .ui.grid > [class*="nine wide computer"].column,
-  .ui.column.grid > [class*="nine wide computer"].column {
-    width: @nineWide !important;
-  }
-  .ui.grid > .row > [class*="ten wide computer"].column,
-  .ui.grid > .column.row > [class*="ten wide computer"].column,
-  .ui.grid > [class*="ten wide computer"].column,
-  .ui.column.grid > [class*="ten wide computer"].column {
-    width: @tenWide !important;
-  }
-  .ui.grid > .row > [class*="eleven wide computer"].column,
-  .ui.grid > .column.row > [class*="eleven wide computer"].column,
-  .ui.grid > [class*="eleven wide computer"].column,
-  .ui.column.grid > [class*="eleven wide computer"].column {
-    width: @elevenWide !important;
-  }
-  .ui.grid > .row > [class*="twelve wide computer"].column,
-  .ui.grid > .column.row > [class*="twelve wide computer"].column,
-  .ui.grid > [class*="twelve wide computer"].column,
-  .ui.column.grid > [class*="twelve wide computer"].column {
-    width: @twelveWide !important;
-  }
-  .ui.grid > .row > [class*="thirteen wide computer"].column,
-  .ui.grid > .column.row > [class*="thirteen wide computer"].column,
-  .ui.grid > [class*="thirteen wide computer"].column,
-  .ui.column.grid > [class*="thirteen wide computer"].column {
-    width: @thirteenWide !important;
-  }
-  .ui.grid > .row > [class*="fourteen wide computer"].column,
-  .ui.grid > .column.row > [class*="fourteen wide computer"].column,
-  .ui.grid > [class*="fourteen wide computer"].column,
-  .ui.column.grid > [class*="fourteen wide computer"].column {
-    width: @fourteenWide !important;
-  }
-  .ui.grid > .row > [class*="fifteen wide computer"].column,
-  .ui.grid > .column.row > [class*="fifteen wide computer"].column,
-  .ui.grid > [class*="fifteen wide computer"].column,
-  .ui.column.grid > [class*="fifteen wide computer"].column {
-    width: @fifteenWide !important;
-  }
-  .ui.grid > .row > [class*="sixteen wide computer"].column,
-  .ui.grid > .column.row > [class*="sixteen wide computer"].column,
-  .ui.grid > [class*="sixteen wide computer"].column,
-  .ui.column.grid > [class*="sixteen wide computer"].column {
-    width: @sixteenWide !important;
-  }
-}
-
-/* Large Monitor Sizing Combinations */
-@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor){
-  .ui.grid > .row > [class*="one wide large screen"].column,
-  .ui.grid > .column.row > [class*="one wide large screen"].column,
-  .ui.grid > [class*="one wide large screen"].column,
-  .ui.column.grid > [class*="one wide large screen"].column {
-    width: @oneWide !important;
-  }
-  .ui.grid > .row > [class*="two wide large screen"].column,
-  .ui.grid > .column.row > [class*="two wide large screen"].column,
-  .ui.grid > [class*="two wide large screen"].column,
-  .ui.column.grid > [class*="two wide large screen"].column {
-    width: @twoWide !important;
-  }
-  .ui.grid > .row > [class*="three wide large screen"].column,
-  .ui.grid > .column.row > [class*="three wide large screen"].column,
-  .ui.grid > [class*="three wide large screen"].column,
-  .ui.column.grid > [class*="three wide large screen"].column {
-    width: @threeWide !important;
-  }
-  .ui.grid > .row > [class*="four wide large screen"].column,
-  .ui.grid > .column.row > [class*="four wide large screen"].column,
-  .ui.grid > [class*="four wide large screen"].column,
-  .ui.column.grid > [class*="four wide large screen"].column {
-    width: @fourWide !important;
-  }
-  .ui.grid > .row > [class*="five wide large screen"].column,
-  .ui.grid > .column.row > [class*="five wide large screen"].column,
-  .ui.grid > [class*="five wide large screen"].column,
-  .ui.column.grid > [class*="five wide large screen"].column {
-    width: @fiveWide !important;
-  }
-  .ui.grid > .row > [class*="six wide large screen"].column,
-  .ui.grid > .column.row > [class*="six wide large screen"].column,
-  .ui.grid > [class*="six wide large screen"].column,
-  .ui.column.grid > [class*="six wide large screen"].column {
-    width: @sixWide !important;
-  }
-  .ui.grid > .row > [class*="seven wide large screen"].column,
-  .ui.grid > .column.row > [class*="seven wide large screen"].column,
-  .ui.grid > [class*="seven wide large screen"].column,
-  .ui.column.grid > [class*="seven wide large screen"].column {
-    width: @sevenWide !important;
-  }
-  .ui.grid > .row > [class*="eight wide large screen"].column,
-  .ui.grid > .column.row > [class*="eight wide large screen"].column,
-  .ui.grid > [class*="eight wide large screen"].column,
-  .ui.column.grid > [class*="eight wide large screen"].column {
-    width: @eightWide !important;
-  }
-  .ui.grid > .row > [class*="nine wide large screen"].column,
-  .ui.grid > .column.row > [class*="nine wide large screen"].column,
-  .ui.grid > [class*="nine wide large screen"].column,
-  .ui.column.grid > [class*="nine wide large screen"].column {
-    width: @nineWide !important;
-  }
-  .ui.grid > .row > [class*="ten wide large screen"].column,
-  .ui.grid > .column.row > [class*="ten wide large screen"].column,
-  .ui.grid > [class*="ten wide large screen"].column,
-  .ui.column.grid > [class*="ten wide large screen"].column {
-    width: @tenWide !important;
-  }
-  .ui.grid > .row > [class*="eleven wide large screen"].column,
-  .ui.grid > .column.row > [class*="eleven wide large screen"].column,
-  .ui.grid > [class*="eleven wide large screen"].column,
-  .ui.column.grid > [class*="eleven wide large screen"].column {
-    width: @elevenWide !important;
-  }
-  .ui.grid > .row > [class*="twelve wide large screen"].column,
-  .ui.grid > .column.row > [class*="twelve wide large screen"].column,
-  .ui.grid > [class*="twelve wide large screen"].column,
-  .ui.column.grid > [class*="twelve wide large screen"].column {
-    width: @twelveWide !important;
-  }
-  .ui.grid > .row > [class*="thirteen wide large screen"].column,
-  .ui.grid > .column.row > [class*="thirteen wide large screen"].column,
-  .ui.grid > [class*="thirteen wide large screen"].column,
-  .ui.column.grid > [class*="thirteen wide large screen"].column {
-    width: @thirteenWide !important;
-  }
-  .ui.grid > .row > [class*="fourteen wide large screen"].column,
-  .ui.grid > .column.row > [class*="fourteen wide large screen"].column,
-  .ui.grid > [class*="fourteen wide large screen"].column,
-  .ui.column.grid > [class*="fourteen wide large screen"].column {
-    width: @fourteenWide !important;
-  }
-  .ui.grid > .row > [class*="fifteen wide large screen"].column,
-  .ui.grid > .column.row > [class*="fifteen wide large screen"].column,
-  .ui.grid > [class*="fifteen wide large screen"].column,
-  .ui.column.grid > [class*="fifteen wide large screen"].column {
-    width: @fifteenWide !important;
-  }
-  .ui.grid > .row > [class*="sixteen wide large screen"].column,
-  .ui.grid > .column.row > [class*="sixteen wide large screen"].column,
-  .ui.grid > [class*="sixteen wide large screen"].column,
-  .ui.column.grid > [class*="sixteen wide large screen"].column {
-    width: @sixteenWide !important;
-  }
-}
-
-/* Widescreen Sizing Combinations */
-@media only screen and (min-width: @widescreenMonitorBreakpoint) {
-  .ui.grid > .row > [class*="one wide widescreen"].column,
-  .ui.grid > .column.row > [class*="one wide widescreen"].column,
-  .ui.grid > [class*="one wide widescreen"].column,
-  .ui.column.grid > [class*="one wide widescreen"].column {
-    width: @oneWide !important;
-  }
-  .ui.grid > .row > [class*="two wide widescreen"].column,
-  .ui.grid > .column.row > [class*="two wide widescreen"].column,
-  .ui.grid > [class*="two wide widescreen"].column,
-  .ui.column.grid > [class*="two wide widescreen"].column {
-    width: @twoWide !important;
-  }
-  .ui.grid > .row > [class*="three wide widescreen"].column,
-  .ui.grid > .column.row > [class*="three wide widescreen"].column,
-  .ui.grid > [class*="three wide widescreen"].column,
-  .ui.column.grid > [class*="three wide widescreen"].column {
-    width: @threeWide !important;
-  }
-  .ui.grid > .row > [class*="four wide widescreen"].column,
-  .ui.grid > .column.row > [class*="four wide widescreen"].column,
-  .ui.grid > [class*="four wide widescreen"].column,
-  .ui.column.grid > [class*="four wide widescreen"].column {
-    width: @fourWide !important;
-  }
-  .ui.grid > .row > [class*="five wide widescreen"].column,
-  .ui.grid > .column.row > [class*="five wide widescreen"].column,
-  .ui.grid > [class*="five wide widescreen"].column,
-  .ui.column.grid > [class*="five wide widescreen"].column {
-    width: @fiveWide !important;
-  }
-  .ui.grid > .row > [class*="six wide widescreen"].column,
-  .ui.grid > .column.row > [class*="six wide widescreen"].column,
-  .ui.grid > [class*="six wide widescreen"].column,
-  .ui.column.grid > [class*="six wide widescreen"].column {
-    width: @sixWide !important;
-  }
-  .ui.grid > .row > [class*="seven wide widescreen"].column,
-  .ui.grid > .column.row > [class*="seven wide widescreen"].column,
-  .ui.grid > [class*="seven wide widescreen"].column,
-  .ui.column.grid > [class*="seven wide widescreen"].column {
-    width: @sevenWide !important;
-  }
-  .ui.grid > .row > [class*="eight wide widescreen"].column,
-  .ui.grid > .column.row > [class*="eight wide widescreen"].column,
-  .ui.grid > [class*="eight wide widescreen"].column,
-  .ui.column.grid > [class*="eight wide widescreen"].column {
-    width: @eightWide !important;
-  }
-  .ui.grid > .row > [class*="nine wide widescreen"].column,
-  .ui.grid > .column.row > [class*="nine wide widescreen"].column,
-  .ui.grid > [class*="nine wide widescreen"].column,
-  .ui.column.grid > [class*="nine wide widescreen"].column {
-    width: @nineWide !important;
-  }
-  .ui.grid > .row > [class*="ten wide widescreen"].column,
-  .ui.grid > .column.row > [class*="ten wide widescreen"].column,
-  .ui.grid > [class*="ten wide widescreen"].column,
-  .ui.column.grid > [class*="ten wide widescreen"].column {
-    width: @tenWide !important;
-  }
-  .ui.grid > .row > [class*="eleven wide widescreen"].column,
-  .ui.grid > .column.row > [class*="eleven wide widescreen"].column,
-  .ui.grid > [class*="eleven wide widescreen"].column,
-  .ui.column.grid > [class*="eleven wide widescreen"].column {
-    width: @elevenWide !important;
-  }
-  .ui.grid > .row > [class*="twelve wide widescreen"].column,
-  .ui.grid > .column.row > [class*="twelve wide widescreen"].column,
-  .ui.grid > [class*="twelve wide widescreen"].column,
-  .ui.column.grid > [class*="twelve wide widescreen"].column {
-    width: @twelveWide !important;
-  }
-  .ui.grid > .row > [class*="thirteen wide widescreen"].column,
-  .ui.grid > .column.row > [class*="thirteen wide widescreen"].column,
-  .ui.grid > [class*="thirteen wide widescreen"].column,
-  .ui.column.grid > [class*="thirteen wide widescreen"].column {
-    width: @thirteenWide !important;
-  }
-  .ui.grid > .row > [class*="fourteen wide widescreen"].column,
-  .ui.grid > .column.row > [class*="fourteen wide widescreen"].column,
-  .ui.grid > [class*="fourteen wide widescreen"].column,
-  .ui.column.grid > [class*="fourteen wide widescreen"].column {
-    width: @fourteenWide !important;
-  }
-  .ui.grid > .row > [class*="fifteen wide widescreen"].column,
-  .ui.grid > .column.row > [class*="fifteen wide widescreen"].column,
-  .ui.grid > [class*="fifteen wide widescreen"].column,
-  .ui.column.grid > [class*="fifteen wide widescreen"].column {
-    width: @fifteenWide !important;
-  }
-  .ui.grid > .row > [class*="sixteen wide widescreen"].column,
-  .ui.grid > .column.row > [class*="sixteen wide widescreen"].column,
-  .ui.grid > [class*="sixteen wide widescreen"].column,
-  .ui.column.grid > [class*="sixteen wide widescreen"].column {
-    width: @sixteenWide !important;
+    .ui.grid > .column.row > [class*="one wide computer"].column,
+    .ui.grid > [class*="one wide computer"].column,
+    .ui.column.grid > [class*="one wide computer"].column {
+      width: @oneWide !important;
+    }
+    .ui.grid > .row > [class*="two wide computer"].column,
+    .ui.grid > .column.row > [class*="two wide computer"].column,
+    .ui.grid > [class*="two wide computer"].column,
+    .ui.column.grid > [class*="two wide computer"].column {
+      width: @twoWide !important;
+    }
+    .ui.grid > .row > [class*="three wide computer"].column,
+    .ui.grid > .column.row > [class*="three wide computer"].column,
+    .ui.grid > [class*="three wide computer"].column,
+    .ui.column.grid > [class*="three wide computer"].column {
+      width: @threeWide !important;
+    }
+    .ui.grid > .row > [class*="four wide computer"].column,
+    .ui.grid > .column.row > [class*="four wide computer"].column,
+    .ui.grid > [class*="four wide computer"].column,
+    .ui.column.grid > [class*="four wide computer"].column {
+      width: @fourWide !important;
+    }
+    .ui.grid > .row > [class*="five wide computer"].column,
+    .ui.grid > .column.row > [class*="five wide computer"].column,
+    .ui.grid > [class*="five wide computer"].column,
+    .ui.column.grid > [class*="five wide computer"].column {
+      width: @fiveWide !important;
+    }
+    .ui.grid > .row > [class*="six wide computer"].column,
+    .ui.grid > .column.row > [class*="six wide computer"].column,
+    .ui.grid > [class*="six wide computer"].column,
+    .ui.column.grid > [class*="six wide computer"].column {
+      width: @sixWide !important;
+    }
+    .ui.grid > .row > [class*="seven wide computer"].column,
+    .ui.grid > .column.row > [class*="seven wide computer"].column,
+    .ui.grid > [class*="seven wide computer"].column,
+    .ui.column.grid > [class*="seven wide computer"].column {
+      width: @sevenWide !important;
+    }
+    .ui.grid > .row > [class*="eight wide computer"].column,
+    .ui.grid > .column.row > [class*="eight wide computer"].column,
+    .ui.grid > [class*="eight wide computer"].column,
+    .ui.column.grid > [class*="eight wide computer"].column {
+      width: @eightWide !important;
+    }
+    .ui.grid > .row > [class*="nine wide computer"].column,
+    .ui.grid > .column.row > [class*="nine wide computer"].column,
+    .ui.grid > [class*="nine wide computer"].column,
+    .ui.column.grid > [class*="nine wide computer"].column {
+      width: @nineWide !important;
+    }
+    .ui.grid > .row > [class*="ten wide computer"].column,
+    .ui.grid > .column.row > [class*="ten wide computer"].column,
+    .ui.grid > [class*="ten wide computer"].column,
+    .ui.column.grid > [class*="ten wide computer"].column {
+      width: @tenWide !important;
+    }
+    .ui.grid > .row > [class*="eleven wide computer"].column,
+    .ui.grid > .column.row > [class*="eleven wide computer"].column,
+    .ui.grid > [class*="eleven wide computer"].column,
+    .ui.column.grid > [class*="eleven wide computer"].column {
+      width: @elevenWide !important;
+    }
+    .ui.grid > .row > [class*="twelve wide computer"].column,
+    .ui.grid > .column.row > [class*="twelve wide computer"].column,
+    .ui.grid > [class*="twelve wide computer"].column,
+    .ui.column.grid > [class*="twelve wide computer"].column {
+      width: @twelveWide !important;
+    }
+    .ui.grid > .row > [class*="thirteen wide computer"].column,
+    .ui.grid > .column.row > [class*="thirteen wide computer"].column,
+    .ui.grid > [class*="thirteen wide computer"].column,
+    .ui.column.grid > [class*="thirteen wide computer"].column {
+      width: @thirteenWide !important;
+    }
+    .ui.grid > .row > [class*="fourteen wide computer"].column,
+    .ui.grid > .column.row > [class*="fourteen wide computer"].column,
+    .ui.grid > [class*="fourteen wide computer"].column,
+    .ui.column.grid > [class*="fourteen wide computer"].column {
+      width: @fourteenWide !important;
+    }
+    .ui.grid > .row > [class*="fifteen wide computer"].column,
+    .ui.grid > .column.row > [class*="fifteen wide computer"].column,
+    .ui.grid > [class*="fifteen wide computer"].column,
+    .ui.column.grid > [class*="fifteen wide computer"].column {
+      width: @fifteenWide !important;
+    }
+    .ui.grid > .row > [class*="sixteen wide computer"].column,
+    .ui.grid > .column.row > [class*="sixteen wide computer"].column,
+    .ui.grid > [class*="sixteen wide computer"].column,
+    .ui.column.grid > [class*="sixteen wide computer"].column {
+      width: @sixteenWide !important;
+    }
+  }
+
+  /* Large Monitor Sizing Combinations */
+  @media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {
+    .ui.grid > .row > [class*="one wide large screen"].column,
+    .ui.grid > .column.row > [class*="one wide large screen"].column,
+    .ui.grid > [class*="one wide large screen"].column,
+    .ui.column.grid > [class*="one wide large screen"].column {
+      width: @oneWide !important;
+    }
+    .ui.grid > .row > [class*="two wide large screen"].column,
+    .ui.grid > .column.row > [class*="two wide large screen"].column,
+    .ui.grid > [class*="two wide large screen"].column,
+    .ui.column.grid > [class*="two wide large screen"].column {
+      width: @twoWide !important;
+    }
+    .ui.grid > .row > [class*="three wide large screen"].column,
+    .ui.grid > .column.row > [class*="three wide large screen"].column,
+    .ui.grid > [class*="three wide large screen"].column,
+    .ui.column.grid > [class*="three wide large screen"].column {
+      width: @threeWide !important;
+    }
+    .ui.grid > .row > [class*="four wide large screen"].column,
+    .ui.grid > .column.row > [class*="four wide large screen"].column,
+    .ui.grid > [class*="four wide large screen"].column,
+    .ui.column.grid > [class*="four wide large screen"].column {
+      width: @fourWide !important;
+    }
+    .ui.grid > .row > [class*="five wide large screen"].column,
+    .ui.grid > .column.row > [class*="five wide large screen"].column,
+    .ui.grid > [class*="five wide large screen"].column,
+    .ui.column.grid > [class*="five wide large screen"].column {
+      width: @fiveWide !important;
+    }
+    .ui.grid > .row > [class*="six wide large screen"].column,
+    .ui.grid > .column.row > [class*="six wide large screen"].column,
+    .ui.grid > [class*="six wide large screen"].column,
+    .ui.column.grid > [class*="six wide large screen"].column {
+      width: @sixWide !important;
+    }
+    .ui.grid > .row > [class*="seven wide large screen"].column,
+    .ui.grid > .column.row > [class*="seven wide large screen"].column,
+    .ui.grid > [class*="seven wide large screen"].column,
+    .ui.column.grid > [class*="seven wide large screen"].column {
+      width: @sevenWide !important;
+    }
+    .ui.grid > .row > [class*="eight wide large screen"].column,
+    .ui.grid > .column.row > [class*="eight wide large screen"].column,
+    .ui.grid > [class*="eight wide large screen"].column,
+    .ui.column.grid > [class*="eight wide large screen"].column {
+      width: @eightWide !important;
+    }
+    .ui.grid > .row > [class*="nine wide large screen"].column,
+    .ui.grid > .column.row > [class*="nine wide large screen"].column,
+    .ui.grid > [class*="nine wide large screen"].column,
+    .ui.column.grid > [class*="nine wide large screen"].column {
+      width: @nineWide !important;
+    }
+    .ui.grid > .row > [class*="ten wide large screen"].column,
+    .ui.grid > .column.row > [class*="ten wide large screen"].column,
+    .ui.grid > [class*="ten wide large screen"].column,
+    .ui.column.grid > [class*="ten wide large screen"].column {
+      width: @tenWide !important;
+    }
+    .ui.grid > .row > [class*="eleven wide large screen"].column,
+    .ui.grid > .column.row > [class*="eleven wide large screen"].column,
+    .ui.grid > [class*="eleven wide large screen"].column,
+    .ui.column.grid > [class*="eleven wide large screen"].column {
+      width: @elevenWide !important;
+    }
+    .ui.grid > .row > [class*="twelve wide large screen"].column,
+    .ui.grid > .column.row > [class*="twelve wide large screen"].column,
+    .ui.grid > [class*="twelve wide large screen"].column,
+    .ui.column.grid > [class*="twelve wide large screen"].column {
+      width: @twelveWide !important;
+    }
+    .ui.grid > .row > [class*="thirteen wide large screen"].column,
+    .ui.grid > .column.row > [class*="thirteen wide large screen"].column,
+    .ui.grid > [class*="thirteen wide large screen"].column,
+    .ui.column.grid > [class*="thirteen wide large screen"].column {
+      width: @thirteenWide !important;
+    }
+    .ui.grid > .row > [class*="fourteen wide large screen"].column,
+    .ui.grid > .column.row > [class*="fourteen wide large screen"].column,
+    .ui.grid > [class*="fourteen wide large screen"].column,
+    .ui.column.grid > [class*="fourteen wide large screen"].column {
+      width: @fourteenWide !important;
+    }
+    .ui.grid > .row > [class*="fifteen wide large screen"].column,
+    .ui.grid > .column.row > [class*="fifteen wide large screen"].column,
+    .ui.grid > [class*="fifteen wide large screen"].column,
+    .ui.column.grid > [class*="fifteen wide large screen"].column {
+      width: @fifteenWide !important;
+    }
+    .ui.grid > .row > [class*="sixteen wide large screen"].column,
+    .ui.grid > .column.row > [class*="sixteen wide large screen"].column,
+    .ui.grid > [class*="sixteen wide large screen"].column,
+    .ui.column.grid > [class*="sixteen wide large screen"].column {
+      width: @sixteenWide !important;
+    }
+  }
+
+  /* Widescreen Sizing Combinations */
+  @media only screen and (min-width: @widescreenMonitorBreakpoint) {
+    .ui.grid > .row > [class*="one wide widescreen"].column,
+    .ui.grid > .column.row > [class*="one wide widescreen"].column,
+    .ui.grid > [class*="one wide widescreen"].column,
+    .ui.column.grid > [class*="one wide widescreen"].column {
+      width: @oneWide !important;
+    }
+    .ui.grid > .row > [class*="two wide widescreen"].column,
+    .ui.grid > .column.row > [class*="two wide widescreen"].column,
+    .ui.grid > [class*="two wide widescreen"].column,
+    .ui.column.grid > [class*="two wide widescreen"].column {
+      width: @twoWide !important;
+    }
+    .ui.grid > .row > [class*="three wide widescreen"].column,
+    .ui.grid > .column.row > [class*="three wide widescreen"].column,
+    .ui.grid > [class*="three wide widescreen"].column,
+    .ui.column.grid > [class*="three wide widescreen"].column {
+      width: @threeWide !important;
+    }
+    .ui.grid > .row > [class*="four wide widescreen"].column,
+    .ui.grid > .column.row > [class*="four wide widescreen"].column,
+    .ui.grid > [class*="four wide widescreen"].column,
+    .ui.column.grid > [class*="four wide widescreen"].column {
+      width: @fourWide !important;
+    }
+    .ui.grid > .row > [class*="five wide widescreen"].column,
+    .ui.grid > .column.row > [class*="five wide widescreen"].column,
+    .ui.grid > [class*="five wide widescreen"].column,
+    .ui.column.grid > [class*="five wide widescreen"].column {
+      width: @fiveWide !important;
+    }
+    .ui.grid > .row > [class*="six wide widescreen"].column,
+    .ui.grid > .column.row > [class*="six wide widescreen"].column,
+    .ui.grid > [class*="six wide widescreen"].column,
+    .ui.column.grid > [class*="six wide widescreen"].column {
+      width: @sixWide !important;
+    }
+    .ui.grid > .row > [class*="seven wide widescreen"].column,
+    .ui.grid > .column.row > [class*="seven wide widescreen"].column,
+    .ui.grid > [class*="seven wide widescreen"].column,
+    .ui.column.grid > [class*="seven wide widescreen"].column {
+      width: @sevenWide !important;
+    }
+    .ui.grid > .row > [class*="eight wide widescreen"].column,
+    .ui.grid > .column.row > [class*="eight wide widescreen"].column,
+    .ui.grid > [class*="eight wide widescreen"].column,
+    .ui.column.grid > [class*="eight wide widescreen"].column {
+      width: @eightWide !important;
+    }
+    .ui.grid > .row > [class*="nine wide widescreen"].column,
+    .ui.grid > .column.row > [class*="nine wide widescreen"].column,
+    .ui.grid > [class*="nine wide widescreen"].column,
+    .ui.column.grid > [class*="nine wide widescreen"].column {
+      width: @nineWide !important;
+    }
+    .ui.grid > .row > [class*="ten wide widescreen"].column,
+    .ui.grid > .column.row > [class*="ten wide widescreen"].column,
+    .ui.grid > [class*="ten wide widescreen"].column,
+    .ui.column.grid > [class*="ten wide widescreen"].column {
+      width: @tenWide !important;
+    }
+    .ui.grid > .row > [class*="eleven wide widescreen"].column,
+    .ui.grid > .column.row > [class*="eleven wide widescreen"].column,
+    .ui.grid > [class*="eleven wide widescreen"].column,
+    .ui.column.grid > [class*="eleven wide widescreen"].column {
+      width: @elevenWide !important;
+    }
+    .ui.grid > .row > [class*="twelve wide widescreen"].column,
+    .ui.grid > .column.row > [class*="twelve wide widescreen"].column,
+    .ui.grid > [class*="twelve wide widescreen"].column,
+    .ui.column.grid > [class*="twelve wide widescreen"].column {
+      width: @twelveWide !important;
+    }
+    .ui.grid > .row > [class*="thirteen wide widescreen"].column,
+    .ui.grid > .column.row > [class*="thirteen wide widescreen"].column,
+    .ui.grid > [class*="thirteen wide widescreen"].column,
+    .ui.column.grid > [class*="thirteen wide widescreen"].column {
+      width: @thirteenWide !important;
+    }
+    .ui.grid > .row > [class*="fourteen wide widescreen"].column,
+    .ui.grid > .column.row > [class*="fourteen wide widescreen"].column,
+    .ui.grid > [class*="fourteen wide widescreen"].column,
+    .ui.column.grid > [class*="fourteen wide widescreen"].column {
+      width: @fourteenWide !important;
+    }
+    .ui.grid > .row > [class*="fifteen wide widescreen"].column,
+    .ui.grid > .column.row > [class*="fifteen wide widescreen"].column,
+    .ui.grid > [class*="fifteen wide widescreen"].column,
+    .ui.column.grid > [class*="fifteen wide widescreen"].column {
+      width: @fifteenWide !important;
+    }
+    .ui.grid > .row > [class*="sixteen wide widescreen"].column,
+    .ui.grid > .column.row > [class*="sixteen wide widescreen"].column,
+    .ui.grid > [class*="sixteen wide widescreen"].column,
+    .ui.column.grid > [class*="sixteen wide widescreen"].column {
+      width: @sixteenWide !important;
+    }
   }
 }
 
@@ -981,11 +987,13 @@
     padding-right: (@relaxedGutterWidth / 2);
   }
 
-  .ui[class*="very relaxed"].grid > .column:not(.row),
-  .ui[class*="very relaxed"].grid > .row > .column,
-  .ui.grid > [class*="very relaxed"].row > .column {
-    padding-left: (@veryRelaxedGutterWidth / 2);
-    padding-right: (@veryRelaxedGutterWidth / 2);
+  & when (@variationGridVeryRelaxed) {
+    .ui[class*="very relaxed"].grid > .column:not(.row),
+    .ui[class*="very relaxed"].grid > .row > .column,
+    .ui.grid > [class*="very relaxed"].row > .column {
+      padding-left: (@veryRelaxedGutterWidth / 2);
+      padding-right: (@veryRelaxedGutterWidth / 2);
+    }
   }
 
   /* Coupling with UI Divider */
@@ -994,10 +1002,12 @@
     margin-left: (@relaxedGutterWidth / 2);
     margin-right: (@relaxedGutterWidth / 2);
   }
-  .ui[class*="very relaxed"].grid .row + .ui.divider,
-  .ui.grid [class*="very relaxed"].row + .ui.divider {
-    margin-left: (@veryRelaxedGutterWidth / 2);
-    margin-right: (@veryRelaxedGutterWidth / 2);
+  & when (@variationGridVeryRelaxed) {
+    .ui[class*="very relaxed"].grid .row + .ui.divider,
+    .ui.grid [class*="very relaxed"].row + .ui.divider {
+      margin-left: (@veryRelaxedGutterWidth / 2);
+      margin-right: (@veryRelaxedGutterWidth / 2);
+    }
   }
 }
 
@@ -1042,17 +1052,19 @@
     box-shadow: @dividedBorder;
   }
 
-  /* Swap from padding to margin on columns to have dividers align */
-  .ui[class*="vertically divided"].grid > .column:not(.row),
-  .ui[class*="vertically divided"].grid > .row > .column {
-    margin-top: (@rowSpacing / 2);
-    margin-bottom: (@rowSpacing / 2);
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-  .ui[class*="vertically divided"].grid > .row {
-    margin-top: 0;
-    margin-bottom: 0;
+  & when (@variationGridVertical) {
+    /* Swap from padding to margin on columns to have dividers align */
+    .ui[class*="vertically divided"].grid > .column:not(.row),
+    .ui[class*="vertically divided"].grid > .row > .column {
+      margin-top: (@rowSpacing / 2);
+      margin-bottom: (@rowSpacing / 2);
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+    .ui[class*="vertically divided"].grid > .row {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
   }
 
 
@@ -1063,9 +1075,11 @@
     box-shadow: none;
   }
 
-  /* No space on top of first row */
-  .ui[class*="vertically divided"].grid > .row:first-child > .column {
-    margin-top: 0;
+  & when (@variationGridVertical) {
+    /* No space on top of first row */
+    .ui[class*="vertically divided"].grid > .row:first-child > .column {
+      margin-top: 0;
+    }
   }
 
 
@@ -1077,21 +1091,23 @@
     box-shadow: none;
   }
 
-  /* Vertically Divided */
-  .ui[class*="vertically divided"].grid > .row {
-    position: relative;
-  }
-  .ui[class*="vertically divided"].grid > .row:before {
-    position: absolute;
-    content: "";
-    top: 0;
-    left: 0;
+  & when (@variationGridVertical) {
+    /* Vertically Divided */
+    .ui[class*="vertically divided"].grid > .row {
+      position: relative;
+    }
+    .ui[class*="vertically divided"].grid > .row:before {
+      position: absolute;
+      content: "";
+      top: 0;
+      left: 0;
 
-    width: e(%("calc(100%% - %d)", @gutterWidth));
-    height: 1px;
+      width: e(%("calc(100%% - %d)", @gutterWidth));
+      height: 1px;
 
-    margin: 0 (@gutterWidth / 2);
-    box-shadow: @verticallyDividedBorder;
+      margin: 0 (@gutterWidth / 2);
+      box-shadow: @verticallyDividedBorder;
+    }
   }
 
   & when (@variationGridPadded) {
@@ -1101,9 +1117,11 @@
       width: 100%;
     }
   }
-  /* First Row Vertically Divided */
-  .ui[class*="vertically divided"].grid > .row:first-child:before {
-    box-shadow: none;
+  & when (@variationGridVertical) {
+    /* First Row Vertically Divided */
+    .ui[class*="vertically divided"].grid > .row:first-child:before {
+      box-shadow: none;
+    }
   }
   & when (@variationGridInverted) {
     /* Inverted Divided */
@@ -1115,21 +1133,25 @@
     .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
       box-shadow: none;
     }
-    .ui.inverted[class*="vertically divided"].grid > .row:before {
-      box-shadow: @verticallyDividedInvertedBorder;
+    & when (@variationGridVertical) {
+      .ui.inverted[class*="vertically divided"].grid > .row:before {
+        box-shadow: @verticallyDividedInvertedBorder;
+      }
     }
   }
-  & when (@variationGridRelaxed) {
+  & when (@variationGridRelaxed) and (@variationGridVertical) {
     /* Relaxed */
     .ui.relaxed[class*="vertically divided"].grid > .row:before {
       margin-left: (@relaxedGutterWidth / 2);
       margin-right: (@relaxedGutterWidth / 2);
       width: e(%("calc(100%% - %d)", @relaxedGutterWidth));
     }
-    .ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before {
-      margin-left: (@veryRelaxedGutterWidth / 2);
-      margin-right: (@veryRelaxedGutterWidth / 2);
-      width: e(%("calc(100%% - %d)", @veryRelaxedGutterWidth));
+    & when (@variationGridVeryRelaxed) {
+      .ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before {
+        margin-left: (@veryRelaxedGutterWidth / 2);
+        margin-right: (@veryRelaxedGutterWidth / 2);
+        width: e(%("calc(100%% - %d)", @veryRelaxedGutterWidth));
+      }
     }
   }
 }
@@ -1170,6 +1192,8 @@
     .ui.relaxed.celled.grid > .row > .column {
       padding: @celledRelaxedPadding;
     }
+  }
+  & when (@variationGridVeryRelaxed) {
     .ui[class*="very relaxed"].celled.grid > .column:not(.row),
     .ui[class*="very relaxed"].celled.grid > .row > .column {
       padding: @celledVeryRelaxedPadding;
@@ -1320,20 +1344,22 @@ each(@colors, {
 })
 
 
-/*----------------------
-      Equal Width
------------------------*/
+& when (@variationGridEqualWidth) {
+  /*----------------------
+        Equal Width
+  -----------------------*/
 
-.ui[class*="equal width"].grid > .column:not(.row),
-.ui[class*="equal width"].grid > .row > .column,
-.ui.grid > [class*="equal width"].row > .column {
-  display: inline-block;
-  flex-grow: 1;
-}
-.ui[class*="equal width"].grid > .wide.column,
-.ui[class*="equal width"].grid > .row > .wide.column,
-.ui.grid > [class*="equal width"].row > .wide.column {
-  flex-grow: 0;
+  .ui[class*="equal width"].grid > .column:not(.row),
+  .ui[class*="equal width"].grid > .row > .column,
+  .ui.grid > [class*="equal width"].row > .column {
+    display: inline-block;
+    flex-grow: 1;
+  }
+  .ui[class*="equal width"].grid > .wide.column,
+  .ui[class*="equal width"].grid > .row > .wide.column,
+  .ui.grid > [class*="equal width"].row > .wide.column {
+    flex-grow: 0;
+  }
 }
 
 & when (@variationGridReversed) {
@@ -1905,9 +1931,11 @@ each(@colors, {
     .ui.compact.relaxed.celled.grid > .row > .column {
       padding: @compactCelledRelaxedPadding;
     }
-    .ui.compact[class*="very relaxed"].celled.grid > .column:not(.row),
-    .ui.compact[class*="very relaxed"].celled.grid > .row > .column {
-      padding: @compactCelledVeryRelaxedPadding;
+    & when (@variationGridVeryRelaxed) {
+      .ui.compact[class*="very relaxed"].celled.grid > .column:not(.row),
+      .ui.compact[class*="very relaxed"].celled.grid > .row > .column {
+        padding: @compactCelledVeryRelaxedPadding;
+      }
     }
   }
 
@@ -1915,43 +1943,47 @@ each(@colors, {
       Very compact
   -----------------*/
 
-  .ui.ui.ui[class*="very compact"].grid {
-    margin: -(@veryCompactGutterWidth / 2);
-  }
+  & when (@variationGridVeryCompact) {
+    .ui.ui.ui[class*="very compact"].grid {
+      margin: -(@veryCompactGutterWidth / 2);
+    }
 
-  .ui.ui.ui[class*="very compact"].grid > .column:not(.row),
-  .ui.ui.ui[class*="very compact"].grid > .row > .column {
-    padding-left: (@veryCompactGutterWidth / 2);
-    padding-right: (@veryCompactGutterWidth / 2);
-  }
+    .ui.ui.ui[class*="very compact"].grid > .column:not(.row),
+    .ui.ui.ui[class*="very compact"].grid > .row > .column {
+      padding-left: (@veryCompactGutterWidth / 2);
+      padding-right: (@veryCompactGutterWidth / 2);
+    }
 
-  .ui.ui.ui[class*="very compact"].grid > * {
-    padding-left: (@veryCompactGutterWidth / 2);
-    padding-right: (@veryCompactGutterWidth / 2);
-  }
+    .ui.ui.ui[class*="very compact"].grid > * {
+      padding-left: (@veryCompactGutterWidth / 2);
+      padding-right: (@veryCompactGutterWidth / 2);
+    }
 
-  /* Row */
-  .ui.ui.ui[class*="very compact"].grid > .row {
-    padding-top: (@veryCompactRowSpacing / 2);
-    padding-bottom: (@veryCompactRowSpacing / 2);
-    padding-left: 0;
-    padding-right: 0;
-  }
+    /* Row */
+    .ui.ui.ui[class*="very compact"].grid > .row {
+      padding-top: (@veryCompactRowSpacing / 2);
+      padding-bottom: (@veryCompactRowSpacing / 2);
+      padding-left: 0;
+      padding-right: 0;
+    }
 
-  /* Columns */
-  .ui.ui.ui[class*="very compact"].grid > .column:not(.row) {
-    padding-top: (@veryCompactRowSpacing / 2);
-    padding-bottom: (@veryCompactRowSpacing / 2);
-  }
-  & when (@variationGridRelaxed) and (@variationGridCelled) {
-    /* Relaxed + Celled */
-    .ui[class*="very compact"].relaxed.celled.grid > .column:not(.row),
-    .ui[class*="very compact"].relaxed.celled.grid > .row > .column {
-      padding: @veryCompactCelledRelaxedPadding;
+    /* Columns */
+    .ui.ui.ui[class*="very compact"].grid > .column:not(.row) {
+      padding-top: (@veryCompactRowSpacing / 2);
+      padding-bottom: (@veryCompactRowSpacing / 2);
     }
-    .ui[class*="very compact"][class*="very relaxed"].celled.grid > .column:not(.row),
-    .ui[class*="very compact"][class*="very relaxed"].celled.grid > .row > .column {
-      padding: @veryCompactCelledVeryRelaxedPadding;
+    & when (@variationGridRelaxed) and (@variationGridCelled) {
+      /* Relaxed + Celled */
+      .ui[class*="very compact"].relaxed.celled.grid > .column:not(.row),
+      .ui[class*="very compact"].relaxed.celled.grid > .row > .column {
+        padding: @veryCompactCelledRelaxedPadding;
+      }
+      & when (@variationGridVeryRelaxed) {
+        .ui[class*="very compact"][class*="very relaxed"].celled.grid > .column:not(.row),
+        .ui[class*="very compact"][class*="very relaxed"].celled.grid > .row > .column {
+          padding: @veryCompactCelledVeryRelaxedPadding;
+        }
+      }
     }
   }
 }