Clever_Coyote

column-count

Примеры

Вы видимо немного не поняли.
Количество колонок меняется с помощью медиа квери. На враппер вешается @include container() на дочерний блок @include span(12),
media screen and (max-width: 768px) @include span(10)
media screen and (max-width: 414px) @include span(3)
Такая логика, надеюсь понятно будет

thead
tfoot
Код стайл поправить местами (где-то есть пробелы после селектора перед фигурными скобками, где-то нету)
Можешь переписать с помощью шаблонизаторов и препроцессоров + методологии, то если совсем глубоко вникать

width: calc(100% - 274px) как вариант

Slick (Center Mode)

Codepen пример

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Один вопрос, зачем такое делать?
Если одну и туже графику для мониторов с ретиной и без делать, на ретине будет значительная потеря качества. Следовательно для ретины нужно другая графика, с большим разрешением. И заюзать retina js дабы подсовывало нужные имейджы на ретине.

Код
Нельзя применять анимации к display:none.

Через <object>добавляйте. Тогда не теряется доступ css-ом, js-ом + svg анимация. Все плюшки сохраняются.

OS X в идеале, на Linux с фш проблемы могут быть. Лично мне приятнее Linux. Все от кейсов зависит, если просто верстаешь, винды с головой хватит.