tyoma_koder

Можно сделать переменную с шириной контейнера

:root{
    --container-width:1200px;
}

У элемента выезжающего за контейнер

.block{
    margin: 0 0 0 calc(-1*(100vw  - 17px - var(--container-width))/2);/*17px это дефолтная ширина скрола*/
}

при mouseenter вставляешь в кнопку абсолютно позиционированный элемент с анимацией, смещение этого элемента в кнопке рассчитываешь с помощью getBoundingClientRect и window.event.pageX и window.event.pageX по окончании анимации удаляешь

убрать flex-wrap: wrap;, а чтобы сами элементы не сжимались прописать им flex-shrink: 0;

Через canvas

aspect-ratio: 16/9; Но это только если соотношение сторон у видео 16/9

используй тег details

min-width:1440px для body

добавить класс при клике с помощью js
или
добавить скрытый чекбокс в блок с заголовком таба перед текстом и в css прописать что то типа input:checked+a{color: white}

https://greensock.com/gsap/

position: absolute
поддерживается везде но неудобно делать адаптивы и выравнивать

grid-area: 1/1
удобно выравнивать элементы, даже родительские паддинги будут работать, но не работает в IE и прочем мусоре

border с outline-offset

можно анимации на чистом css делать с помощью keyframes

пропиши в хедере

<meta name="viewport" content="width=device-width, initial-scale=1">

добавь background блокам с текстом чтобы они небыли прозрачными

обычно такое рисуют в canvas

.content{
min-width: 100vh;
}