Как реализовать бордеры?

- тенями
- радиальным градиентом
- псевдоэлементами
- псевдоэлементами, border + outline если позволяет поддержка скругленного outline.

Как разобраться в позиционирование в блоках?

Судя по скринам, вы читаете учебник по флексам.
Вот флекс и задайте.
https://jsfiddle.net/kc65g8qz/

Общая структура:
Заголовок, список из 4 элементов, в каждом из которых есть дата и описание. Описание в свою очередь состоит из заголовка и списка.

Кружочки - это фоны.

Как в гридах выровнять по центру?

flowersms, задайте им такую ширину, которая вам нужна.
https://jsfiddle.net/bq4oyes1/

Как в гридах выровнять по центру?

flowersms, это вы так 1fr поменяли на min-content? Я бы порекомендовала перечитать справочник.

https://jsfiddle.net/Lvbhr2pw/

Как в гридах выровнять по центру?

ничего нету

:)
Чего ничего нету? ))

Вы сделали грид на 3 столбца.
Всего два дочерних элемента.
Каждый стоит в центре своей клеточки.

Если вам нужно, чтобы сами элементы были по центру родителя, то не нужно задавать им по 1fr, используйте, например, min-content с правильным количеством элементов

Как сделать, чтобы дочерний элемент был под оверлеем?

RealBoy211, нет

Почему авторский шрифт может неадекватно отображаться?

1. Проверяйте путь.
2. Современным браузерам лучше отдавать формат woff2, предыдущему поколению woff.
ttf не нужен сейчас вообще никому.
3. Шрифт подключается с основным названием, жирность и стиль указываются в font-weight и font-style
4. В шрифте может отсутствовать, например, кириллица.

@font-face {
    font-family: 'headingpro';
    src: url("/fonts/Heading-Pro-ExtraBold-Italic.ttf") format("ttf");
    font-weight: 900;
    font-style: italic;
}
body {
  font-family: 'headingpro';
  font-weight: 900;
  font-style: italic;
}

Если всё верно, то показывайте ссылку, где всё это не работает.

Как сделать, чтобы дочерний элемент был под оверлеем?

Очевидно, наложить overlay СВЕРХУ.
Например, псевдоэлементом.

Почему не срабатывает отрицательный z-index?

RealBoy211,

я знаю о контексте наложения, однако мне это не помогло в решении проблемы

Видимо, не совсем.
Знания о контексте наложения полностью отвечают на ваш вопрос "Почему?".
Отрицательный для дочернего не срабатывает именно потому что у родителя relative и z-index 1.

Возможно, задача-то совсем не в том, что вы сформулировали?

И могу повторить тоже самое, что написала в том вопросе: гридами аналогичные задачи решаются в основном легче.

Как реализовать данную стрелку?

marinkas, без разницы, есть маски и фильтры. Один раз в кастомное свойство и дальше масками.

Как верстать макет из фотошопа в PerfectPixel?

Александр Борисович, да, именно так.

Почему не срабатывает отрицательный z-index?

https://qna.habr.com/q/1067080

Как верстать макет из фотошопа в PerfectPixel?

Александр Борисович,

просите дизайнера перевести pt в px

Фотошоп это делает без участия дизайнера.

Как верстать макет из фотошопа в PerfectPixel?

Mors Clamor,

или это не так критично?)

Зависит от того какие допуски по ТЗ и какие у вас права оспаривать видение дизайнера.

Попадание в pixel perfect прям точечка в точечку, близко к невозможно для всех браузеров и систем, даже если проверять только на ширине макета.

Как верстать макет из фотошопа в PerfectPixel?

Mors Clamor, дизайнер и не обещал, наверное, рисовать макет под PP. Делайте одинаковые отступы.
Потому что по логике они там одинаковые.

Как получить данную тень?

maketosLikes, если в фигме на самом деле ничего больше не указано, то вероятно, не тенью и сделано.

Как получить данную тень?

Последовательными итерациями.

1. Читаете про то как вообще задаются тени в css.
2. Берете имеющийся цвет и делаете любую тень, с параметрами, которые как вам кажется подходят.
3. Проверяете.
4. Редактируете.
И так пока не попадете в результат.

Не знаю в чем у вас макет, но даже из фотошопа тени копируются в css.

Как верстать макет из фотошопа в PerfectPixel?

Mors Clamor, эмммм
там вообще нет картинок. О чем вы говорили

там одна фотография на 2 экрана в длину выходит

Там все просто: делаете резину пока все влезает и хорошо видно, потом перестраиваете в один столбик на мобилках.

Как верстать макет из фотошопа в PerfectPixel?

Mors Clamor, а дальше показывайте макет :)

Как верстать макет из фотошопа в PerfectPixel?

Mors Clamor, в вебе нет смысла использовать pt.
Начните с того, что настройте фотошоп так, чтобы он показывал px. А потом пересчитывайте в нужные вам единицы измерения или оставляйте в px.