Передача media-правила через iframe

Описание

Есть у меня 2 страницы. Так как один из них должен стоять в другом через iframe, обозначим её как дочерний, а другой — родительский. Обеим страницам подключен один и тот же css документ, в котором есть media-правило для размера экрана:

@media only screen and (min-width: 768px) {
    body {
        background-color: red;
    }
}

Когда размеры меняются, срабатывает media-правило для родительской страницы, но никак не реагирует дочерняя страница через iframe.

Дополнительно

Через час беседы с GPT решили поставить обработчик:

window.addEventListener("resize", (event) => {
    const width = window.innerWidth || document.documentElement.clientWidth;
    const height = window.innerHeight || document.documentElement.clientHeight;
    for (const iframe of document.querySelectorAll(`iframe`)) {
        iframe.contentWindow.resizeTo(width, height);
    }
});

Но тут блокирует CORS со словами:

Blocked a frame with origin "null" from accessing a cross-origin frame.

Хотя обе страницы на одном домене.

Вопрос

Что вообще можно делать в таком ситуации? Как мне передать отклики media-правил через iframe?