Дима

Возможно background-size: cover вам поможет, и картинка подстроится под размер вашего блока

Проще и понятней сделать через clip-path: (#url)чем непонятно с какой целью рисовать сложные фигурки. Просто залейте фигуру в svg и вставьте этот svg-код в свой код страницы, а потом используя её ID обрезайте любые изображение сколько угодно раз.

Через медиа-запрос и псевдоэлемент можно вот так, немного подправил ваши стили. Ну и вместо стрелки можно картинку залить. Разметку с языками допишите сами, там принцип тот же.

position: absolute не лучшее средство для таких целей. Проще использовать margin: 0 auto + margin-top *нужный отступ в пикселях*: https://jsfiddle.net/whkjt082/

Не очень понятно, для чего вам тут нужен массив :) Переменные задаются без сторонних знаков, вот фрагмент из документации

font-size = 14px

 body
   font font-size Arial, sans-serif

Который при компиляции превратится в

body {
	font: 14px Arial, sans-serif;
}

Соответственно, вы просто можете перечислить ваши названия переменных и через знак равно присвоить им цвета, а затем использовать в коде

Курсы и интенсивны на HTML Academy. Платно, но для начала идеальный вариант. Базовый курс очень хорош.

Линейный градиент с резким переходом как вариант:

background-image: linear-gradient(to left, #ffffff 15%, #000 15%, #000 85%, #fff 85%);

Не очень понятно куда надо передвинуть церковь и крест. Если они выпадают из потока, то проблема в ширине блоков, а если надо наоборот их выкинуть из него, то тут поможет отдельная обертка для них, с justify-content: space-between

Вроде вот так, если я все правильно понял:

.block {
  max-width: 900px;
  width: 100%;
}

.text {
  width: 40%;
}

В песочнице