.bg-primary {
  position: relative;
  background-color: transparent !important;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    background-color: $background-lightblue;
    z-index: -1;
  }
}

.bg-secondary {
  position: relative;
  background-color: transparent !important;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    background-color: #DFE5F2;
    z-index: -1;
  }
}

.with-dots::before {
  background-image: url('../images/worn-dots.png');
}

.with-arrows::before {
  background-image: url('../images/arrow-left-bottom.svg'), url('../images/arrow-right-top.svg');
  background-repeat: no-repeat, no-repeat;
  background-position: bottom 0px left -30px, top 0 right -30px;
  background-size: 228px, 228px;
}

