Все элементы которые касаются блока, должны быть вложены в этот блок и сохранять иерарархию, а не так, что слайдер в одном блоке, а пагинация для него в другом.
вы попробуйте это сделать что описали
.f-carousel img {
aspect-ratio: 221 / 166;
height: auto !important;
}в данном случае разницы нет, вернее этот вариант даже более громоздкий и запутанный, чем двойная вложенность foreach().
foreach( $arr as $k => $sub_arr ) {
$arr[$k] = array_filter($sub_arr, fn($v, $k) => $k === $foo && $v === $bar, ARRAY_FILTER_USE_BOTH);
}@media (max-width: 500px) {
.layout { grid-template-columns: 100%; }
.header { grid-column: span 1; }
.aside { display: none; }
}.layout { display: block; }
.aside { display: none; }
@media (min-width: 500px) {
.aside { display: block; }
... и дальше все из примера выше
}
Также делайте палитру цветов. Давайте цветам имена.
Верстальщик создаст эту палитру в таблице стилей. Посмотрит в макете название цвета и без копирования просто использует нужный по названию.