html {
    background: $background-secondary;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
}

.flex-columns {
    flex-wrap: nowrap;
    flex-direction: row;

    display: flex;
}

.flex-rows {
    flex-wrap: nowrap;
    flex-direction: column;

    display: flex;
}

.container {
    margin: 0 auto;
    max-width: 1600px;
    //height: calc(100% - $spacing-m*2);
    padding: 0 $spacing-xl $spacing-xl;
}

.p-generic {
    align-items: center;
    flex-direction: column;

    display: flex;
    margin: 0 auto;
    max-width: 1440px;
    padding: $spacing-s;

    @include for-size(sm-up) {
        padding: $spacing-m $spacing-l;
    }

    > * {
        width: 100%;
    }

    > button {
        width: auto;
    }

    .flex-columns {
        flex-wrap: wrap;
        justify-content: space-between;

        margin: 0 auto;
        max-width: 1000px;

        fieldset {
            //flex: 0 0 100%;
            flex-grow: 1;

            @include for-size(sm-up) {
                flex: 0 0 45%;
                flex-grow: 1;

                max-width: 45%;
            }
        }
    }
}

.p-error {
    align-items: center;
    justify-content: center;
    flex-direction: column;

    display: flex;
    height: calc(100% - 95px);
    padding: 0 $spacing-m;

    svg {
        margin-bottom: $spacing-l;
    }

    p:not(.heading-1) {
        max-width: 870px;

        text-align: center;

        @include fluid-type-title(320px, 1400px, $font-m, $font-xl);
    }
}