Ivan Ustûžanin

ЕМНИП через фильтры никак, но сам текст можно залить градиентом:

не понимаю зачем такие сложности, если теоретически можно заставить grid делать всё самостоятельно


понятно, этот пример ещё нужно доработать напильником, но основная мысль, думаю, ясна

если хочется страдать вручную, тогда крайне примерно алгоритм вижу так:
1) делаем ассоциативный массив, который будет содержать время => [ количество-блоков, есть-переходящие, ]
2) проходимся по всем блокам и заполняем массив, в том числе переходящими значениями, т.е. если блок с 10:00 до 11:30, а деление по полчаса, то прибавляем 1 к количество-блоков для 10:00, 10:30 и 11:00, а для 10:30 и 11:00 дополнительно ставим флаг есть-переходящие, возможно дополняя ссылками на данные блока для удобства дальнейшей работы
3) сортируем массив по ключам
4) (наверное самый сложный шаг) проходимся по массиву и берём максимальное значение количество-блоков в сериях !есть-переходящие, есть-переходящие... (т.е. это максимальное значение присваиваем всей серии)
5) окончательно проходимся по массиву и рисуем блоки опираясь на количество-блоков

лишний visibility: hidden;

какой, нафиг, плагин, да ещё и к jQuery? это же элементарная конструкция
<label><input type="radio"><span>1</span></label>
плюс что-то типа

label > input {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
label > span {
  display: flex;
  align-items: center;
}
label > span::before {
  content: '';
  width: 2em;
  height: 2em;
  border-radius: 50%;
  border: 2px solid #888;
  background: content-box #FFF0;
  padding: 2px;
}
label > input:checked + span {
  background-color: #00F;
  border-color: #00F;
}

допиленное по вкусу и необходимости

в тексте ошибка, 4-му абзацу быть под 1-м мешает тот самый 1-й абзац и он получается под 2-м

оно работает, но подозреваю, что position нужен не для elvo__window, а для elvo__section, ведь elvo__img находится в нём
ну или нужно перенести elvo__img внутрь elvo__window

они и ограничены, квадратом, которым является и фигура центральной нахлобучки
добавление border-radius: 50%; в нужную фигуру должно помочь

scroll-margin?

должно работать: https://developer.mozilla.org/en-US/docs/Web/HTML/...

можно, data-атрибуты, это просто строка, если что-то перестаёт работать после добавления двоеточия, значит это что-то как-то интерпретирует получаемые значения, но к data-атрибутам это не имеет никакого отношения

это вопрос скорее не про флексы и гриды, а про картинки, которые если не указано обратного занимают свой изначальный размер в пикселях, поэтому обычным делом является что-то типа img { display: block; max-width: 100%; } в "ресете"

в объявление для .prez добавить flex-wrap: wrap;

тег <p> по умолчанию имеет display: block, если заменить его на обычный <span> то он не будет начинаться с новой строки

однако отступы какие-то слишком гигантские, и возможно применять их нужно к тегу <a> или <div>

animation объединяет кучу свойств, в том числе и animation-delay