WapSter

Чтобы явно указать анимируемое свойство и не нагружать браузер

создай новый элемент style в компоненте с отключенным scoped или отключи в текущем

Задать первой секции фиксированную высоту.

Что-то типо того.

.carousel .my-dots li button:before {
   // ...
  overflow: hidden;
}

`<div>
    text
    <div>
        text2
    </div>
</div>`

Инлайн стили имеют максимальный вес, чтобы их перебить нужно применять !important и nth-child это не псевдоэлемент, это псевдокласс.

Есть более удобный тэг picture. А твоя ошибка в том, что ты задаешь два параметра w и плотность нужно один из них выбирать

Вырезать эти фигуры и поиграть с z-index

В switch не стоит этого делать, он для точных значений. Логические операторы стоит использовать в if - это правильнее и в разы быстрее. Ну а так

const num = 10;

switch (true) {
  case (num <= 5):
    console.log('Num меньше или равна 5')
    break;
  case (num >= 5):
    console.log('Num больше или равно 5')
    break;
  default:
    console.log('Num не известно')
}
// Num больше или равно 5

Говнокод! Не повторять!

https://getbutterfly.com/how-to-implement-jquery-s...
Погуглил за тебя

Реализация на grid