AngReload

Добавьте в head

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Подойдёт?

.item__content {
  height: calc(100% - 200px);
  background: silver; /* чтобы видно */
}

Не очень понятно, что можно использовать.
Проще всего переделать в обычную таблицу.
Можно сделать на flexbox, но html всё равно придётся менять - https://css-tricks.com/accessible-simple-responsiv...

Можно с помощью object-fit: cover;, но для ИЕ потребуются полифиллы

Чего-то ты намешал всё в кучу. Зачем было объединять бутылку и дорогу в один SVG? Даже анимация бутылки молока нет.

А неработает по трём причинам:
1. у тебя есть «дорога» и «путь». Видимо по аналогии с «бутылкой» и «молоком». Но бутылка — это только контур, это не закрашенная фигура. А дорога — она уже закрашена, белый путь не будет на ней виден.
2. Если закрасить «путь» не белым, а например, чёрным, то его всё равно не будет видно. Если удалить ему атрибут маски, то он становится виден. Это значит, что маска нарисована криво. Как это исправить — я не знаю, так как твой редактор понаставил отрицательных координат, размеров, ротате, транслате, короче говоря я незнаю где этот треугольник должен начинаться и заканчиваться. Только наугад подбирать.
3. в результате эффект будет плохо выглядеть. Так как дорога не прямая, а иногда даже поворачивает назад, а анимация будет только снимать прозрачность слева на право.

html, body { margin:0; padding: 0 }
или у футера отступы, это тебе лучше в инструментах разработчика посмотреть.

jsfiddle.net/AngReload/r27fk9Ld

Ратую за SVG

html, body {
  height: 100%;
}
body {
  display: table;
  width: 100%;
}
#contacts {
  display: table-row;
  height: 100%;
}
#contacts > .container {
  display: table-cell;
  vertical-align: middle;
}