Noissue - Format CSS comments and implement new wd classes

static/scss/base/_variables.scss

Index: static/scss/base/_variables.scss
===================================================================
--- a/static/scss/base/_variables.scss
+++ b/static/scss/base/_variables.scss
@@ -9,36 +9,40 @@
 // help.eyeo.com is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // GNU General Public License for more details.
 //
 // You should have received a copy of the GNU General Public License
 // along with help.eyeo.com.  If not, see <http://www.gnu.org/licenses/>.
 
-// Colors //////////////////////////////////////////////////////////////////////
+// Colors
+////////////////////////////////////////////////////////////////////////////////
 
 // Grayscale
 
 $white: #fff;
 $gray: #D2D2D2;
 $gray-light: #ECECEC;
 $gray-medium: #AEAEAE;
 $gray-dark: #757575;
 $black: #161616;
 
 // Brand colors
 
 $eyeo-black: $black;
 $abp-red: #C70D2B;
 $abb-blue: #0D79C7;
 
+// Primary - The most widely used across all screens and components.
+
 $primary: $eyeo-black;
 
-// Typography //////////////////////////////////////////////////////////////////
+// Fonts
+////////////////////////////////////////////////////////////////////////////////
 
 // Font stack
 
 $primary-font: "Source Sans Pro", sans-serif;
 
 // Font colours
 
 $font-color-default: $eyeo-black;
@@ -53,39 +57,40 @@
 $font-size-h5: $font-size-h4;
 $font-size-h6: $font-size-h4;
 
 // Font sizes (general)
 
 $small-font: 0.9em;
 $tiny-font: 0.8em;
 
-// Sizes ///////////////////////////////////////////////////////////////////////
+// Spacing
+////////////////////////////////////////////////////////////////////////////////
+
+$xl: 60px;
+$lg: 30px;
+$md: 15px;
+$sm: 10px;
+$xs: 5px;
 
-// Container widths
+// Breakpoints
+////////////////////////////////////////////////////////////////////////////////
+
+// Device breakpoints
+
+$phablet-breakpoint: 576px;
+
+// Component sizes
+////////////////////////////////////////////////////////////////////////////////
+
+// Container
 
 $container-width: 960px; // $desktop-width
 
 // Header & Footer
 
 $site-header-height: 70px;
 $site-header-content-line-height: 40px;
 
 // Search form
 
 $search-form-width: 320px;
 $search-form-height: 35px;
-
-// Spacers /////////////////////////////////////////////////////////////////////
-
-$xl: 60px;
-$lg: 30px;
-$md: 15px;
-$sm: 10px;
-$xs: 5px;
-
-// Columns /////////////////////////////////////////////////////////////////////
-
-// Breakpoints /////////////////////////////////////////////////////////////////
-
-$phablet-breakpoint: 576px;
-
-// Placeholders ////////////////////////////////////////////////////////////////