Александр

Как стилизовать input type=range?
В input типа range, при изменении поля обрезается ползунок, как это исправить?
Как сделать такой progress bar?

Это делается в два слоя. На первом - картинка, название и вся сопутствующая информация. На втором - кнопки добавления в корзину, поделится и лайк. Второй слой изначально делаете скрытым, рисуете его поверх (position: absolute), скрываете (opacity: 0; visibility: hidden;). При (:focus, :focus-within и :hover) показываете (opacity: 1; visibility: visible;).
Возможно добавляете JS, чтобы узнать, был ли наведен курсор и после убран с карточки (именно в таком порядке), чтобы скрыть второй слой (сделать .blur, если пользователь сфокусирован).

clip-path

Вы же inline-стили хотите "перебить"

1. Найти необходимую иконку.
2. Переделать SVG в CSS.
3. Изменить свой CSS.

По сути - да, однако, Вы можете собирать свои стили с разным названием файла. Ещё иногда можно встретить запись на подобии <link rel="stylesheet" href="file.css?v=N">. Почитайте.

let headerMain = document.getElementById('header__main');
let headerLogo = document.getElementById('header__logo-img');
let headerMenu = document.getElementById('header__menu');

function applySmallHeader() {
    headerMain.style.height = '80px';
    headerLogo.style.height = '140px';
    headerMenu.style.paddingTop = '0px';
}

function applyNormalHeader() {
    headerMain.style.height = '136px';
    headerLogo.style.height = '170px';
    headerMenu.style.paddingTop = '7px';
}

function onPageScroll() {
    if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
        applySmallHeader();
    } else {
        applyNormalHeader();
    }
}

window.addEventListener('scroll', function () {
    if (window.innerWidth > 992) {
        onPageScroll();
    }
});

window.addEventListener('resize', function () {
    if (window.innerWidth <= 992) {
        applyNormalHeader();
    } else {
        onPageScroll();
    }
});

Для Chrome; для Firefox.

https://css-tricks.com/styling-cross-browser-compa...

Добавьте grid-template-rows: 1fr;

UPD:
grid masonry (работает только в Firefox под флагом); статьи: 1, 2; примеры: 1, 2.

Вариант 1 - нажмите, чтобы запустить.
Прогресс на CSS, обновление на JS.

Вариант 2 - нажмите, чтобы запустить.
Всё на JS.

В React, надеюсь, обернете сами.

Это какое-то расширение не может файл свой найти. Какое - chrome://extensions/?id=ID_из_ошибки.

Сделал пару примеров. Если захотите писать черным цветом, то можно использовать mix-blend-mode: overlay. Возможно существует более простое/красивое/элегантное решение, но я сейчас не придумаю такое. Можно сделать намного проще, если не будет следующего условия:

чтобы линии начинались с конца второй строки и примыкали ко второй строке

Либо вручную разделять на строки и только последней строке добавлять подчеркивание.