Slide-bg

src/scss/modules/_slides-bg.scss

@@ -0,0 +1,110 @@
+.background,
+[class*='background-'] {
+  background-repeat: no-repeat;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.background {
+  background-position: center;
+  background-size: cover;
+
+  &-top {
+    background-position: top;
+    background-size: cover;
+  }
+
+  &-bottom {
+    background-position: bottom;
+    background-size: cover;
+  }
+
+  &-center {
+    background-position: center;
+  }
+
+  &-center-top {
+    background-position: center top;
+  }
+
+  &-right-top {
+    background-position: right top;
+  }
+
+  &-left-top {
+    background-position: left top;
+  }
+
+  &-center-bottom,
+  &-left-bottom,
+  &-right-bottom,
+  &-left,
+  &-right {
+    background-position: center bottom;
+  }
+
+  @media (min-width: 1024px) {
+    &-left-bottom {
+      background-position: left bottom;
+    }
+
+    &-right-bottom {
+      background-position: right bottom;
+    }
+
+    &-right {
+      background-position: right;
+    }
+
+    &-left {
+      background-position: left;
+    }
+  }
+
+  &-video {
+    height: 100%;
+    object-fit: fill;
+    width: 100%;
+  }
+}
+
+[class*='bg-'] .light,
+[class*='bg-'] .light {
+  opacity: .8;
+}
+
+[class*='bg-'] .dark,
+[class*='bg-'] .dark {
+  opacity: .2;
+}
+
+[class*='bg-'] .background-video.dark {
+  opacity: .5;
+}
+
+@media (max-width: 1023px) {
+  [class*='background-'] {
+    animation: fadeIn ease-in .2;
+    opacity: .2;
+  }
+
+  .background-video {
+    opacity: .8;
+  }
+}
+
+.background.anim {
+  animation: anim 80s linear infinite;
+  background-position: center top;
+  background-repeat: repeat;
+  background-size: 100%;
+  height: 200%;
+
+}
+
+[class*='background'].frame {
+  margin: 2.4rem;
+}