Добавление тега href к изображению нарушает карусель? ⇐ CSS

[Anonymous]

Я пытаюсь создать слайдер, который одновременно отображает 4 горизонтальных изображения, каждое из которых имеет гиперссылку. Добавление к нему гиперссылок нарушает код. Я добавил теги «a» в CSS и ожидал, что он продолжит работать, но слайды стали вертикальными и отображались все, а не по четыре за раз. Может ли быть проблема с js? Я добавил часть CSS ниже, потому что думаю, что это проблема. Полный код находится по ссылке jsfiddle ниже. По сути, я пытаюсь сделать что-то похожее на карусель предварительного просмотра заголовка Netflix.
Вот моя ссылка на jsfiddle:
https://jsfiddle.net/Kronos11/s9uqjy6p /
.container a {
display: flex;
justify-content: center;
overflow: hidden;
}

.slider a {
--items-per-screen: 4;
--slider-index: 0;
display: flex;
flex-grow: 1;
margin: 0 var(--img-gap);
transform: translateX(calc(var(--slider-index) * -100%));
transition: transform 250ms ease-in-out;
}

.slider > a img {
flex: 0 0 calc(100% / var(--items-per-screen));
max-width: calc(100% / var(--items-per-screen));
aspect-ratio: 16 / 9;
padding: var(--img-gap);
border-radius: 1rem;
}


Подробнее здесь: https://stackoverflow.com/questions/781 ... s-carousel