Виталий Першин

Как вариант маска:

Просто повесь все необходимые стили сразу и добавить opacity: 0, а в активном состоянии меняй на opacity: 1

К .tabs__case добавь min-width: 0; flex-grow: 1;

Ну как минимум должно быть font-family: FormulaCondensed; а не font-family: Formula Condensed; либо у подключенного шрифта надо поменять название

Он у тебя на всех работает, просто последний слайд идет поверх остальных и скрывается только при помощи opacity: 0;
Добавь ко всем неактивным слайдам pointer-events: none; или visibility: hidden;

Весь фокус в этом:

border: 1px solid transparent;
background: linear-gradient(#e5e2e2, #e5e2e2 0) padding-box,
linear-gradient(90deg, #fa5560, #4d91ff) border-box;

Не совсем понятно для чего именно нужно это делать и нужен ли там вообще слайдер. Если например
swiper, то там нужны параметры:

speed: 1000,
autoplay: {
		delay: 0,
		enabled: true,
	}

И нужно transition переопределить:

.swiper-wrapper {
	transition-timing-function: linear !important
}

Можно прокручивать без слайдеров, при помощи css:

https://developer.mozilla.org/en-US/docs/Web/CSS/a...
aspect-ratio: 1 / 1;

Интересная задача. В общем весь фокус в том, что поверх видимых карточек, лежит точно такая же сетка с невидимыми карточками у которых есть только синий border. На сетку, которая лежит сверху, наложена маска:

mask: radial-gradient(320px 320px at var(--x) var(--y), black 1%, transparent 40%);

То есть у всего блока с синими border остается видимым только радиальный градиент в 320px, а x и y это координаты курсора. Ну и грубо говоря получается такая картина:

clip-path

-webkit-mask

Например так:

Если нижняя часть одинакового размера, то можно её отодвинуть при помощи flexbox



Есть еще subgrid, но поддержка пока слабая