keep aspect ratio sections

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') {
 
         }

src/index.html

@@ -93,6 +93,16 @@
 
 <div id="main">
   <section>
+    <div>
+    </div>
+  </section>
+  <section>
+    <div>
+    </div>
+  </section>
+  <section>
+    <div>
+    </div>
   </section>
 </div>