some page templates

dev/scss/components/_loop-row.scss

@@ -0,0 +1,83 @@
+.loop-row {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  align-items: center;
+  grid-gap: 0;
+
+  > div {
+    flex: 1 1 100%;
+    padding: $gutter;
+  }
+
+  .loop-image {
+    background-color: $di-purple;
+    background-image: linear-gradient(-45deg, $di-purple, $di-purple-light);
+  }
+
+  &:nth-of-type(even) {
+    .loop-image {
+      background-color: $di-orange;
+      background-image: linear-gradient(-45deg, $di-orange, $di-orange-light);
+    }
+  }
+
+  &:nth-of-type(4n) {
+    .loop-image {
+      background-color: $di-orange;
+      background-image: linear-gradient(110deg, $di-purple, $di-purple-light);
+    }
+  }
+
+  &:nth-of-type(5n) {
+    .loop-image {
+      background-color: $di-orange;
+      background-image: linear-gradient(-110deg, $di-orange, $di-orange-light);
+    }
+  }
+
+
+
+}
+
+@media screen and (min-width: $screen-tablet) {
+  .loop-row {
+    flex-direction: row;
+    min-height: 300px;
+
+    > div { flex: 1 1 50%; }
+
+    .loop-image {
+      position: relative;
+      overflow: hidden;
+
+      &::before {
+        float: left;
+        margin-left: -1px;
+        padding-top: 70%;
+        width: 1px;
+        height: 0;
+        content: '';
+      }
+
+      &::after {
+        display: table;
+        clear: both;
+        content: '';
+      }
+
+      img {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+
+    }
+
+    &:nth-of-type(even) {
+      .loop-image { order: 2; }
+    }
+  }
+}

dev/scss/main.scss

@@ -45,6 +45,7 @@
 @import 'components/header-menu';
 @import 'components/logo-banner';
 @import 'components/home-loop';
+@import 'components/loop-row';
 @import 'components/global-head';
 @import 'components/search-form';
 @import 'components/social-menu';