From 9da10b197eed7fc816d966017636f501cecfab33 Mon Sep 17 00:00:00 2001
From: Harm Smits <info@poppedweb.com>
Date: Mon, 31 Aug 2020 16:22:39 +0200
Subject: [PATCH] Fix media queries and get rid of text-align, as it has no
 place in a grid

---
 grid.sass | 64 +++++++++++++++++++++++++------------------------------
 1 file changed, 29 insertions(+), 35 deletions(-)

diff --git a/grid.sass b/grid.sass
index f98fcbf..73a6f6a 100644
--- a/grid.sass
+++ b/grid.sass
@@ -2,63 +2,57 @@
 @import mixins/container
 @import mixins/is-visible-breakpoint
 @import mixins/section
-@import mixins/text-align
 @import mixins/wrapper
 
-@mixin grid--xs()
-  [class*=section]
+[class*=section]
+  > :last-child
+    margin-bottom: 0 !important
+
     > :last-child
       margin-bottom: 0 !important
 
-      > :last-child
-        margin-bottom: 0 !important
-
-  [class*=col-container]
-    box-sizing: border-box
-    display: -webkit-box
-    display: -ms-flexbox
-    display: flex
-    -webkit-box-flex: 0
-    -ms-flex: 0 1 auto
-    flex: 0 1 auto
-    -webkit-box-orient: horizontal
-    -webkit-box-direction: normal
-    -ms-flex-direction: row
-    flex-direction: row
-    -ms-flex-wrap: wrap
-    flex-wrap: wrap
-
-  @include wrapper('xs', 320, 12)
-  @include section('xs')
-  @include columns('xs')
-  @include container('xs')
-  @include is-visible-breakpoint('xs')
-  @include text-align('xs')
-
-@mixin grid--s()
+[class*=col-container]
+  box-sizing: border-box
+  display: -webkit-box
+  display: -ms-flexbox
+  display: flex
+  -webkit-box-flex: 0
+  -ms-flex: 0 1 auto
+  flex: 0 1 auto
+  -webkit-box-orient: horizontal
+  -webkit-box-direction: normal
+  -ms-flex-direction: row
+  flex-direction: row
+  -ms-flex-wrap: wrap
+  flex-wrap: wrap
+
+@include wrapper('xs', 320, 12)
+@include section('xs')
+@include columns('xs')
+@include container('xs')
+@include is-visible-breakpoint('xs')
+
+@media only screen and (min-width: 501px)
   @include wrapper('s', 501, 16)
   @include columns('s')
   @include container('s', (), ())
   @include is-visible-breakpoint('s')
 
-@mixin grid--m()
+@media only screen and (min-width: 668px)
   @include wrapper('m', 668, 16)
   @include section('m')
   @include columns('m')
   @include container('m')
   @include is-visible-breakpoint('m')
-  @include text-align('m')
 
-@mixin grid--l()
+@media only screen and (min-width: 901px)
   @include wrapper('l', 1024, 16)
   @include section('l')
   @include columns('l')
   @include container('l')
   @include is-visible-breakpoint('l')
-  @include text-align('l')
 
-@mixin grid--xl()
+@media only screen and (min-width: 1024px)
   @include container('xl')
   @include columns('xl')
   @include is-visible-breakpoint('xl')
-  @include text-align('xl')