Pavstyuk

-webkit-tap-highlight-color: transparent;

position: sticky;
top: 0; /* Нужно число px или других единиц от верха вьюпорта */

По изучайте внимательно position: sticky, там есть тонкости.

Если речь идет о слайдере, сразу смотрю в сторону swiperjs.com. Очень мощный, удобный инструмент. Но у вас там не просто слайдер, но и плиточки из фото. Какое в этом случае поведение подразумевается, можно только догадываться.

Swiper Slider

Плавно менять width и height практически не получится, т.к. от их размеров зависит контент всей страницы. Браузеру приходится пересчитывать все остальные элементы в зависимости от параметров текущего.
Как вариант, если элементу задать абсолютное или фиксированное позиционирование анимация становится плавнее, т.к. элемент выпадает из общего контекста страницы. Попробуйте. Также используйте свойство will-change иногда это может помочь. Но лучше transform для анимации не найти.

Первое что бросилось в глаза. Вы жестко ограничиваете ширину контэйнера:

.container {
  margin: 0 auto;
  width: 1150px;
}

Попробуйте так, должно стать гораздо лучше:

.container {
  margin: 0 auto;
  max-width: 1150px;
  width: 100%;
}

Далее вместо:

.blog_wrapper {
  display: flex;
}

Добавьте перенос:

.blog_wrapper {
  display: flex;
  flex-wrap: wrap;
}

Это же касается всех остальных блоков, где вы используете display: flex.

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;

Попробуйте прописать это набор свойств для ссылок.

span {
    position: absolute;
    display: block;
    margin: 0 0 0 8px;
    transition: all 0.4s;
    background: #fff;
    top: 0;
    left: 8px;
    height: 10px;
    padding: 0 10px;
    color: #454545;
    opacity: 0;
}
label  input:focus + span {
    opacity: 1;
    margin: -45px 0 0 8px;
}

Градиенты нельзя плавно анимировать, но можно создать background-size больше положенного размера минимум раза в два. Создать градиент из трех четырех цветов и плавно анимировать background-position-x или y или и то и другое. Будет не плохо смотреться.

Используйте <span> вместо <p>

Это можно сделать на jQuery легко.
https://www.w3schools.com/jquery/jquery_fade.asp

.youCantClickMe {pointer-events: none;}

Я бы сделал примерно так. Где sign.svg картинка восклицательный знак в формате svg. Вопрос в подгонке размеров и позиционирования псевдоэлемента :before уже по месту.

.line-4 {
    position: reletive;
    padding: 0 0 0 10px;
    margin: 0 0 0 30px;
}

.line-4:before {
    position: absolute;
    content: "";
    top: 0;
    left: -30px;
    width: 30px;
    height: 100%;
    background: url("/path/to/sign.svg") 50% 50% no-repeat;
    background-size: contain;
}

Лучше вставить svg будет гораздо легче и качественнее.