Mr Crabbz

https://isotope.metafizzy.co/

У вас вопрос так построен... что-либо понять - очень сложно.

Но я попробую (про вашему конкретному примеру с людьми): скорее всего вам нужно много практически одинаковых фоток с небольшой разницей в времени сьёмки. Где брать? В местах, где публикуются фотки всяких пати, причем со свободной лицензией на использование и изменение (если вы, конечно, не собираетесь их покупать у авторов). Гуглите фотостоки либо фотографируйте сами. Магии нет, с воздуха оно не возьмётся.

Потому что вы .container задали:

.container {
display: flex;
}

Если поменять на display:block - всё работает. Очевидно, что конфликт с флексом.

Примерно:

$(window).on("scroll", function(){

	var headerPosition = $("header").offset().top + $("header").outerHeight();
	var sidebarPosition = $("aside").offset().top;
	if( sidebarPosition <= headerPosition ){
		console.log("Сайдбар добрался до шапки");
	}

});

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/individualnaya-trenirovka-dlya-detej.jpg" alt=""/>

Связано с тем, что градиент у вас сделан через class. А у разных иконок названия классов могут пересекаться и, соответственно, перезаписывать друг друга. Открывайте svg в блокноте и редактируйте названия классов на уникальные.