xdevelx

.hero .bg{
  width: 100%;
  height: 100vh;
  background: url('../img/bg.png') no-repeat;
  position: relative;
  left: 1080px;
  bottom: 40px;
}

width: 100% + left: 1080px - как считаете, насколько вправо от левого края экрана уйдет граница такого блока?

Все таки вначале импортируйте файл с миксинами, а потом те, в которых он используется
style.sass:

//Базовые настройки сетки
@import 'grid'
@import 'fonts'
@import 'top_navbar'

А еще лучше миксины создавайте в файле mixins.sass и его вначале импортируйте.

flexboxgrid.com
lostgrid.org/docs.html (postcss)

gridlex.devlint.fr
https://1000ch.github.io/grd/

https://github.com/twbs/bootstrap/tree/master/dist/css - там имеется bootstrap-grid.min.css

@media (max-width: 730px) {
  .team-people {
    width: 700px;
  }
}

Вот зачем 700px для мобильных?

И сразу же

.team-people {
    width: 785px;
}

И в ту же степь

.portfolio-form {
    width: 510px;
}

Если уж прям очень нужно ограничить ширину, то нужно ставить max-width и верстку не сломаешь.

https://codepen.io/xdevelx/pen/PoPMQEv

Почему не работает значение sub?

Свойство CSS vertical-align описывает вертикальное позиционирование строчных элементов (inline) или ячеек таблицы (table-cell). https://developer.mozilla.org/ru/docs/Web/CSS/vert...
vertical-align никак не влияет на размер шрифта

Но есть тег sub https://developer.mozilla.org/en-US/docs/Web/HTML/...

Каждый браузер может по разному трактовать дефолтные свойства для sub. Для приведения к единому значению можно использовать normalize.css https://github.com/necolas/normalize.css/blob/mast... либо прописать свои стили .

p a {
  font-weight: 400;
  color: #1a2e35;
  text-decoration: underline;
}

Только на сайте fontawesome тег i ещё и закрывается.
<i class="fab fa-accusoft"></i>
https://developer.mozilla.org/en-US/docs/Web/HTML/...

Tag omission
None, both the starting and ending tag are mandatory.

Если проверить разметку w3c валидатором, то увидите сразу ошибку. И браузеры могут неправильно трактовать невалидную вёрстку.

1 - можно посмотреть в chrome dev tools во вкладке network - там будет .woff2
2 - каждый браузер выберет тот шрифт, который он поддерживает
3- браузеры, которые понимают rel preload https://caniuse.com/#feat=link-rel-preload будут использовать .woff2

https://codepen.io/xdevelx/pen/vYNJbez

В чем отличается подключение шрифта awesome?

Вопрос не правильный. Шрифт подключается через css. JS выводит svg иконки.

почему в первом случае нельзя поменять цвет шрифта через CSS

Потому что в 1 случае не шрифт.

Есть же документация https://swiperjs.com/api/
И вот пример оттуда

var swiper = new Swiper('.swiper-container', {
  // Default parameters
  slidesPerView: 1,
  spaceBetween: 10,
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
})

https://bulma.io/documentation/columns/responsiven...

@VendorBundle - это namespace https://github.com/twigjs/twig.js/wiki#user-conten...
В gulp-twig есть соответствующая опция https://github.com/zimmen/gulp-twig/blob/56f060de3...

.pipe(twig({
  namespaces: { 
    'VendorBundle': 'vendor/vendor-bundle/Resources/views/' 
  }
}))

.Thingss ограничен height: 190px;
Контент внутри по высоте явно больше 190px

https://github.com/twigjs/twig.js