ну отступы там и остальное уже раскидаете сами, как надо, набросал как получилось

можно .nav__link добавить border-radius и уже кнопки при hover будут такие

Подскажите пожалуйста как повесить событие на инпут и перезаписать значение вызывая функцию в примере? https://codepen.io/Evgeny_Mufteev/pen/GREKbja

Добрый день! Подскажите, как зациклить, такую грид сетку?

.parent {
   width: 100%;
   box-sizing: border-box;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-gap: 35px;
 }

 .parent > div {
   position: relative;
 }

 .parent > div a {
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 3;
 }

 .parent > div img {
   max-width: 100%;
   height: 100%;
   width: 100%;
   object-fit: cover;
 }

 .parent > div:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
 .parent > div:nth-child(2) { grid-area: 1 / 4 / 2 / 5; }
 .parent > div:nth-child(3) { grid-area: 2 / 4 / 3 / 5; }
 .parent > div:nth-child(4) { grid-area: 3 / 3 / 5 / 5; }
 .parent > div:nth-child(5) { grid-area: 3 / 1 / 5 / 2; }
 .parent > div:nth-child(6) { grid-area: 4 / 2 / 5 / 3; }
 .parent > div:nth-child(7) { grid-area: 5 / 2 / 7 / 4; }
 .parent > div:nth-child(8) { grid-area: 5 / 4 / 7 / 5; }
 .parent > div:nth-child(9) { grid-area: 6 / 1 / 8 / 2; }
 .parent > div:nth-child(10) { grid-area: 7 / 2 / 8 / 3; }
 .parent > div:nth-child(11) { grid-area: 7 / 3 / 8 / 4; }
 .parent > div:nth-child(12) { grid-area: 8 / 1 / 10 / 3; }
 .parent > div:nth-child(13) { grid-area: 8 / 3 / 9 / 4; }
 .parent > div:nth-child(14) { grid-area: 9 / 3 / 11 / 5; }
 .parent > div:nth-child(15) { grid-area: 10 / 2 / 11 / 3; }
 .parent > div:nth-child(16) { grid-area: 11 / 3 / 12 / 4; }
 .parent > div:nth-child(17) { grid-area: 11 / 4 / 13 / 5; }
 .parent > div:nth-child(18) { grid-area: 11 / 2 / 13 / 3; }
 .parent > div:nth-child(19) { grid-area: 12 / 1 / 13 / 2; }
 .parent > div:nth-child(20) { grid-area: 13 / 1 / 15 / 3; }
 .parent > div:nth-child(21) { grid-area: 13 / 4 / 14 / 5; }
 .parent > div:nth-child(22) { grid-area: 14 / 4 / 15 / 5; }
 .parent > div:nth-child(23) { grid-area: 15 / 3 / 15 / 5; }
 .parent > div:nth-child(24) { grid-area: 15 / 1 / 15 / 2; }
 .parent > div:nth-child(25) { grid-area: 16 / 1 / 16 / 3; }

Понял, спасибо большое)

Через js) наверно)

я сделала через grid-template-areas именно схему и подтягиваю из админки условия)

просто нормального js не нашла, именно чтобы была определенная схема

а через areas из админка сделала подтягивание условия вместе со стилями

Извините, что повторяюсь ) Может просто сейчас есть кто может помочь в чате в онлайн)

А еще вопрос, подскажите, как можно сделать смену класса у header при достижение определенных блоков

Достижении? Года на экране появятся или когда кол-во определенное?

var $body = $('body'),
       $header = $('header');
       $(document).on('scroll', function () {
           var position = $body.scrollTop(),
           block_position = $('.benefit-list').offset().top;
           block_position1 = $('.text-logotype').offset().top;
           block_position2 = $('.service-block').offset().top;
           if (position >= block_position) {
               $header.addClass('header-white');
           } else if (position >= block_position1) {
               $header.removeClass('header-white');
           } else if (position >= block_position2) {
               $header.addClass('header-white');
           } else {
               $header.removeClass('header-white');
           }
       });

определенный блок) всего несколько страниц таких

но у меня не отрабатывает block_position1

вот сижу голову ломаю, где я промазала или что забыла

Я с jQ не оч дружу)

Хм.. а в js как?