Cheizer

Решение, на первый список

.top-list:after {
    content: '';
    z-index: -1;
    width: 100vw;
    height: 100%;
    left: calc(50% - 50vw);
}

Перевел кое как на английский вопрос, и погуглил, не думал что правильно сформулирую вопрос на англ, вопрос, но получилось. Решение такое, может кому пригодиться

Стиль такой к блоку с бордером

-webkit-box-decoration-break: clone;
	box-decoration-break: clone;

Не знаю насколько кроссбраузенрно но работает

Вот живой пример
https://codepen.io/rpsthecoder/pen/yjVMLB

Попробуйте рисункам прописать align-self:center; или align-items:center

.logo-box {
  width: 8vh;
  height: 8vh;
  background-color: green;
  margin: 0;
display:flex;
align-items:center;
justify-content:center;
}
.logo-pic {
  width: 6vh;
  height: 6vh;
  background-color: red;
  margin: auto;
}

Ankhena подсказал решение, маску нужно сделать белой

решение подсказал Ankhena маску нужно сделать белой

Очень просто, стилями.

Вот стили для Google CART готовые https://snazzymaps.com/explore?tag=dark

Вот тут в можете создать свой стиль https://mapstyle.withgoogle.com/

А вот пример серой карты https://codepen.io/Cheizer/pen/wxMqLz

Вот черной https://codepen.io/Cheizer/pen/EzNvVB

Копируйте те или иные стили в опциях в свой код и все styles: [..........]

У вас на строку стоит CSS правило

.sec1 .ar0 h2 {
    padding-right: 245px;
}

Поэтому при уменьшении сразу места не хватает, и получается перенос строки.

Сделайте так

article h2{
    width: 100%;
    max-width: 518px;
}
.sec1 .ar0 h2 {
    /* padding-right: 245px; */
}