Moves banners styles to layout.scss

app/assets/stylesheets/application.scss

@@ -12,4 +12,3 @@
 @import "annotator_overrides";
 @import "jquery-ui/datepicker";
 @import "datepicker_overrides";
-@import "banners";

app/assets/stylesheets/banners.scss

@@ -1,69 +0,0 @@
-// Place all the styles related to the banner controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
-
-// 01. Banners
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-.banner-style-one {
-  background-color: $brand;
-}
-
-.banner-style-two {
-  background-color: $budget;
-}
-
-.banner-style-three {
-  background-color: #33DADF;
-}
-
-@media (min-width: $medium-breakpoint) {
-
-  .banner-img-one {
-    background-image: image-url('banners/banner1.png');
-  }
-
-  .banner-img-two {
-    background-image: image-url('banners/banner2.png');
-  }
-
-  .banner-img-three {
-    background-image: image-url('banners/banner3.png');
-  }
-}
-
-.banner-img-one, .banner-img-two, .banner-img-three {
-  background-position: bottom right;
-  background-repeat: no-repeat;
-}
-
-.banner-style-one, .banner-style-two, .banner-style-three {
-  margin: 0;
-  margin-bottom: $line-height;
-
-  h2, h3, a {
-    color: #eaeaf2;
-  }
-
-  h2 {
-    padding: $line-height/2;
-    padding-bottom: 0;
-  }
-
-  h3 {
-    padding: $line-height/2;
-    padding-top: 0;
-  }
-
-  a:hover h2, a:hover h3 {
-    color: #eaeaf2 !important;
-    text-decoration: none;
-  }
-
-  @media (min-width: $medium-breakpoint) {
-
-    h3 {
-      width: 80%;
-    }
-  }
-}

app/assets/stylesheets/layout.scss

@@ -17,6 +17,7 @@
 // 15. Comments
 // 16. Flags
 // 17. Activity
+// 18. Banners
 //
 
 // 01. Global styles
@@ -1686,3 +1687,69 @@ table {
     }
   }
 }
+
+// 18. Banners
+// -----------
+
+.banner-style-one {
+  background-color: $brand;
+}
+
+.banner-style-two {
+  background-color: $budget;
+}
+
+.banner-style-three {
+  background-color: #33DADF;
+}
+
+@include breakpoint(large) {
+
+  .banner-img-one {
+    background-image: image-url('banners/banner1.png');
+  }
+
+  .banner-img-two {
+    background-image: image-url('banners/banner2.png');
+  }
+
+  .banner-img-three {
+    background-image: image-url('banners/banner3.png');
+  }
+}
+
+.banner-img-one, .banner-img-two, .banner-img-three {
+  background-position: bottom right;
+  background-repeat: no-repeat;
+}
+
+.banner-style-one, .banner-style-two, .banner-style-three {
+  margin: 0;
+  margin-bottom: $line-height;
+
+  h2, h3, a {
+    color: #eaeaf2;
+  }
+
+  h2 {
+    padding: $line-height/2;
+    padding-bottom: 0;
+  }
+
+  h3 {
+    padding: $line-height/2;
+    padding-top: 0;
+  }
+
+  a:hover h2, a:hover h3 {
+    color: #eaeaf2 !important;
+    text-decoration: none;
+  }
+
+  @include breakpoint(large) {
+
+    h3 {
+      width: 80%;
+    }
+  }
+}