<div class="pic" style="--aW1:4;--aH1:3;--aW2:3;--aH2:4;">
<img src="pic01">
<img src="pic02">
</div>
.pic {
--temp: calc(var(--aW1) * var(--aH2) + var(--aH1) * var(--aW2));
}
.pic > :nth-child(2n+1) {
width: calc((var(--aW1) * var(--aH2) / var(--temp)) * 100%);
aspect-ratio: calc(var(--aW1) / var(--aH1));
}
.pic > :nth-child(2n) {
width: calc((var(--aH1) * var(--aW2) / var(--temp)) * 100%);
aspect-ratio: calc(var(--aW2) / var(--aH2));
}
Компоненты - обязательно используйте компоненты. Тогда верстальщик спокойненько тоже сначала их сверстает и потом будет переиспользовать.
Все элементы которые касаются блока, должны быть вложены в этот блок и сохранять иерарархию, а не так, что слайдер в одном блоке, а пагинация для него в другом.
вы попробуйте это сделать что описали
ну к примеру три маршрута (не будем десятки перечислять, но представим, что их много)
по доке я вижу два варианта
или
Но по сути они одинаковы. И там и там придется прописывать все ограничения.
Хотелось бы как-то один раз описать.