Интересная задача. В общем весь фокус в том, что поверх видимых карточек, лежит точно такая же сетка с невидимыми карточками у которых есть только синий border. На сетку, которая лежит сверху, наложена маска:

mask: radial-gradient(320px 320px at var(--x) var(--y), black 1%, transparent 40%);

То есть у всего блока с синими border остается видимым только радиальный градиент в 320px, а x и y это координаты курсора. Ну и грубо говоря получается такая картина:

Как-то так:

Под мобилки требуется меньше стилей, по большей части это плиточки которые идут друг под другом. Используя Mobile First под мобильные устройства создается база, которая постепенно обрастает стилями доходя до десктопной версии, именно поэтому стилей получается меньше, потому что по больше части они дополняются, а не переопределяются или отменяются. Вам не придется выкручиваться и тратить лишнюю энергию на то чтобы впихнуть какой-то сложный блок, потому что он изначально простой. Это как бутон, который постепенно раскрывается и превращается в красивый цветок или как бабочка вылезает из кокона расправляя крылья, если их попытаться сжать обратно они сломаются.

Далее, даже если не обращать внимание на то с каких устройств заходят посетители, вам придется подстраиваться под поисковые системы, которые требуют оптимизацию под мобильные устройства. При Mobile First верстке у вас эта оптимизацию получится сама собой так как вы выбираете кратчайший путь к правильному отображению. Браузер не будет вообще применять свойства которые больше доступного размера, в то время как при first desktop будут применены все стили и переопределены, отсюда и всякие визуальные скачки при входе на сайт, которые критичны для первой отрисовки и прочие хорошо наблюдаемые не точности с отступами, вылезание блоков за пределы экрана и т.д.. А в случае, если начинают манипулировать вложенностью повышая специфичность, то первый рендеринг для мобильных устройств превращается в страдания

Кроме того, все становится более логично, шрифты увеличиваются, картинки становятся больше, как по мне это воспринимается намного легче и разгружает мозг.

От того что я верстаю через min, свойств в css файле меньше не становится.

Ну так все приходит с опытом

Если бы я делал через min-width, то верхняя часть хедера изначально была бы скрыта (display: none), но при ширине выше, например 768px, я бы ее показал (display: block) и писал бы остальные свойства для нее в этом же медиа-запросе.

Это все нюансы, один display: block ничего не порешает. Но бывают ситуации когда стоит комбинировать и min и max, я например описываю меню в отдельных media, я не делаю общих стилей для десктопа и мобилок, потому что там общего практически ничего нет, даже цвета и шрифты иногда отличаются вот кстати размышления Вадима Макеева на эту тему, я делал так задолго до просмотра этого видео и это удобно, кроме того используя сборщик можно раскидать их в разные файлы работать как с отдельными блоками не оглядываясь на переопределения.