/* Default styles (xs) */
@media (min-width: 0) {
  .nb-responsive-background {
    background: var(--background) !important;
  }
  .nb-responsive-background-repeat {
    background-repeat: var(--background-repeat) !important;
  }
  .nb-responsive-background-position {
    background-position: var(--background-position) !important;
  }
  .nb-responsive-background-size {
    background-size: var(--background-size) !important;
  }
  .nb-responsive-background-image {
    background-image: var(--background-image) !important;
  }
}

/* sm */
@media (min-width: 576px) {
  .nb-responsive-background {
    background: var(--background-sm, var(--background)) !important;
  }
  .nb-responsive-background-repeat {
    background-repeat: var(
      --background-repeat-sm,
      var(--background-repeat)
    ) !important;
  }
  .nb-responsive-background-position {
    background-position: var(
      --background-position-sm,
      var(--background-position)
    ) !important;
  }
  .nb-responsive-background-size {
    background-size: var(
      --background-size-sm,
      var(--background-size)
    ) !important;
  }
  .nb-responsive-background-image {
    background-image: var(
      --background-image-sm,
      var(--background-image)
    ) !important;
  }
}

/* md */
@media (min-width: 768px) {
  .nb-responsive-background {
    background: var(
      --background-md,
      var(--background-sm, var(--background))
    ) !important;
  }
  .nb-responsive-background-repeat {
    background-repeat: var(
      --background-repeat-md,
      var(--background-repeat-sm, var(--background-repeat))
    ) !important;
  }
  .nb-responsive-background-position {
    background-position: var(
      --background-position-md,
      var(--background-position-sm, var(--background-position))
    ) !important;
  }
  .nb-responsive-background-size {
    background-size: var(
      --background-size-md,
      var(--background-size-sm, var(--background-size))
    ) !important;
  }
  .nb-responsive-background-image {
    background-image: var(
      --background-image-md,
      var(--background-image-sm, var(--background-image))
    ) !important;
  }
}

/* lg */
@media (min-width: 992px) {
  .nb-responsive-background {
    background: var(
      --background-lg,
      var(--background-md, var(--background-sm, var(--background)))
    ) !important;
  }
  .nb-responsive-background-repeat {
    background-repeat: var(
      --background-repeat-lg,
      var(
        --background-repeat-md,
        var(--background-repeat-sm, var(--background-repeat))
      )
    ) !important;
  }
  .nb-responsive-background-position {
    background-position: var(
      --background-position-lg,
      var(
        --background-position-md,
        var(--background-position-sm, var(--background-position))
      )
    ) !important;
  }
  .nb-responsive-background-size {
    background-size: var(
      --background-size-lg,
      var(
        --background-size-md,
        var(--background-size-sm, var(--background-size))
      )
    ) !important;
  }
  .nb-responsive-background-image {
    background-image: var(
      --background-image-lg,
      var(
        --background-image-md,
        var(--background-image-sm, var(--background-image))
      )
    ) !important;
  }
}

/* xl */
@media (min-width: 1200px) {
  .nb-responsive-background {
    background: var(
      --background-xl,
      var(
        --background-lg,
        var(--background-md, var(--background-sm, var(--background)))
      )
    ) !important;
  }
  .nb-responsive-background-repeat {
    background-repeat: var(
      --background-repeat-xl,
      var(
        --background-repeat-lg,
        var(
          --background-repeat-md,
          var(--background-repeat-sm, var(--background-repeat))
        )
      )
    ) !important;
  }
  .nb-responsive-background-position {
    background-position: var(
      --background-position-xl,
      var(
        --background-position-lg,
        var(
          --background-position-md,
          var(--background-position-sm, var(--background-position))
        )
      )
    ) !important;
  }
  .nb-responsive-background-size {
    background-size: var(
      --background-size-xl,
      var(
        --background-size-lg,
        var(
          --background-size-md,
          var(--background-size-sm, var(--background-size))
        )
      )
    ) !important;
  }
  .nb-responsive-background-image {
    background-image: var(
      --background-image-xl,
      var(
        --background-image-lg,
        var(
          --background-image-md,
          var(--background-image-sm, var(--background-image))
        )
      )
    ) !important;
  }
}

.nb-background-overlay {
  position: absolute;
  inset: 0;
}

.nb-background-overlay ~ * {
  position: relative;
  z-index: 2;
}