Вадим Кот

Если нужно как в Windows 10 или в Mac то вот пример https://codepen.io/AmJustSam/full/ModORY/
Ну либо гуглите css эффект матового стекла или css frosted glass effect
Эффект матового стекла описан и в книге Lea Verou / Леа Веру - CSS Secrets. Better Solutions to Everyday Web Design Problems. / Секреты CSS. Идеальные решения ежедневных задач.
Вот код примера из ее книги dabblet.com/gist/d9f243ddd7dbffa341a4

1. Тег pre https://developer.mozilla.org/en-US/docs/Web/HTML/...
2. Свойство white-space установить в pre https://developer.mozilla.org/ru/docs/Web/CSS/whit...
3. Вполне нормально переносы расставлять с помощью br. Тег br плох для отступов между элементами.
В данном случае как раз br и является актуальным вариантом. Предрассудки по поводу его глобального неиспользования связаны лишь с непониманием его предназначения и его ложным использованием в качестве отступов.

С помощью javascript можно вычислить средний цвет изображения и затем уже его применять как необходимо
Вот статья на хабре по этому поводу https://habr.com/ru/post/419309/
Там используется библиотека https://github.com/fast-average-color/fast-average... - в статье есть примеры использования. Ну и в readme репозитория (https://github.com/fast-average-color/fast-average... документация с примерами.

Если к первому и предпоследнему из четырех, то это соответственно первый и третий. Получается нужно применить стили к нечетным элементам.

.column-center-center:nth-child(odd) {
  /* стили для первого и третьего элемента */
}

https://codepen.io/web-tech/pen/eoYqbe

https://codepen.io/martian1oh1/pen/drzWqR

В консоли ошибка Uncaught TypeError: document.getElementByClassName is not a function должна намекать, что используете неправильное имя метода https://developer.mozilla.org/ru/docs/Web/API/Docu...

"Многословно", но вот так:
https://jsfiddle.net/vadimkot/738Lr4y5/16/

https://jsfiddle.net/vadimkot/r8ow740g/9/

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-display: swap;
}
body {
  font-family: "Open Sans", Verdana, Tahoma, Arial, sans-serif;
}

Вы же сами устанавливаете в font-family fallback шрифты, которые браузер подхватит в зависимости от их наличия в OS.

Зачем плодить однотипные вопросы - на тостере уже масса вопросов с решениями именно по этому элементу:
Как сделать косую рамку с одного угла?
Как сделать обрезанный угол с цветной границей?
Как сделать подобный срез угла?
Как сверстать у элемента угол скошенный под прямым углом?
и готовые решения:
tests.glazovnick.com/1
https://brofox86.github.io/cards-prototype/

jsfiddle.net/vadimkot/wbvoL87p/3