sergski

У вас же используется mix-blend-mode: difference для заголовка. Вы контраст белого заголовка для белого бекграунда и сделали.)

например так, но нужно уже не бояться гридов

например, так

вам известен угол, значит можете найти противолежащий угол, а значит и длины всех сторон.

3d эффект можно, а вот овальную тень от прямоугольника никак)
что можно сделать

да также)

.block  {
background: url();
transition: all 1s ease;
}

.block:hover {
transform:scale(1.1);
}

Как то так

1. Норм.
   
2. В link обязателен только href и еще достаточно указать rel. Остальные можно смело убрать.
   
3. Базовые <420, <768, <1024. Далее уточняется от дизайна.
   

Баг из-за свойства content у псевдо-элемента, как-то так

Решается так:

p img {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Геометрические фигуры на css

Читайте книги