oelena

https://jsfiddle.net/ElenaOr/p6sbovyn/2/ - вариант, если градиент должен смотреться равномерно и на элементе и на псевдоэлементе.
И элементу с абсолютным позиционированием не нужен margin, у него есть top, left, right и bottom

border-top-color: -webkit-linear-gradient( 0deg, rgb(253,113,44) 0%, rgb(242,23,128) 100%);

- градиент это только image, а не color

.package-block-price {
            background-image: -moz-linear-gradient( 0deg, rgb(253,113,44) 0%, rgb(242,23,128) 100%);
            background-image: -webkit-linear-gradient( 0deg, rgb(253,113,44) 0%, rgb(242,23,128) 100%);
            background-image: -ms-linear-gradient( 0deg, rgb(253,113,44) 0%, rgb(242,23,128) 100%);
            background: #ffffff;

Зачем background-image здесь? Вы его background перебиваете.

Флекс к сожалению не умеет обтекать картинку текстом. Вариант только флоатом.
https://jsfiddle.net/ElenaOr/7ov9ec1p/9/ - поправила немного ваш html файл + когда пишите

.post-image {
  min-width: 400px;
}

то картинка располагается на всю ширину экрана, так как:

.post-image img {
  width: 100%;
}

поэтому блоку надо задать фиксированную ширину:

.post-image {
 width: 400px;
}

Зачем всем элементам задавать фиксированную высоту? При добавлении еще текста ваша верстка будет ломаться.
Картинку и текст "beer" надо добавить фоновым изображением через css: background-image и background-repeat: no-repeat; и тогда они не будут мешать остальному тексту встать на свое место. Ну и конечно в конце нужно отцентровать текст в круге свойствами флекса.

justify-content: center;
    align-items: center;

Как раз таки этот код у вас работает.

&:first-child {
padding-left: 0;
}

А вот этот

&:last-child {
	 	padding-right: 0; 

	 }

нет.
Все потому что у последнего элемента нет паддинга справа. Вы задали фиксированную ширину его родителю и обертке. Хотите его убрать, уменьшите ширину или добавьте

.list{
  justify-content: space-between;
}

если хотите растянуть содержимое на всю ширину

Sticky плавает внутри родителя. Т.е. его родитель должен быть тег main, и так он на header и footer не зайдёт. И укажите top.

https://jsfiddle.net/ElenaOr/79d1x0k8/5/ - вот так
sticky работает внутри родителя и на соседние элементы не опускается

Задать изображению такую же высоту.

.hero__personal-img {
  height: 100vh;
}