CSS Mem Slider

Слайдер с мемами, разработанный на чистом CSS

Моя роль

Создал дизайн и разработал слайдер согласно всем UX/UI и техническим требованиям, используя только CSS

Пример десктопной версии:

Пример мобильной версии:

Соблюсти расположение блоков (картинки, контролы, подписи) как в примерах выше
Слайдер позиционируется с равными отступами слева и справа
Имеется анимация для смены картинок по клику на контролы
Имеется анимация для смены подписей к картинкам по клику на контролы
Подписи к картинкам должны быть строковыми значениями (текстом)
Каждый контрол имеет большую область нажатия
Контролы имеют интерактивность (момент наведения, момент нажатия, активный контрол, изменение курсора)
Имеется мобильная версия слайдера
Присутствует "резиновость" слайдера
Дизайн на усмотрение разработчика
Подбор мемов на усмотрение разработчика

Запрещается использование CSS фреймворков (bootstrap, foundation и т.д.)
Запрещается использование CSS препроцессоров (необходимо использовать только чистый CSS)
Запрещается использование каких-либо js скриптов и npm пакетов
Запрещается использование псевдоэлементов (псевдоклассы можно)
Запрещается позиционирование position и float, все блоки слайдера (контролы, картинки, подписи к слайдеру) находятся в базовом потоке dom-элементов
Необходимо использовать только относительные единицы измерения rem, em, %, vh, vw, fr и тд
Разрешается/допускается использование px для медиавыражений
Разрешается/допускается использование reset.css и normalize.css