Евгений

что-то типа

const banners = document.querySelectorAll('.block');
banners.forEach(banner => {
  banner.addEventListener('mouseenter', (event) => {
    banners.forEach(innerBanner => innerBanner.classList.remove('active'));
    event.target.classList.add('active');
  });
});

по самому простому - скопировать повторяющийся элемент волны в свг например и размножить на фон блока по горизонтали сверху и снизу

навскидку примерно так:

<div class="image" style="background-image: url(https://i.ytimg.com/vi/E0hnI4_egl8/maxresdefault.jpg)">
    <a href="#">
      <span>Читать новость</span>
    </a>
</div>

.image {
  width: 200px;
  height: 150px;
  background-size: cover;
  display: flex;
}

.image a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  heigh: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  transition: ease all .2s;
  opacity: 0;
  visibility: hidden;
}

.image:hover a {
  opacity: 1;
  visibility: visible;
}

разве что закинуть картинку внутрь нужного блока, на картинку повесить стиль pointer-events: none;
возможно, получите что хотели

текстарее снизу выставить display: fixed; left: 0; right: 0; bottom: 0;
при желании списку сверху добавить паддинг снизу

создать таблицу пользователей, таблицу товаров, таблицу товар-пользователь
с первыми двумя все понятно. в последней будут поля: id записи, поле с id пользователя и поле с id товара. оно будет связывать как раз купленный товар и пользователя, который его купил

пользователи:
1 василий
2 петр

товары:
1 матрас
2 подушка
3 одеяло

покупки:
1 1(василий) 1(матрас) -- (василий купил матрас)
2 1(василий) 2(подушка) -- (также василий купил подушку)
3 2(петр) 3(одеяло) -- (петр купил одеяло)

Создаете блок с шириной контента внутри, его вкладываете в блок, где будет свойство overflow: hidden, и задаете ему какую-то определенную ширину. Он покажет внутри только видимую часть контента по ширине не больше определенной вами. для скролла создать отдельный элемент, который будет при передвигании бегунка добавлять отрицательный отступ слева у внутреннего блока с контентом

Это рамка

border: 0 или border: none поставь и все пройдет

Странно только, зачем столько расчётов, если все это сокращается до такого вида

Font-size: calc(1vw + 8px)

data:image/svg+xml;charset=utf-8,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20width%3D"14"%20height%3D"10"%20viewBox%3D"1%202%2014%2010"%20style%3D"fill%3A%23828a99%3B"><path%20d%3D"M8%2012C3.8%2012%201%208%201%207%201%206%203.8%202%208%202%2012.2%202%2015%206%2015%207%2015%208%2012.2%2012%208%2012ZM8%2010.5C9.9%2010.5%2011.5%208.9%2011.5%207%2011.5%205.1%209.9%203.5%208%203.5%206.1%203.5%204.5%205.1%204.5%207%204.5%208.9%206.1%2010.5%208%2010.5ZM8%208.6C7.1%208.6%206.4%207.9%206.4%207%206.4%206.1%207.1%205.4%208%205.4%208.9%205.4%209.6%206.1%209.6%207%209.6%207.9%208.9%208.6%208%208.6Z"%2F><%2Fsvg>

К значениям стилей, которые "не перебиваются", добавь !important.

text-align: center!important

li:nth-last-of-type(1)::after { /* ... */}