From 2ea691b5e18db94f6b925ba448be1df6621e2aaf Mon Sep 17 00:00:00 2001
From: Thefeli73 <thefeli73@hotmail.com>
Date: Wed, 26 Feb 2020 20:54:13 +0100
Subject: [PATCH] keep aspect ratio sections

---
 src/css/layout/_main.scss | 20 ++++++++++++++------
 src/index.html            | 10 ++++++++++
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/css/layout/_main.scss b/src/css/layout/_main.scss
index 0542763..c9f02d6 100644
--- a/src/css/layout/_main.scss
+++ b/src/css/layout/_main.scss
@@ -3,12 +3,18 @@
 
   #main {
     width: 100%;
+    margin: 8em 0;
 
     > section {
-      height: 400px;
       width: 100%;
-      max-width: 600px;
-      margin: 8em auto 4em;
+      max-width: 800px;
+      margin: 8em auto;
+      background-color: #fff;
+
+      > div {
+        width: 100%;
+        padding-bottom: 50%;
+      }
     }
     /*
         @include breakpoint('<=xlarge') {
@@ -26,11 +32,13 @@
         @include breakpoint('<=small') {
 
         }
-
+*/
         @include breakpoint('<=xsmall') {
-
+          > section {
+            margin: 2em auto;
+          }
         }
-
+/*
         @include breakpoint('<=xxsmall') {
 
         }
diff --git a/src/index.html b/src/index.html
index 95f7ca0..d918ca2 100644
--- a/src/index.html
+++ b/src/index.html
@@ -93,6 +93,16 @@
 
 <div id="main">
   <section>
+    <div>
+    </div>
+  </section>
+  <section>
+    <div>
+    </div>
+  </section>
+  <section>
+    <div>
+    </div>
   </section>
 </div>