Rustam Bainazarov

Data-атрибуты -- тоже CSS-селекторы.

animation: grow 3s linear forwards;

Вы использовали значение infinite свойства animation-fill-mode. Неудивительно, что анимация постоянно повторялась.

Значение forwards зафиксирует анимацию в последнем её состоянии. Без бесконечных итераций.

Адаптивность тоже завёз. Выравнивание текста и счетчика будет по верхней границе блока на телефонах, потому что так правильнее, чем если бы они были по середине, как на полной.

Добавляйте значение альфа-канала вот так (можно без нуля):
rgba(216, 46, 55, 0.35)

Я даже не уверен, что этот ваш код с процентами вообще валидный, потому что вижу такое написание впервые.

Update. Код невалидный. Значение в процентах само по себе писать можно, но делается это так:
rgba(216, 46, 55 / 35%)

Ссылка на информацию с MDN.

Update 2. Как правильно отметил RAX7, такой синтаксис, даже исправленный (со знаком процентов через черту), вообще не работает в IE, EDGE и Safari.

CSS-подход:
pointer-events: none;
Только с картинкой будет нельзя вообще взаимодействовать мышкой.

height: 100% у детей будет работать, если задать родительскому элементу четкое (эксплицитное) значение высоты.

min-height таким свойством не является. Оно не чёткое. Поэтому height: 100% работает внутри такого контейнера как height: auto.

Как один из вариантов,:
https://codepen.io/anon/pen/YgqEoJ

Таким методом удобно задавать соотношение сторон, кстати.

Обёртка нужна ещё одна.

Вот это в head:

<meta name="format-detection" content="telephone=no">

Вообще, этих мета-тегов больше:

<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="email=no">

Информация:
https://stackoverflow.com/questions/28027330/html-...

По этой ссылке есть мой ответ:
Как прижать подвал к низу страницы и при этом оставить событие scroll работоспособным?

P. S. При удалении контента — он удаляется из DOM, поэтому не может занимать место. Либо у вас контент не удаляется, либо вы использовали какие-то странные JS-решения для прижатия подвала.

Через CSS это сделать невозможно при однородной структуре, только безумным хаком (column-reverse + селектор тильда + обратный порядок элементов). И другие способы, привязанные к последовательности блоков — это так себе.

Ни :nth-child, ни :first-of-type так не работают (читайте хороший пост на тему).

Поэтому простейший JS вам в помощь:



Update: посмотрите комментарии, там решение на строчку кода меньше.

https://infinite-scroll.com/demo/full-page/

Крутите вниз, чтобы проверить работу плагина.

В одном проекте его применили, всё работает хорошо.

Если img превышает высоту родительского блока, то блок увеличивается.

Можно так, к примеру:

.swiper-slide {
    height: unset;
}

.flex {
    height: 100%;
}

Flex (для лучшей и более простой поддержки браузеров) + box-shadow (чтобы не увеличивать габариты блоков; можно заменить на псевдоэлемент):

https://codepen.io/xgad/pen/3dca3c1c396966acc4f8db...

https://codepen.io/sergiopedercini/pen/jmKdbj

https://codepen.io/saadeghi/pen/IBhfJ

У тебя стоит transition: .4s на все теги a (глобальный стиль). Убери для этого селектора transition:

.highslide-controls a {

    transition: none; /* Вот это добавь */

    background: url("../../../engine/classes/highslide/graphics/controlbar-black-border.gif");
    display: block;
    float: left;
    height: 30px;
    width: 30px;
    outline: none;
}

$('.button-1').on('click', function() {
     $('.button-2').click();
});

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;