feat(utilities): added has--bg--top center and bottom utility classes

- we can use them to set a given background position for a
  given background image, useful in the hero block where we
  want to give the editor the ability to choose a background image position

theme/themes/eea/globals/utilities.less

@@ -1,76 +1,90 @@
-// Color
-h1, h2, h3, h4, h5, h6, p, span, .header {
-  &.primary { color: @primaryColorCSSVar !important; }
-  &.secondary { color: @secondaryColorCSSVar !important; }
-  &.tertiary { color: @tertiaryColorCSSVar !important; }
-  &.white { color: @white !important; }
-}
-
-.color-fg-primary { color: @primaryColor !important; }
-.color-fg-secondary { color: @secondaryColor !important; }
-.color-fg-tertiary { color: @tertiaryColor !important; }
-.color-fg-white { color: @grey-0 !important; }
-
-.color-bg-primary { background-color: @primaryColor !important; }
-.color-bg-secondary { background-color: @secondaryColor !important; }
-.color-bg-tertiary { background-color: @tertiaryColor !important; }
-.color-bg-grey { background-color: @grey-1 !important; }
-
-.dark-overlay-4 {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background: #000;
-  opacity: 0.4;
-  z-index: 0;
-}
-
-// Flexbox
-.d-flex { display: flex !important; }
-.flex-items-start { align-items: flex-start !important; }
-.flex-items-end { align-items: flex-end !important; }
-.flex-items-center { align-items: center !important; }
-
-// Text
-.text-left,
-.has--text--left { text-align: left !important; }
-.text-center,
-.has--text--center { text-align: center !important;}
-.text-right { text-align: right !important; }
-.bold { font-weight: bold !important; }
-
-.has--text--left {
-  --text-align: left;
-}
-
-.has--text--center {
-  --text-align: center;
-  --justify-content: space-evenly;
-}
-
-// Text utilities
-.bold { font-weight: @bold !important; }
-.underline { text-decoration: underline !important; }
-
-// Quotes
-.quoted-wrapper h2::before,
-.quoted-wrapper h3::before,
-.quoted::before {
-  content: "\ec51";
-  font-family: 'remixicon' !important;
-}
-
-.quoted-wrapper  h2::after,
-.quoted-wrapper  h3::after,
-.quoted::after {
-  content: "\ec52";
-  font-family: 'remixicon' !important;
-}
-
-// Borders
-.bordered { 
-  border-bottom: @border-size-1 solid !important;
-  padding-bottom: @rem-space-2 !important;
-}
+// Color
+h1, h2, h3, h4, h5, h6, p, span, .header {
+  &.primary { color: @primaryColorCSSVar !important; }
+  &.secondary { color: @secondaryColorCSSVar !important; }
+  &.tertiary { color: @tertiaryColorCSSVar !important; }
+  &.white { color: @white !important; }
+}
+
+.color-fg-primary { color: @primaryColor !important; }
+.color-fg-secondary { color: @secondaryColor !important; }
+.color-fg-tertiary { color: @tertiaryColor !important; }
+.color-fg-white { color: @grey-0 !important; }
+
+.color-bg-primary { background-color: @primaryColor !important; }
+.color-bg-secondary { background-color: @secondaryColor !important; }
+.color-bg-tertiary { background-color: @tertiaryColor !important; }
+.color-bg-grey { background-color: @grey-1 !important; }
+
+.dark-overlay-4 {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: #000;
+  opacity: 0.4;
+  z-index: 0;
+}
+
+// Flexbox
+.d-flex { display: flex !important; }
+.flex-items-start { align-items: flex-start !important; }
+.flex-items-end { align-items: flex-end !important; }
+.flex-items-center { align-items: center !important; }
+
+// Text
+.text-left,
+.has--text--left { text-align: left !important; }
+.text-center,
+.has--text--center { text-align: center !important;}
+.text-right { text-align: right !important; }
+.bold { font-weight: bold !important; }
+
+.has--text--left {
+  --text-align: left;
+}
+
+.has--text--center {
+  --text-align: center;
+  --justify-content: space-evenly;
+}
+
+// background position utilities
+.has--bg--top {
+  background-position: top !important;
+}
+
+.has--bg--center {
+  background-position: center !important;
+}
+
+.has--bg--bottom {
+  background-position: bottom !important;
+}
+
+
+// Text utilities
+.bold { font-weight: @bold !important; }
+.underline { text-decoration: underline !important; }
+
+// Quotes
+.quoted-wrapper h2::before,
+.quoted-wrapper h3::before,
+.quoted::before {
+  content: "\ec51";
+  font-family: 'remixicon' !important;
+}
+
+.quoted-wrapper  h2::after,
+.quoted-wrapper  h3::after,
+.quoted::after {
+  content: "\ec52";
+  font-family: 'remixicon' !important;
+}
+
+// Borders
+.bordered {
+  border-bottom: @border-size-1 solid !important;
+  padding-bottom: @rem-space-2 !important;
+}