sharpsss

Найди/нагугли как сверстать такие закругленные блоки, если не найдешь то делай их свг, то что внутри этих закругленышей иконки - это свг, а так по центру блок с круглЯшками это блок в контейнерном блоке 100% ширина и длина того что ты скинула + relative, остальные элементы в контейнерах absolute, можно так это сверстать например

на псведо элементах фоном сделай такой же блок закруглённый с градиентом(как варик)

По кодпену которое ты прикрепил - решение вот такое

.btn {
  padding-left: 6px;
  padding-right:6px;
  padding-top:6px;
  padding-bottom:6px;
  border: 1px solid black;
}

Попробуйте использовать vh - 100vh
Единица vh соответствует 1% от высоты области просмотра браузера, таким образом, 100vh равно всей высоте области просмотра.
Единица измерения vh вычисляет значение напрямую относительно окна браузера.

мб сменить подход, ну а так ваще попробуй контэйнер под картиночки сделать с min-width/height а картиночки background-size:cover/object-fit

const tab_button= document.querySelectorAll('.section-services__link');
const useless = document.querySelectorAll('.hidden');
function hidden_useless(){
  for(var n = 0; n < useless.length; n++) {
    useless[n].style.display = 'none';
  }
}
tab_button.forEach(div=> {
  div.addEventListener('div', hidden_useless)
})

Просто абсолютом тётю туш-то мало ли надо будет в перспективе её как-то двигать / анимировать что-то менять на её месте , удобный варик тетя абсолютом не бэкграундом а img , также можешь погуглить что такое webp и тег picture

можешь обернуть в postion:relative эти картинки затем прописать псевдо элемент ::before уже с золотистой картинкой с position:absolute, и при hover эти золотистые картинки будут скрываться