По идее диапазоны пишут так, чтобы не было перекрытия, т.е. если брейкпоинт на 768, то выделяем 2 диапазона:
1) 768+
2) 0 - 767

соответственно:

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}

Но тут есть нюанс, мы теряем пиксель между 767 и 768. В текущих реалиях, когда css и device pixels давно не равны, когда кругом все масштабируется ( и соответственно где-то внутри округляется) - все может быть. Поэтому дельту в пиксель уменьшают до 0.02px. Почему именно такая велична, сходу не нагуглю. Возможно , чисто эмпирическим путем выяснили что 0.01 не работает, например ))

похожая тема на стеке

upd:
а, ну вот там и ответ:

// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
// See https://bugs.webkit.org/show_bug.cgi?id=178261

1) Когда получаешь такой макет, спрашиваешь дизайнера:
как ведет себя картинка на разрешениях бОльших 1440?
-Обрезается по краям?
-Обрезается по краям, при этом плавно градиентом уходит к фоновому цвету?
-Растягивается на всю ширину с сохранением высоты? (cover)
-Растягивается на всю ширину с сохранением пропорций картинки?
2) Верстаешь на основании ответов
3) Если ответов нет, или диз в шоке, и прочее, сделайте-как-нибудь, то делаешь так, как считаешь нужным. Т.е. сам принимаешь решение. Сам :)

в общем нельзя transform из двух мест дергать, это так не работает
должно быть чего-то типа transform: translate(580px), scale(1.2);

если надо делить - делайте обертку, один трансформ на нее вешайте и тогда взлетит