.bg-center {
  background-repeat: no-repeat;
  background-position: center center;
}

.bg-top {
  background-repeat: no-repeat;
  background-position: top center;
}

.bg-right {
  background-repeat: no-repeat;
  background-position: center right;
}

.bg-bottom {
  background-repeat: no-repeat;
  background-position: bottom center;
}

.bg-left {
  background-repeat: no-repeat;
  background-position: center left;
}

@each $breakpoint-name, $breakpoint-value in $breakpoints {
  @media #{$breakpoint-value} {
    .#{$breakpoint-name}--bg-center {
      background-repeat: no-repeat;
      background-position: center center;
    }

    .#{$breakpoint-name}--bg-top {
      background-repeat: no-repeat;
      background-position: top center;
    }

    .#{$breakpoint-name}--bg-right {
      background-repeat: no-repeat;
      background-position: center right;
    }

    .#{$breakpoint-name}--bg-bottom {
      background-repeat: no-repeat;
      background-position: bottom center;
    }

    .#{$breakpoint-name}--bg-left {
      background-repeat: no-repeat;
      background-position: center left;
    }
  }
}