Николай Шабалин

Отличная статья про техники разбиения слов. Там можно чуть лучше разобраться со всеми техниками

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

В целом это всё выглядит примерно вот так

<div class="grid">
  <div class="child">
    Мiсто
    <div>viber</div>
    <div>Telegram</div>
  </div>
  <div class="child">
    Мiсто
    <div>viber</div>
    <div>Telegram</div>
  </div>
  <div class="child">
    Мiсто
    <div>viber</div>
    <div>Telegram</div>
  </div>
  <div class="child">
    Мiсто
    <div>viber</div>
    <div>Telegram</div>
  </div>
  <div class="child">
    Мiсто
    <div>viber</div>
    <div>Telegram</div>
  </div>
  <div class="child">
    Мiсто
    <div>viber</div>
    <div>Telegram</div>
  </div>
  <div class="child">
    Мiсто
    <div>viber</div>
    <div>Telegram</div>
  </div>
  <div class="child">
    Мiсто
    <div>viber</div>
    <div>Telegram</div>
  </div>

  <div class="image">картинка</div>
</div>

Элемент с картинкой можно поставить вообще в любое место внутри .grid-родителя

.grid {
  display: grid;
  grid-template-columns: repeat(4, 158px);
  gap: 20px;
}

.child {
  border: 1px solid #000;
  border-radius: 4px;
}

.image {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
  border: 1px solid #000;
  border-radius: 4px;
}

У вас логика по сути сводится к отсутствию значения. На это отсутствие и нужно проверять. Если никаких единиц измерения нет, то подставь px, а если единицы измерения передали в функцию, то ничего не делай.

В styles есть функция, которая отвечает за проверку единиц измерения (unit).

Осталось написать логику
padding unit($value) == '' ? ($value)px : $value

Если передали число без единицы измерения unit($value) == '', то к $value добавь px — ($value)px
Если хоть какую единицу измерения передали, то ничего не делай — $value

Полный миксин

mixinName($value)
  padding unit($value) == '' ? ($value)px : $value
  margin unit($value) == '' ? ($value)px : $value

с примером

body
  mixinName(10);
  
p 
  mixinName(10px);
  
b 
  mixinName(10rem);

компилируется в

body {
  padding: 10px;
  margin: 10px;
}
p {
  padding: 10px;
  margin: 10px;
}
b {
  padding: 10rem;
  margin: 10rem;
}

Таблицы должны иметь одинаковое количество ячеек в каждом ряду.

1 1 1
1 1 1
1 1 1

Если какой-то ячейки нет в ряду, то вы должны растнуть ячейку на две

1 1 1
2   1
1 1 1

Если в ряду вообще одна ячейка из трёх, тогда нужно растянуть на 3 ячейки

1 1 1
2   1
3

В вашем случае нужно заменить первый и последний ряды с

<tr>
  <td height="50px" width="100%"></td>
</tr>

на

<tr>
  <td height="50px" colspan="5"></td>
</tr>

5 — потому что у вас 5 ячеек в втором ряду. Ячейкам во втором ряду вы уже можете указать конкретные ширины

Shimpanze, https://www.w3.org/TR/css-grid-2/
по умолчанию высота работает как для простого display: block как в <div>. Так как по сути указывая display: grid, мы указываем display: grid block: будь внутри с гридовым контекстом, а внешее блочным.

Вы также можете указать display: grid inline, тогда по умолчанию блок схлопнется "по тексту".

А ещё точнее с учётом бокосовой модели с учётом контента, паддингов, бордеров и марджинов.

Попробуйте обновить VS Code до последней версии, либо удалите ваш VS Code, загрузите заново и установите

.text-take {
 ...
 pointer-events: none;
}

но так вы отключаете полное взаимодействие с элементом. В общем, надо быть аккуратным с этим свойством

У вас селектор .bg-img:last-child не находит элемент. Поэтому нужно подобрать подходящий селектор.

Я бы на вашем месте на необходимый элемент добавил дополнительный класс, например bg-img-tablet и уже его скрывал на нужных разрешениях экрана.

А в чем проблема изолирования JS?

В es5 функциональная область видимости. В es6 блочная. Этих знаний достаточно, чтобы сделать железобетонный JS. Ну и используйте переменные с блочной областью видимости - let, const.

(function(d, w){
//ваш код
})(document, window)

и всё ваш код изолирован.

По-поводу HTML тоже проблем нет, а вот с CSS вы хапанёте очень сильно. Нужно будет скидывать стили для всех сайтов. CSS раздуется до неимоверных размеров.

input {
  background-color: transparent !important;
  border: 1px solid #0de !important;
  ...
}

Если же Вы наоткуп отдаете стили, чтобы интеграторы с этим вопросом справлялись сами, то кажется, что им это не нужно. Ведь это нужно иметь штатного верстальщика и не всем он нужен. Хочется просто подключить JS и чтобы работало.

В общем, сам я больше за iframe только из-за того, что отгребу от CSS.

Не используйте fieldset для оформления, вы убиваете семантику элемента. Fieldset предназначен для группировки инпутов по смыслу, то есть если у нескольких инпутов одна смысловая нагрузка, например инпуты для ввода данных кредитной карточки, то есть смысл их оборачивать в fieldset в ином случае это противозаконно.

Ничего не стоит сделать это с помощью CSS

Поспорю с Андреем.
2) Не храните все символы в одном шрифтовом файле, если у Вас мультиязычный сайт, то есть на сайте есть функционал, который позволяет сменить язык, то храните символы каждого "языка" в отдельных файлах. Это крайне просто.

Зачем так делать? Опять же повторюсь, если сайт мультиязычный, то нет смысла заставлять английского пользователя скачивать кириллические символы. Уменьшив файл в несколько раз вы ускорите загрузку шрифтовых файлов. Для этого в CSS есть директива unicode-range.

Например, для подключения кириллицы

@font-face {
    font-display: swap;
    font-family: 'Lato';
    src: url('/fonts/lato-light/lato-light.cyrillic.woff2') format('woff2'), 
        url('/fonts/lato-light/lato-light.cyrillic.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; // только кириллица
}

Как это работает? Браузер анализирует ваш DOM понимает какие символы используются на сайте и если есть совпадение, то шрифт закачивается, то есть в данном примере если на сайте есть кириллица, то lato-light.cyrillic.woff2 скачается и отрисуется, а шрифт lato-light.latin.woff2 даже не закачается.

Для разделения символов можно использовать инструмент fontmin, либо его gulp аналог

codepen

Посмотрите загрузился ли шрифт в вкладке network - font.

В этом случае загружается.

<style>
            .image {
                width: 100px;
                height: 100px;
                background-image: url('https://hi-news.ru/wp-content/uploads/2015/01/Galaxy.jpg');
            }
        </style>

        <div class="image"></div>

а в этом случае нет.

<style>
            .image {
                width: 100px;
                height: 100px;
                background-image: url('https://hi-news.ru/wp-content/uploads/2015/01/Galaxy.jpg');
            }
        </style>

        <div class=""></div>

Это всё очень просто проверяется в developer tools вашего браузера. Во вкладке network

SVG самый верный путь.

Вот это полезно для начинания - css-live.ru/articles/karmannoe-rukovodstvo-po-napi...

И Йоксель много про svg пишет - css.yoksel.ru