tkachenkoaanna097

Поправил
https://jsfiddle.net/tnb0jdgu/

Как минимум не переопределять переменную и не обращаться напрямую к массиву с русским
https://jsfiddle.net/8kdu6wje/1/

.block {
  width: 254px;
  height: 488px;
  border: 1px solid #000;
  background: linear-gradient(117deg, black 42%, transparent 0);
}

https://jsfiddle.net/ypwhqxrt/

$prevButton.click(() => $slider.trigger('prev.owl.carousel'));
$nextButton.click(() => $slider.trigger('next.owl.carousel'));

Как-то так. Высоту, ширину и сдвиг относительно родительского элемента подберите, как вам нужно.

Можно, например, вот так:

.info__wrap {
  display: flex;

}

.info__item {
  width: 20%;
  padding: 20px;
  border: 1px solid #ececec;
  box-shadow: 1px 0 0 0 #ececec, 0 1px 0 0 #ececec;
}

* {
  box-sizing: border-box;
}

*:after,
*:before {
   box-sizing: border-box;
}

Пэддинги и оверфлоу хидден

.price__item {
	animation: bounce 2s 170ms infinite ease; 
        /* 170ms это задержка, поиграться с разными значениями */
}

https://jsfiddle.net/4mn8hz5u/

Для этого вам нужно знать какой из элементов текущий, например элемент с классом cost__elem--current, тогда вы можете вешать на все до него класс --success

const items = Array.from(document.querySelectorAll('.cost__elem'));

for (let i = 0; i < items.length; i++) {
  if (!items[i].className.includes('cost__elem--current')) {
    items[i].classList.add('cost__elem--success');
  } else {
    return;
  }
}

justify-content: space-between; задать флекс-контейнеру (элементу с display: flex) должно хватить

А Вам не подойдёт ли gulp-плагин для конвертации? Не пользуетесь галпом случайно?

https://pugofka.com/blog/technology/the-prepared-s...

loop: false или items: 2.

я ожидаю 2

У Вас установлено следующее:

single_slider.owlCarousel({
    dots: false,
    nav: true,
    loop: true,
    navText: '',
    items: 5,
    margin: 20
});

Добавить transform: skewY(0deg); примерно на минус 40-50 градусов, там как вам больше подойдет ;-)

Еще вариант через border-image/background-image: linear-gradient(…):

Затенение внутри блока
box-shadow: inset 0 0 4px 1px #ccc;
Но судя по всему тут обычная "наружная" тень у внутрених блоков
box-shadow: 0 0 4px 1px #ccc;

Ибо align-items: center;

Работает https://jsfiddle.net/hkyamdbg/
Но если только 2 слоя, картинка и цвет и цвет это нижний слой, то пишут просто одно обычное свойство background, начиная его с цвета.
background: red url()

content: "";
display: inline-block;
font-size: 10px;
width: 1em;
height: 1em;
transform: rotate(45deg);
border: 2px solid #fff;
border-left: none;
border-bottom: none;