Move banner styles to their own stylesheet

Since we've already got a banner component, we follow the convention of
using one CSS file per component. We also reduce the number of lines in
the huge layout.scss file.

Now the sections in layout.scss from "17" to "19", just like they jump
from "08" to "10".

app/assets/stylesheets/application.scss

@@ -21,6 +21,7 @@
 @import "advanced_search";
 @import "annotator_overrides";
 @import "autocomplete_overrides";
+@import "banner";
 @import "datepicker_overrides";
 @import "layout";
 @import "participation";

app/assets/stylesheets/banner.scss

@@ -0,0 +1,23 @@
+.banner {
+  @include full-width-background;
+
+  .debates-list &::before,
+  .proposals-list &::before,
+  .admin &::before {
+    content: none;
+  }
+
+  a > * {
+    padding: 0 rem-calc(16);
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  + .budget-header,
+  + .budgets-index > .budget-header,
+  + .jumbo {
+    margin-top: 0;
+  }
+}

app/assets/stylesheets/layout.scss

@@ -16,7 +16,6 @@
 // 15. Comments
 // 16. Flags
 // 17. Activity
-// 18. Banners
 // 19. Recommendations
 // 20. Documents
 // 21. Related content
@@ -2135,33 +2134,6 @@ table {
   }
 }
 
-// 18. Banners
-// -----------
-
-.banner {
-  @include full-width-background;
-
-  .debates-list &::before,
-  .proposals-list &::before,
-  .admin &::before {
-    content: none;
-  }
-
-  a > * {
-    padding: 0 rem-calc(16);
-
-    &:empty {
-      display: none;
-    }
-  }
-
-  + .budget-header,
-  + .budgets-index > .budget-header,
-  + .jumbo {
-    margin-top: 0;
-  }
-}
-
 // 19. Recommendations
 // -------------------