chimir

https://developer.mozilla.org/en-US/docs/Web/CSS/A...

a[href*="category-first"] {
  color: red;
}

прописаны через background-image

Так и используйте через фон, зачем вам доп. блоки, а в медиа выражениях задавайте соответствующую картинку для фона. Подход используйте mobile first, то есть изначально задавайте маленькое изображение

Flexbox в Safari, почему так?

https://medium.com/web-standards/манифест-а-что-за...

на флексах https://jsfiddle.net/tk707x97/

добавьте overflow: hidden;

если вам нужны заглушки то воспользуйтесь placehold.it

<img src="http://placehold.it/380x380" width="380" height="380" alt="">

Попробуйте так:

@font-face {
  font-face: 'Mido Medium';
  src: url('../fonts/Mido-Medium.eot?#iefix') format('embedded-opentype'), 
       url('../fonts/Mido-Medium.woff') format('woff'), 
       url('../fonts/Mido-Medium.ttf') format('truetype');
}

а вообще для современный браузеров достаточно форматов woff и woff2

проще всего это сделать на флексах https://jsfiddle.net/chimir/nx5vnLm5/

если же делать на флоатах, то воспользоваться псевдоклассами :first-child и/или :last-child, чтоб убрать отступ у крайних элементов.

Вы хотя бы код привели, фаерфокс не поддерживает cal() в сокращенной записи font, используйте font-size

Увидеть бы пример разметки. Предположу, что необходимо задать ширину