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 по окончании анимации удаляешь

Множественные радиальные градиенты
пример

.row {
        display: flex;
        align-items: flex-start;
 }
.block-2 {
        flex: 0 1 50%;
        padding-left: 20px;
        position: sticky;
        top: 0;
 }

В CSS такого не сделать, только js

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

Через canvas

Сделать блок с такими же размерами и положением как у bk1, прописать ему opacity:0 и делать отступы от него

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

https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

animation-fill-mode:forwards

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

поставить фоновую картинку на этот блок

min-width:1440px для body

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

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

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

border с outline-offset