Syrone, теоретически, через кастомные свойства css это возможно.
Правда, экономически невыгодно в случае со многими вариациями картинки.
Я бы, наверное, в таком случае, использовала picture, aria-hidden="true" и гриды.
Если клиент в принципе в силах подготовить картинки для новой пикчи... (сомнения)
А если не готов и всё равно будет обращаться к вам, то и CMS не при чем
vittallyyaaa, с классом могут быть проблемы, если на элементе есть ещё классы или могут быть навешаны (а они могут, особенно если это body). Поэтому вариант удалить все классы и навесить нужный не очень хорошая идея.
А значит, лучше использовать data-
У кнопок тоже прописать data-
У кнопки получить - на body навесить.
Кнопки перебирать в цикле.
ymfront, вообще-то не тоже самое. Но Ок. И исходя из каких данных браузер должен решить, что ему делать?
Можете ставить неразрывные пробелы или по-другому запретить переносы. Сжать не сможет.
Выводить иконки через content крайне неудобно. В том числе не удобно и управление размерами.
Как можно поменять цвет:
1. Использовать иконку как mask, цвет меняется при помощи background-color
2. CSS фильтры (не очень легко для браузера)
3. SVG-стеки (не символьные спрайты, а стеки из svg). Внутри указываем цвет как currentColor или с помощью кастомных свойств CSS. Либо убираем fill из стека и задаем через CSS.
4. Инлайним SVG в разметку, меняем fill. Но стеки лучше.
А вы уверены, что это именно каждый второй, а не активный слайд?
Я нет.
Собственно, сдвигаете активный (посмотрите класс) слайд (любым удобным способом, трансформ, margin, align-self и т.д.) и добавляете тень.
vei66, нужно оставить красивые отступы, чтобы контентнпя часть не прилипала к краям окна. Сколько это - зависит от макета, размера шрифта, элементов и общей гармоничности.
Пробуйте, смотрите, давайте смотреть другим.