DanielTonne

Вам нужно свойство border-image

https://developer.mozilla.org/en-US/docs/Web/CSS/b...

Они не поддерживаются на данный момент в GC.

https://caniuse.com/mdn-css_at-rules_media_range_syntax

https://codepen.io/soffrire/pen/ZEawJGP

Только вам остается подкорректировать саму анимацию

https://codepen.io/soffrire/pen/BamvVry

https://codepen.io/soffrire/pen/QWOJeow

На адаптиве меняеется макисмальную ширину .wrapper, т.е оболочки

https://jsfiddle.net/pqaw1xc9/5/

.header {
    display: flex;
}

В папку с проектом кладете файл шрифта в нужном формате, например .woff
В стилях задаете правило @font-face

@font-face {
    font-family: [УКАЗЫВАЕТЕ_НАЗВАНИЕ_ШРИФТА];
    src:  url('[ПУТЬ_ДО_ФАЙЛА_ШРИФТА.woff]') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

Для использования селектору задаете fotn-family и пишите название шрифта, который подключили.

Вариант на гридах подойдет?

white-space: nowrap:

Пример на Grid
Пример на Flex
Пример структуры сайта из вопроса