Vladislav

Попробуй решение с column-count
https://habr.com/ru/company/microsoft/blog/143158/

https://developer.mozilla.org/ru/docs/Learn/CSS/CS...
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

Вариант через span или div, позиционируешь его и ширину в 100vw, высоту какую надо

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

Если внизу файла, то да, это удобно редактировать на проде, но если проект лежит на гите и разбит на компоненты препроцессора, того же SCSS, проект проще поддерживать, если медиа лежат внизу каждого компонента, например шапки и если посмотреть с точки зрения оптимизации, то когда юзер заходит на сайт с телефона, если медиа в самом конце, то как мы знаем они читаются сверху вниз и пока читается пк стили той же шапки и пока они пройдут весь css до низа медиа, если проект большой это будет затратно и на доле секунд можешь увидеть на телефоне отсутствие адаптива той же шапки

Ну вообще плохая практика скрывать скроллбар от пользователя, при его физическом наличии, и чтобы он не был такой жирный, попроси дизайнера нарисовать кастомный скролл, а ты потом его стилизуешь

Если не получается нативно, то только через masonry

Попробуй https://github.com/NickLargen/Styled-Scroll

Попробуй https://github.com/NickLargen/Styled-Scroll
А вообще должно нативным css в safari без проблем работать

.selector:hover + . block { background: #000;}
При том block должен быть соседним элементом в DOM относительно элемента, на котором происходит ховер
https://webref.ru/css/selector/adjacent
https://webref.ru/css/selector/sibling

Нативный css masonry без всяких плагинов
https://codepen.io/rachelandrew/pen/QWEmPvK статья www.google.com/amp/s/habr.com/ru/amp/post/526008/

Делаешь обёртку грид для картинки и блока с текстом, в блок текста добавляешь сколько нужно параграфов и для отступов делаешь так: p + p { margin: 15px 0 0 0;} примерно так

Гриды наше все https://habr.com/ru/post/452922/

Пожалуйста не стилизуйте селекторы через id, для этого есть классы

.block + . block  { 
border-left: 1px solid #000;
}

background-color: transparent родителю
Через ::before сделать блок, спозиционировав его под контентом через z-index: - 1 и этому же блоку, который через ::before задать свойство filter