Using gradients as overlays instead of absolute positioning

This saves your time and lines of code easily creating an overlay using linear-gradient instead of using positioning

split-landing-page/style.css

@@ -75,34 +75,18 @@ h1 {
 
 .split.left {
   left: 0;
-  background: url('ps.jpg');
+  background: linear-gradient(to bottom, var(--left-bg-color), var(--left-bg-color)), url('ps.jpg');
   background-repeat: no-repeat;
   background-size: cover;
 }
 
-.split.left::before {
-  content: '';
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: var(--left-bg-color);
-}
-
 .split.right {
   right: 0;
-  background: url('xbox.jpg');
+  background: linear-gradient(to bottom, var(--right-bg-color), var(--right-bg-color)), url('xbox.jpg');
   background-repeat: no-repeat;
   background-size: cover;
 }
 
-.split.right::before {
-  content: '';
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: var(--right-bg-color);
-}
-
 .split.right,
 .split.left,
 .split.right::before,