Note: Variables do not work inside media queries and container queries. You can use the var() function in any part of a value in any property on an element. You cannot use var() for property names, selectors(!!!), or anything aside from property values, which means you can't use it in a media query or container query.
console.log("Down"); и console.log("Up"); — расскоментируйте их, откройте консоль и посмотрите, что происходит при скроле.
selection - новый тег?
grid-auto-rows: 1fr;. Получаются равные по высоте строки.
переходили на слелующую колонку до того момента, пока они перестанут влезать.
Так во втором случае не важно, что у нее указана ширина в 1020px. Изображение тоже будет сжиматься, но до минимального размера. У img есть intrinsic size — в данном случае 640 x 424.