Cheizer

Решил на jquery, на css пока не получается

$('.round-button').height($('.round-button').width());
        $(window).resize(function(){
          $('.round-button').height($('.round-button').width());
        });

Пофиксил, сделал по другому, на float, без flex

.pagination__item:first-child {
  float: left;
}

.pagination__item:last-child {
  float: right;
}

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

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

Нашел решение, продублировать пришлось код для двух колонок, не красиво, но с этим буду разбираться дальше, так как нужно для вторых колонок, вычесть высоту первых при условии что центральная колонка выше обоих. Сложно пипец.

jQuery(function($){
	
	var max_col_height = 0; // максимальная высота, первоначально 0
	$('.box_one').each(function(){ // цикл "для каждой из колонок"
		if ($(this).height() > max_col_height) { // если высота колонки больше значения максимальной высоты,
			max_col_height = $(this).height(); // то она сама становится новой максимальной высотой
		}
	});
	$('.box_one').height(max_col_height); // устанавливаем высоту каждой колонки равной значению максимальной высоты
//////////	
	var max_col_height2 = 0; // максимальная высота, первоначально 0
	$('.box_two').each(function(){ // цикл "для каждой из колонок"
		if ($(this).height() > max_col_height2) { // если высота колонки больше значения максимальной высоты,
			max_col_height2 = $(this).height(); // то она сама становится новой максимальной высотой
		}
	});
	$('.box_two').height(max_col_height2); // устанавливаем высоту каждой колонки равной значению максимальной высоты
	
});

Что бы прижать к низу sidebar, добавьте flex:none иначе ширина неактуальна.

.sidebar {
    background: linear-gradient(to top, #ece, #eec);
    max-height: 1000px;
    height: 500px;
    width: 320px;
    position: fixed;
    bottom: 0;
    flex: none;
    top: auto;
}

https://codepen.io/Cheizer/pen/oNNqOxo
А если хотите отследить момент когда html элемент выходит из области просмотра, то без js не обойтись.

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

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

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

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

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

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

У вас там inline стиль прописан, flex-basis: 200px;
замените его на

width: 200px;
    margin: 0 auto;

и всегда будет 2 + 2

.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; */
}