Александр Бабушкин

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

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

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

Например с помощью flexbox:

.ava{
        display: flex;
        align-items: center;
        justify-content: center;
       ...
    }

https://developer.mozilla.org/ru/docs/Web/CSS/line...

Line-height в процентах рассчитывается от размера шрифта самого элемента.
Если у элемента font-size=16px (явно задан или рассчитан на основе наследования, не важно)
То для того, чтобы задать line-height=24px нужно указать
line-height: 150%;

Line-height – это расстояние между базовыми линиями соседних строк.

UPD
Лично я не люблю относительные величины в line-height. Предпочитаю указывать безразмерный множитель. С ним не бывает никаких неожиданностей. И пишется короче.
Если брать пример выше, то

line-height: 1.5;

Наш опыт — не менять структуру УРЛ-ов!
Во-первых, переиндексация идет долго и мучительно.
Во-вторых, все равно в новом движке нужно помнить про старую структуру всегда, т.к. наверняка остались естественные ссылки на старые страницы, следовательно редирект должен корректно работать следующие 5 лет.
В-третьих, пользователям пофигу, они не вникают ни в длинные ни в короткие УРЛ-ы, Сафари вообще не показывает путь по сайту, только домен в строке адреса.