@use "../mixins" as *;
@use "../media" as *;

.error {

    &__inner {
        padding-block: var(--section-padding-y);

        @include desktop {
            padding-bottom: 0;
        }
    }

    &__image {
        @include flex-center(center);

        flex-direction: column;
        user-select: none;
        place-self: center;
        position: relative;

        & .copyright {
            position: absolute;
            right: 0;
            bottom: 0;
            text-align: end;
            font-size: 12px;
            color: var(--color-dark-50);
        }

        &-image {
            $min-w: 450;
            $container-width: 1600;
            $max-w: 550;
            width: clamp(#{$min-w}px, calc(#{$max-w} / #{$container-width} * 100 * 1vw), #{$max-w}px);

            @include mobile-s {
                width: 100%;
                min-width: 300px;
            }
        }
    }

    &__title {
        text-align: center;
        padding-block: 0.5em 0.5em;
        line-height: 100%;

        @include mobile-s {
            padding-block: 0.5em 0.5em;
        }
    }

    &__content {

        &--noul {
            max-width: 30vw;
            margin: auto;

            @include desktop-wide {
                max-width: 40vw;
            }

            @include desktop {
                max-width: 50vw;
            }

            @include tablet {
                max-width: 65vw;
            }

            @include mobile {
                max-width: 80vw;
            }

            @include mobile-s {
                max-width: 100%;
            }
        }

        &:not(.error__content--noul) {

            @include desktop-wide {
                max-width: 70%;
                margin-inline: auto;
            }

            @include desktop {
                max-width: 90%;
            }

            @include mobile-s {
                max-width: inherit;
            }
        }
    }

    &__description {
        @include flex-center(flex-start);

        column-gap: 2.5em;
        margin-bottom: 50px;

        &--noul {
            width: 100%;
        }

        &-text:not(.error__description-text--noul) {
            flex-basis: 50%;

            @include desktop-wide {
                flex-basis: 70%;
            }
        }

        @include tablet {
            margin-bottom: 30px;
        }

        @include mobile {
            flex-direction: column;
            gap: 1.5em 0;
        }
    }

    &__home {
        @include flex-center(flex-start);

        &-button {
            @include mobile-s {
                width: 100%;
            }
        }

        &-text {
            @include fluid-text(18, 16);

            color: var(--color-dark-50);
            max-width: 560px;
            margin-left: 1em;

            @include mobile-s {
                margin-left: 0;
                margin-top: 1em;
            }
        }

        @include mobile-s {
            flex-direction: column;
            align-items: flex-start;
        }
    }
}