[class^=has-background--top-], [class*=" has-background--top-"] {
  position: relative;
}
[class^=has-background--top-]::before, [class*=" has-background--top-"]::before {
  content: "";
  display: block;
  width: 100vw;
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translate3d(-50%, 0%, 0);
  height: 50.5%;
  top: 0;
}

[class^=has-background--bottom-], [class*=" has-background--bottom-"] {
  position: relative;
}
[class^=has-background--bottom-]::after, [class*=" has-background--bottom-"]::after {
  content: "";
  display: block;
  width: 100vw;
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translate3d(-50%, 0%, 0);
  height: 50.5%;
  bottom: 0;
}

.has-background--top-primary::before {
  background: rgb(198, 141, 39);
}

.has-background--top-secondary::before {
  background: rgb(68, 86, 95);
}

.has-background--top-dark::before {
  background: rgb(38, 50, 56);
}

.has-background--top-light::before {
  background: rgb(238, 239, 243);
}

.has-background--bottom-primary::after {
  background: rgb(198, 141, 39);
}

.has-background--bottom-secondary::after {
  background: rgb(68, 86, 95);
}

.has-background--bottom-dark::after {
  background: rgb(38, 50, 56);
}

.has-background--bottom-light::after {
  background: rgb(238, 239, 243);
}