.app-page {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    isolation: isolate;
}

.app-page__bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-color: #1e2424;
    background-image: url('../bg_main.jpg');
    background-image: image-set(
        url('../bg_main.webp') type('image/webp'),
        url('../bg_main.jpg') type('image/jpeg')
    );
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.app-page__overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.42) 0%,
        rgba(15, 23, 42, 0.55) 100%
    );
}

@media (max-width: 768px) {
    .app-page__bg {
        position: absolute;
        background-attachment: scroll;
    }

    .app-page__overlay {
        position: absolute;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-page__bg {
        background-attachment: scroll;
    }
}