picture обычно используется для retina-дисплеев, посему есть смысл просто давать размер изображения помноженный на два: 360px => картинка 720px в ширину. Причем, это минимальное значение, т.е. начиная с 361px уже картинка 1 536px (768 * 2).
overflow: hidden, можно. Обычно высчитывают через calc:.elem::before {
margin-left: calc(50vw - половина ширины контейнера);
}
// или
.elem::before {
transform: translateX(calc(50vw - половина ширины контейнера));
}background-blend-mode: difference;
subgrid, которая пока не поддерживается браузерами, либо просто использовать один грид на построение всей сетки. Возможности grid воистину безграничны.
1) Структура html/css чата должна быть в отдельном файле? Как это потом интегрировать на сайт?
2) Есть какие-то требования к чату? Где-то вычитал, что блоков head и body быть не должно, так же как и т.к. этот файл потом будет добавляться на уже готовый сайт.
3) Можете скинуть ссылки в codepen или примеры кода для таких чатов.
display: none с поиском по :hidden.
$(window).scrollTop() и $(element).offset().top.
<li class="pseudo-link" id="left">
...
</li>
<li class="pseudo-link" id="middle">
...
</li>
<li class="selected" id="right">
...
</li><div class="gr-content js-case_partps-bankruptcy g-hidden" id="gr_case_partps">
...
</div>
<div id="gr_case_judges" class="gr-content g-hidden">
...
</div>
<div id="gr_case_acts" class="gr-content">
...
</div>