/**
 * hana+nils · Büro für Gestaltung
 * https://hananils.de · buero@hananils.de
 */

.error {
    --grid-columns: 1fr;
    --grid-gap: 0 3.8rem;

    display: grid;
    grid-gap: var(--grid-gap);
    grid-template-columns: var(--grid-columns);
    max-width: 160rem;
    margin: 5.4rem 0;
    padding-right: var(--dynamic-spacing-inline-end);
    padding-left: var(--dynamic-spacing-inline-start);
    gap: var(--grid-gap);
}

.error > * {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 50rem;
    justify-self: center;
}

@media (min-width: 700px) {
    .error {
        --grid-columns: auto minmax(30rem, 50rem) auto;
    }
}

@media (min-width: 1000px) {
    .error {
        --grid-columns: 2fr 2fr 2fr 3fr;
    }

    .error > * {
        grid-column: 2 / -1;
        justify-self: auto;
    }
}

.error header {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: 6.1rem;
    border: 0.1rem solid #fff;
    border-radius: 1rem;
    background-color: #f0992d;
    box-shadow: 0.2rem 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
    aspect-ratio: 5 / 6;
}

.error header h1 {
    padding: 3.4rem 3.4rem 0 3.4rem;
    font-size: 6rem;
    font-weight: 800;
    line-height: 5.4rem;
    letter-spacing: 0.05em;
    background-color: #fff;
}

.error header p {
    padding: 0 3.4rem 3.4rem;
    font-size: 6rem;
    font-weight: 200;
    line-height: 5.4rem;
    background-color: #fff;
    font-variant-numeric: lining-nums;
}

.error h2 {
    margin-top: 0;
}