Выполнить задание по образцу (css grid, немного js)

Сценарий действий в правой колонке (меню):наводим курсор на статическую картинку - курсор меняется (на пальчик), а картинка становится динамическойкликаем по картинке - загружается youtube-страничка с соответствующим клипомлевый (большой) слой носит декоративный характер (неважно, тэги iframe или video используются) - видео здесь любое1. Формат образца:Верхний уровень - 60px 1fr 30px 1fr 10px;Левый плеер 720х405pxПравая боковушка:заголовки не делятсякартинки-ссылки - repeat(2, 2fr) 1fr;Размер тэга под картинку 160х80рх2. Обрабатываются события:onmouseover="this.src='ххх.webp'"onmouseout="this.src='ххх.png'"Сдаём в интернет-класс 1(один) html-файл с вёрсткой (100кб максимум)3. Ссылки на клипы, картинки (по столбцам)Begin again: 1 - youtube webp png 2 - youtube webp pngLee Hi: 1 - youtube webp png 2 - youtube webp pngIZ*ONE: 1 - youtube webp png 2 - youtube webp png webmМатериал по сеткам (grid):Руководство CSS Grid Layouthtml5book.ru - css-gridТег a (htmlbook.ru)Псевдокласс :hoverМатериал по js:Редирект на jswindow.open() | Открытие окон и методы windowПример обработки onmouseover/out (htmlbook.ru)Не забываем про предварительное    .s {        display: grid;        column-gap: 1px;        column-rule-style: hidden;        column-rule-width: 1px;    }