Иван К

медиа запросы

@media only screen 
and (min-width : 768px) 
and (max-width : 1024px)
and (orientation : portrait) { 
 .block {color: red;}
}

HTML Разметкой

<div class="bg1">
     <h1>Dander Studio</h1>
    ......
</div>
<button>Закзать</button>
<div class="bg2">
    ......
</div>

ну и через CSS фоны и позиционирование

Либо можно сделать псевдоэлемент с другим фоном

Сделать у синей плашки фон из SVG, а иконку с домиком поверх нее

https://codepen.io/ikonkov/pen/BaZezoG

Единственное но - текст не должен быть прозрачным ибо тогда под ним видно будет text-shadow

в flex-direction: row так работать не будет, можно сделать вот так:

https://codepen.io/ikonkov/pen/oNwOVEd

Так как вы хотите можно реализовать с правда высоту блока контейнера надо ограничивать

Я для такого юзаю либу https://github.com/ymschaap/jquery-lockfixed

Можно верстать без всяких сеток - сетка нужна для стандартизации, если проект большой и много разных блоков то сетка пригодиться. + зависит от конкретного дизайна.

Sumo select
https://github.com/HemantNegi/jquery.sumoselect

Конечно можно. В браузере на выходе HTML а не PHP соответственно рипнуть верстку никто не мешает.

Не видя верстку сложновато судить, но так есть варианты как это сделать