Refactored more image based code

public/styles/components/_image-section.scss

@@ -0,0 +1,22 @@
+/*
+ *  Image Section
+ *    Styles for Image Sections, usually contains videos (hmmmm).
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/05/11
+ */
+.c-image-section {
+  position: relative;
+
+  &__image {
+    width: 100%;
+  }
+
+  &.is-full {
+    .c-image-section__image {
+      @include t-absolute-fill();
+    }
+  }
+}

public/styles/components/_section.scss

@@ -11,7 +11,7 @@
   //border: 1px solid red;
   width: 100%;
 
-  &--full {
+  &.is-full {
     height: 100vh;
   }
 }

public/styles/components/_video-section.scss

@@ -3,6 +3,7 @@
  *    Styles for Video Sections, usually contains videos.
  *
  *  Dependencies:
+ *    styles/tools/_absolute-centering.scss
  *
  *  Version:
  *    1.0.0 - 2018/05/03
@@ -11,11 +12,7 @@
   position: relative;
 
   &__video {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 100%;
+    @include t-absolute-fill();
     object-fit: cover;
     object-position: center;
   }

public/styles/elements/button.scss

@@ -10,4 +10,5 @@ button {
   font-size: inherit;
   font-weight: inherit;
   font-family: inherit;
+  color: inherit;
 }

public/styles/index.scss

@@ -64,6 +64,7 @@
 @import './objects/_video.scss';
 
 //Components
+@import './components/_image-section.scss';
 @import './components/_page.scss';
 @import './components/_section.scss';
 @import './components/_video-section.scss';

public/styles/pages/_home-page.scss

@@ -12,6 +12,8 @@
 .p-home-page {
 
   &__video-content {
-    background: white;
+    padding: 1em 4em;
+    background: rgba(0, 0, 0, 0.75);
+    color: white;
   }
 }

public/styles/tools/_absolute-centering.scss

@@ -28,6 +28,14 @@
   @include t-translate-y(-50%);
 }
 
+@mixin t-absolute-fill() {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
 @mixin t-absolute-position-options($inset: 0) {
   position: absolute;