.aw-page-single {
    @apply bg-page-bg;

    display: flex;
    flex-direction: column;
    min-height: 100dvh;

    &__container {
        flex-grow: 1;

        display: flex;
        flex-direction: column;
        gap: 1.5rem;

        padding-top: 1rem;
        padding-bottom: 0;

        &.container {
            .aw-page-single__mobile-title {
                padding: 0;
            }
        }
    }

    &__content {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    &__mobile-title {
        order: -4;

        padding: 0 var(--container-padding);

        font-size: 1.25rem;
        line-height: 1.2;
        font-weight: bold;
    }

    &__mobile-description {
        order: -3;

        padding: 0 var(--container-padding);
        margin-top: -1rem;
    }

    &__preview {
        &--reverse {
            order: -1;
        }

        &--column:empty {
            display: none;
        }
    }

    &__top-scroll-mark {
        /* order: -3; */
        height: 1px;
        /* margin-top: -1.5rem; */
        margin-bottom: -1px;
    }

    &__mobile-action-button {
        display: grid;

        padding: 1rem var(--container-padding);
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));

        position: sticky;
        bottom: 0;
        margin-top: auto;

        /* &--is-stuck {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(5px);
        } */
    }

    &__bottom-scroll-mark {
        margin-top: -1.5rem;
    }

    .aw-tooltip[data-visible] {
        z-index: 19;
    }
}

@screen lg {
    .aw-page-single {
        &__mobile-title,
        &__mobile-description {
            padding: 0;
        }

        &__header {
            position: sticky;
            top: 0;

            display: grid;
            grid-template-columns: minmax(min-content, 1fr) minmax(1rem, auto) minmax(max-content, 1fr);

            .aw-page-header__breadcrumbs {
                position: static;
            }
        }

        .aw-page-header--is-stuck {
            animation: none;
        }

        &__container {
            padding-top: 2rem;
            padding-bottom: 10rem;

            &--preview {
                display: grid;
                grid-template-columns: minmax(1rem, 1fr) minmax(0, max-content);
                justify-content: center;
                align-content: start;
                gap: 0;

                padding-left: var(--container-padding, 1.5rem);
                padding-right: var(--container-padding, 1.5rem);
                margin: 0 auto;
                max-width: 70.25rem;
            }
        }

        &__mobile-title,
        &__mobile-description {
            display: none;
        }

        /* &__top-scroll-mark {
            margin-top: calc(-2rem - var(--header-height, 0px));
            margin-bottom: calc(var(--header-height, 0px) + 0.5rem);
            grid-column: 1 / -1;
        } */

        &__content--column {
            width: 40rem;
            max-width: 100%;
        }

        &__preview {
            &--column {
                align-self: start;
                order: unset;

                width: 23.75rem;
                margin-left: 1.5rem;

                position: sticky;
                top: calc(var(--header-height, 0px) + 2rem);
            }

            /* &--header-sticky {
                transition: top 180ms ease-out;
            } */
        }

        &__mobile-action-button {
            padding-left: 1.5rem;
            padding-right: 1.5rem;

            margin-left: -1.5rem;
            margin-right: -1.5rem;
        }
    }
}