DanielTonne

Вам нужно свойство border-image

https://developer.mozilla.org/en-US/docs/Web/CSS/b...

Это происходит из-за того, что обработчик клика висит на теге li, в котором и находится весь ваш контент. Следовательно, когда вы нажимаете на ссылку, вы нажимаете и на элемент li и у Вас запускается обработчик.

https://codepen.io/soffrire/pen/RwjXKNZ

Они не поддерживаются на данный момент в GC.

https://caniuse.com/mdn-css_at-rules_media_range_syntax

https://codepen.io/soffrire/pen/ZEawJGP

const addInputMaskPhone = () => {
  $(document)
    .on('input', '.js-input-phone', maskPhone)
    .on('focus', '.js-input-phone', maskPhone)
    .on('blur', '.js-input-phone', maskPhone)
    .on('keydown', '.js-input-phone', maskPhone)
}

let keyCode

function maskPhone(event) {
  event.keyCode && (keyCode = event.keyCode)

  var pos = this.selectionStart
  if (pos < 3) event.preventDefault()

  const matrix = '+7 (___) ___-__-__'
  let i = 0
  const def = matrix.replace(/\D/g, '')
  const val = this.value.replace(/\D/g, '')

  let newValue = matrix.replace(/[_\d]/g, function (a) {
    return i < val.length ? val.charAt(i++) || def.charAt(i) : a
  })

  i = newValue.indexOf('_')
  if (i !== -1) {
    i < 5 && (i = 3)
    newValue = newValue.slice(0, i)
  }

  var reg = matrix
    .substr(0, this.value.length)
    .replace(/_+/g, function (a) {
      return '\\d{1,' + a.length + '}'
    })
    .replace(/[+()]/g, '\\$&')

  reg = new RegExp('^' + reg + '$')

  if (
    !reg.test(this.value) ||
    this.value.length < 5 ||
    (keyCode > 47 && keyCode < 58)
  )
    this.value = newValue

  if (event.type === 'focusout' && this.value.length < 18) this.value = ''
}

addInputMaskPhone()

Только вам остается подкорректировать саму анимацию

https://codepen.io/soffrire/pen/BamvVry

https://codepen.io/soffrire/pen/QWOJeow

На адаптиве меняеется макисмальную ширину .wrapper, т.е оболочки

https://jsfiddle.net/pqaw1xc9/5/

.header {
    display: flex;
}

В папку с проектом кладете файл шрифта в нужном формате, например .woff
В стилях задаете правило @font-face

@font-face {
    font-family: [УКАЗЫВАЕТЕ_НАЗВАНИЕ_ШРИФТА];
    src:  url('[ПУТЬ_ДО_ФАЙЛА_ШРИФТА.woff]') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

Для использования селектору задаете fotn-family и пишите название шрифта, который подключили.

Вариант на гридах подойдет?

gulp.task('css', (callback) => {
    return gulp.src('./src/css/*.css')
        .pipe(gulp.dest('./build/css/'))
        .pipe(browserSync.stream())
    callback()
});

Но вообще лучше в папке с исходниками scss сделать папку, например, vendor, туда положить стили Swiper предварительно перегнав исходный css-файл в sass(scss), а после в через import подключить все к входной точке app.scss. Сам файл app.scss указываете в Gulp.

Пример:

const path = {
  css: {
    src: srcPath + 'sass/*.sass',
    app: appPath + 'css/',
    build: buildPath + 'css/',
    watch: srcPath + 'sass/**/*.{sass,scss}'
  },
}

function css(cb) {
  return src(path.css.src, {base: srcPath + 'sass/'})
    .pipe(newer(path.css.app + '*.css'))
    .pipe(sourcemaps.init())
    .pipe(plumber({
      errorHandler: function (err) {
        notify.onError({
          title: 'SASS Error',
          message: 'Error <%= error.message %>'
        })(err)
        this.emit('end')
      }
    }))
    .pipe(sass({
      includePaths: './node_modules/'
    }))
    .pipe(autoprefixer({
      cascade: true,
      remove: false
    }))
    .pipe(sourcemaps.write())
    .pipe(rename({
      suffix: '.min',
      extname: '.css'
    }))
    .pipe(dest(path.css.app))
  cb()
}

Пример структуры: