Problem with paths when compiling LESS?

Question

Less

Good day!
By laying out the layout using LESS and the Gulp assembler, and writing the paths to the images as follows: when using browser-sync, everything is displayed normally in the browser. But after building the project (gulp.task('build')) the pictures written in css are not displayed. It helps only to manually change all the paths already directly in css like this, then everything is ok: How to write paths correctly so as not to change them manually. Here is the gulp config:
background: url(../../img/main-img.png) no-repeat;
background: url(../img/main-img.png) no-repeat;

gulp.task('less', function() {
  return gulp
    .src('src/less/style.less')
    .pipe(less())
    .pipe(
      autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {
        cascade: true
      })
    )
    .pipe(gulp.dest('src/css'))
    .pipe(browserSync.stream());
});

gulp.task(
  'css-min',
  gulp.series('less', function() {
    return gulp
      .src('src/css/style.css')
      .pipe(cssnano())
      .pipe(rename({ suffix: '.min' }))
      .pipe(gulp.dest('src/css'));
  })
);

gulp.task('clean', gulp.series(function(){
  return del.sync('dist');
}));

gulp.task(
  'server',
  gulp.series('less', function() {
    browserSync.init({
      server: './src'
    });
    gulp.watch('src/less/**/*.less', gulp.series('less'));
    gulp.watch('src/*.html').on('change', browserSync.reload);
  })
);

gulp.task('build', gulp.series(function(){
  
  var buildCss = gulp.src('src/css/**/*.css')
  .pipe(gulp.dest('dist/css'));
  
  var buildFonts = gulp.src('src/fonts/**/*')
  .pipe(gulp.dest('dist/fonts/'));

  var bulidJs = gulp.src('src/js/**/*')
  .pipe(gulp.dest('dist/js'));
  
  var bulidImg = gulp.src('src/img/**/*')
  .pipe(gulp.dest('dist/img'));

  var bulidHtml = gulp.src('src/*.html')
  .pipe(gulp.dest('dist/'));

}));