tyzberd

пропишите разный rel для popup-link и id для окон как в rel

centerMode: true,
infinite: true,

если сделать так форма не должна отправится с required

$('form').on('submit', function (e) {
        // prevent default action and bubbling
        e.preventDefault();
       
    });

https://jsfiddle.net/yh3fvtq0/1/

у слайдеров есть события и методы, привязывайтесь к ним и пишите свой js kenwheeler.github.io/slick
например при ивенте afterChange получаем номер текущего слайда, потом по тому же номеру находим палитру и подсвечиваем.
также при клике на палитре юзаем slickGoTo

вы не тестируйте через разные непонятные сервисы, на реальном мобильном, или даже через chrome devtools скрол появляется только во время скролла и не влияет на ширину

по поводу двух директорий. у меня sass собирается так

const config = {
     scss: ['scss/**/*.scss', 'about-us/scss/**/*.scss'],
     css:  'about-us/dist/css',
     html: 'about-us/dist/*.html',
     template: 'about-us/templates/*.html',
     nunjucksPath: 'about-us/templates/',
     templateWatch: 'about-us/templates/**/*.html',
     baseDir: 'about-us/dist',
     spriteDir: 'about-us/sprite'
 };
gulp.task('sass', function () {
    return gulp.src(config.scss)
        .pipe(sourcemaps.init())
        .pipe($.sass({precision: 8}).on('error', $.sass.logError))
        .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
        .pipe(urlencode())
        .pipe(sourcemaps.write("./map"))
        .pipe(gulp.dest(config.css))
        .pipe(reload({stream: true}));
});

просто массив из директорий

а в один таск как то так
gulp.task('dev', ['serve', 'concatcss']); и watch добавить на собранный файл.

форматирует введенные цифры в ip адрес, добавляет запятые и вырезает буквы. https://codepen.io/anon/pen/zjWMzb