_home.scss in jekyll-theme-simpleton-0.5.0

- old
+ new
@@ -1,39 +1,42 @@
-#hero {
-  display: grid;
-  grid-template: 1fr / 1fr;
-  width: 100%;
-  height: 100vh;
+$gallery-height: 80vh;
+$tile-size: $gallery-height / 3;
 
-  .hero-tile {
-    animation: carousel ease-out 10s infinite;
 
-    &:first-of-type {
-      //animation: carousel ease-out 3s infinite;
-    }
-  }
+#hero-gallery {
+  height: $gallery-height;
+  margin: ((100vh - $gallery-height) / 2) auto;
+
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax($tile-size, 1fr));
+  grid-template-rows: repeat(3, 1fr);
+  gap: 0;
+
+  overflow: hidden;
 }
 
+.tile {
+  //animation: carousel ease-out 10s infinite;
+  width: auto;
+  height: $tile-size;
 
-@keyframes carousel {
-  0% {
-    opacity: 1;
-  }
+  background-size: cover;
+  background-position: center;
 
-  30% {
-    opacity: 1;
-  }
+  a {
+    @include transition;
 
-  50% {
+    height: 100%;
+    text-decoration: none;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     opacity: 0;
-  }
+    color: white;
+    background: #000;
 
-  70% {
-    opacity: 1
+    &:hover {
+      opacity: 1;
+    }
   }
-
-  /*
-  100% {
-    background: 1;
-  }
-  */
 }