Noissue - Applied responsive margin & padding mixins

static/scss/_utilities.scss

 // This file is part of website-defaults
 // Copyright (C) 2016-present eyeo GmbH
 //
 // website-defaults is free software: you can redistribute it and/or
 // modify it under the terms of the GNU General Public License as published by
 // the Free Software Foundation, either version 3 of the License, or
 // (at your option) any later version.
 //
 // website-defaults is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 21 matching lines @@
 
 /**
  * Center content within a (responsive) fixed width
  */
 .container
 {
   width: $container-width;
   max-width: 100%;
   margin-right: auto;
   margin-left: auto;
-  padding-right: $small-space;
-  padding-left: $small-space;
+  @include padding-breakpoints($container-spacing, 'x');
 }
 
+/**
+ * Vertically separate sections of content
+ */
+.section
+{
+  @extend .clearfix;
+  @include padding-breakpoints($section-spacing, 'y');
+}
+
+
 /* Device widths
  ******************************************************************************/
 
 .phone-width { width: $phone-width; }
 .phablet-width { width: $phablet-width; }
 .tablet-width { width: $tablet-width; }
 .desktop-width { width: $desktop-width; }
 .large-desktop-width { width: $large-desktop-width; }
 
 /* Clearfix
  ******************************************************************************/
 
 .clearfix:after,
 .clearfix:before
 {
   display: table;
   content: " ";
 }
 
 .clearfix:after
 {
   clear: both;
 }