Igor Schnaider

Так не плодите сущности. Стрелочка явно относится к самому блоку – пусть сам блок отвечает за свое состояние, а стрелка уже от него подтянет нужные стили.
.div.open { } .div.open .arrow-test { }

Похоже, контекст наложения сбивается. Попробуйте его явно "прибить". Можете для .frame__content добавить какое-нибудь из правил:
.frame__content { /* option #1 */ z-index: 0; /* option #2 */ transform: translateZ(0); }  

Да вроде ничего не тянет.
FF:

Safari:

Ну, и... Говорю же, из-за опечатки: https://jsfiddle.net/vzyp2Lcx/

table { table-layout: fixed; } th:last-child { width: 100%; }  

По поводу расположения написал же выше.
Кажется понял, в чем у вас путаница. position: absolute делает элемент блочным в том смысле, что у него создается блочный контекст форматирования. Это не совсем одно и то же, что и display: block.

На CSS можно.

$tablet-width: 'min-width: 750px'; .main-header { width: 100px; height: 100px; @media (#{$tablet-width}) {} }  

https://jsfiddle.net/fvc8sL59/

У вас тут расхождение:
.container { min-width: 1000px; padding: 0 10px; /* ☜ */ margin: 0 auto; } .row { display: flex; margin: 0 -15px; /* ☜ */ } Либо 10px, либо 15px.

В общем, методом тыка пришел к тому, что нужно дублировать свойство в атрибуте style. ¯\_(ツ)_/¯
https://codepen.io/anon/pen/RgJyrB
Новый Firefox уже поддерживает clip-path: polygon, для старых нужен fallback на SVG. IE и Edge вообще никак.

Лучше сам текст использовать в качестве маски для шестиугольника. Типа такого. И я бы преобразовал его в пути, чтобы он не поехал с центра, если будет использоваться fallback шрифт.

Во-первых, не надо рисовать вручную. Делайте в редакторе.
Нарисовали один многоугольник, клонировали его, поставили все на свои места. Оптимизатор их съест в один path. Отдельно — линия, которая будет иллюстрировать прогресс. И маска для картинки.
Сам текст можно простым HTML вставить поверх.

Попробуйте сбросить их:
:-webkit-full-screen-ancestor:not(iframe) { all: unset; }  

Похоже, что meta viewport нет. Но все равно, по сетке у вас выравнивания не получиться. Или вы про другое, может я вопрос неправильно понял.

пример
upd.
Вообще, можно на флексе сделать и не мучиться.

В случае с flexbox и flex-basis это, скорее, ближе к Element Queries. Media Queries все же завязаны на ширину вьюпорта. Поэтому решайте.

Страница к тому моменту уже загрузилась. А вот отрисовку блокирует.

Ну что-то типа такого.

input:checked ~ img { border: 1px solid; }  

Типа такого?

margin: auto; будет работать только если явно установлена ширина/высота (и top = right = bottom = left = 0).

Без явных размеров так:
/* ... */ p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }  

Там вместо процентов надо указывать значения от 0 до 1 (0 — 0%, 1 — 100%, .5 — 50% и т. д.). И еще используйте атрибут clipPathUnits="objectBoundingBox".

Браузеры все равно будут немного по-разному расчитывать эти размеры. Идеального соответствия вы не добъетесь. Все, что можно сделать, привязать иконку к тексту. Прыгать все равно будут, но уже вместе.

А что тут? Обычные блоки, а под ними полоска. ;-) Каждый блок состоит из трех частей (юзерпик, цитата и имя). Потом просто меняете местами их. Если на flexbox, то через order.