@layer master {
    .errorPage {
        height: 100vh;
        margin-top: calc(var(--min-padding) + var(--min-padding) - var(--header-height));
        .container {
            .media {
                position: absolute;
                right: -6px;
                bottom: -6px;
                width: 402px;
                height: 512px;
                svg {
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    path {
                        &.errorIconDark {
                            fill: var(--color-dark);
                        }
                        &.errorIconLight {
                            fill: var(--color-light);
                        }
                    }
                }
            }
            .inner {
                justify-content: center;
            }
            @media (max-width: 56em) {
                .media {
                    display: none;
                }
            }
            @media (--max-fablet) {
                .media {
                    display: none;
                }
            }
            @media (min-width: 56em) {
                .inner {
                    grid-column: 3 / span 8;
                }
            }
            @media (--min-fablet) {
                .inner {
                    grid-column: 3 / span 8;
                }
            }
        }
    }
}