Арсений Матыцин

Потому что свойств немного больше, чем хотелось бы. И типографика в вебе = боль. Это видно по инверсии примера.

Нужен бэк и база, которая будет хранить идентификаторы пользователей и отдавать на фронт сессионный ключ (чтобы каждый раз не заходить) а также флаг (true\false) авторизован ли пользователь.

Ну или край, можешь на JS прикрутить на морде псевдоавторизацию с тем же сессионным ключем. И им же (js) отдавать разные данные. Но как только есть что-то такое на JS, то все твои данные уже лежат на поверхности и ничего не стоит скрыть эту «авторизуйтесь», чтобы пошерстить на сайте.

SVG → dasharray. На чистом CSS никак (можно накрутить костылей на абсолютном позиционировании, но оно сломается на первом ресайзе).

Если есть скролл, то элемент\-ы больше размера вьюпорта в ширину. Соответственно, надо искать и фиксить.

Проверяется это ресайзом окна браузера. Отлично видно, если просто ресайзить, т.к. в эмуляторе включается скролл другого типа, который если не подергать по горизонтали, то и не увидеть.

Кнопку и картинку в обертку. Обертке position: relative, а кнопка position: absolute и выравниваешь. Ну и да, если пикча без условий и должна быть встроена в текст, то обертке еще и display: inline-block задай.

Я не очень понял, что за структура, отдельные стили для каждого медиазапроса чтоль? Но да не суть.

1. Первым делом должны быть описаны общие стили для блоков. Без медиазапросов. Многие объединяют это с мобильными стилями, а потом переопределяют. Можно и без переопределения сделать.
2. Повышаешь запросами «от» (min-width) вьюпорта, тогда переопределяется то, что изменяется, остальное входит в пакет.

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

grid-template-columns: 1fr 1fr;, у тебя три колонки, а не две, должно быть: grid-template-columns: 1fr 1fr 1fr;, а лучше grid-template-columns: repeat(3, 1fr);, потому как если твоим шаблоном управляют вложенные элементы, то ты сам уже потерял контроль. А grid-column: 1/3 вот такую запись проще заменить на grid-column: 1/span 2;. Так наглядно будет видно, сколько занимает ячеек блок.

Параметры контейнера целиком и полностью зависят от макета проекта. От его breakpoint-ов, сетки и отступов. К примеру, с какого ляда у него отступы по 10px? От чего это зависит? В бутстрапе и иже есть хоть .row, который как раз отыгрывает этот отступ. А тут он зачем? Чем он обоснован? Есть ли эта логика в макете?

Порой дешевле сделать почти как WapSter, но проще:

.container {
    max-width: 1200px;
    width: 100%;
    margin: auto;
}

Все попытки сделать универсальное обречены на провал. Все, чему надо следовать — здравому смыслу и макету.

Потому что ерунду написал.
https://jsfiddle.net/7o2wqfs6/

Крч, основная проблема в том, что вложенный блок никак не может видеть того, что происходит снаружи. Это CSS. Дешево и сердито — ограничивать текст под заголовком до такого уровня, что он прибитый к низу карточки не будет иметь большой разрыв с заголовком.

Вариант inFureal работает только в том случае, если ты верстаешь проект года 12-го, где про адаптив в глубинке еще не слышали. Потому что при переносе «карточек» вдруг окажется, что заголовки будут один под одним, в отрыве от текста под ними.

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

Но еще это можно сделать на dense гридах. Правда, ИМХО, проще повозиться со скриптами, чем сводить эту радость на сетках.

Конфиденциальные данные не должны хранится в незашифрованном виде на стороне клиента. Можно хранить ключи сессии (обычно бэк это вносит в кукисы, разница непринципиальная), а в localStorage проще вносить всякое типа последней открытой вкладки в табах (на самом деле краткосрочным данным лучше лежать в sessionStorage, чтобы не вычищать их руками) и т.д.

Дело в том, что если ключ сессии можно шмальнуть со стороны сервера и все, то имея на руках данные пользователя, срезав их с клиента у тебя уже есть данные для входа, коими потертый на сервере ключ сессии не является.

Внутри родительского блока (который можно абсолютно спозиционировать). Вложенным списком с отступами.

текст, который генерируется серверным скриптом

Просто привяжи размер размер шрифта к количеству символов. На выходе можно при генерации HTML писать что-то типа:

<span style="font-size:<?= 200 / strlen($string) ?>"><?= $string ?>...

Формула абстрактная, тебе точную врядли кто-то даст, так как привязку надо делать к метрикам шрифтов и подбирать на глаз, но пример о расчетах на выходе вон он, выше. Язык для примера — PHP.