/** @format */

.greenDots {
  &--ml {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    z-index: 1;
  }
}
.blueWaves {
  &--tr {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
  }
  &--ml {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    z-index: 1;
  }
}

.blueDots {
  &--overlapHeader {
    position: absolute;
    right: 10%;
    top: -70px;
    z-index: 10;
  }
}

.greenSquare {
  position: relative;
  &:before {
    position: absolute;
    background-color: $green_light;
    content: " ";

    width: 12em;
    height: 9em;
    z-index: -1;
  }
  &--tl {
    &:before {
      left: 0;
      top: 0;
      margin-left: -5em;
      margin-top: -2em;
    }
  }
  &--br {
    &:before {
      right: 0;
      bottom: 0;
      margin-right: -5em;
      margin-bottom: -1em;
    }
  }
  &--bl {
    &:before {
      left: 0;
      bottom: 0;
      margin-left: -5em;
      margin-bottom: -1em;
    }
  }
  &--tr {
    &:before {
      margin-right: -3em;
      margin-bottom: -1em;
    }
  }
}