@use "../common/utils" as *;
@use "../common/mixins" as *;

.page-404 {
    background: #FFF;
    padding-block: calc-rem(50px) calc-rem(80px);

    &__wrapper {
        border-radius: var(--border-radius);
        text-align: center;

        @include media-breakpoint-up(lg) {
            padding: calc-rem(50px) 0;
            border: calc-rem(1px) solid rgba(var(--color-secondary), .2);
        }

        .wrapper {
            padding-bottom: calc-rem(20px);

            @include media-breakpoint-up(lg) {
                padding: 0 calc-rem(86px) 0 calc-rem(86px);
            }

            .label {
                font-size: clamp-font(9px, 9px);
                background: rgba(var(--color-primary));
                color: rgba(var(--color-white));
                padding-inline: calc-rem(10px);
                height: calc-rem(22px);
                text-transform: uppercase;
                display: flex;
                align-items: center;
                justify-content: center;
                width: fit-content;
                border-radius: calc-rem(20px);
                margin: 0 auto calc-rem(20px) auto;
                font-weight: var(--font-weight-bold);
            }
        }

        nav {
            padding-block: calc-rem(30px) 0;
            flex-direction: column;
            align-items: center;

            @include media-breakpoint-up(lg) {
                padding: calc-rem(35px) calc-rem(86px) 0 calc-rem(86px);
            }

            .button--arrow {
                justify-content: center;
                text-align: center;
            }
        }

    }
}
