home-loop default-bg

dev/scss/components/_home-loop.scss

@@ -3,9 +3,31 @@
   overflow: hidden;
 
   a {
-    display: table;
+    display: block;
+    width: 100%;
     min-height: 250px;
     text-decoration: none;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: -1;
+      background-color: $di-purple;
+      background-image: linear-gradient(-110deg, $di-orange, $di-orange-light);
+      content: '';
+    }
+  }
+
+  &:nth-of-type(even) {
+    a {
+      &::before {
+        background-color: $di-orange;
+        background-image: linear-gradient(110deg, $di-purple, $di-purple-light);
+      }
+    }
   }
 
   h1 {

dev/scss/components/_loop-row.scss

@@ -15,32 +15,16 @@
 
   .loop-image {
     background-color: $di-purple;
-    background-image: linear-gradient(-45deg, $di-purple, $di-purple-light);
+    background-image: linear-gradient(-110deg, $di-orange, $di-orange-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) {

dev/scss/elements/_article.scss

@@ -1,5 +1,6 @@
 article {
   margin: 0 auto;
+  width: 100%;
   max-width: 80rem;
 }