.page-wrapper {
    @apply flex flex-col min-h-screen;
}

.page-main {
    flex-grow: 1;
    margin-block: --spacing(8);
}

.columns {
    display: grid;
    grid-template-columns: minmax(0px, 1fr);
    gap: --spacing(4) --spacing(8);
}

@variant md {
    :is([class*="page-layout-2columns-"], .page-layout-3columns) {
        --sidebar-width: 240px;
        --main-width: minmax(0px, 1fr);
        --page-layout: var(--sidebar-width) var(--main-width);

        .columns {
            grid-template-columns: var(--page-layout);
            grid-template-rows: auto 1fr;

            & > .column.main {
                grid-row: span 2;
            }
        }
    }

    .page-layout-2columns-left {
        .columns > .column.main {
            grid-column-start: 2;
        }
    }

    .page-layout-2columns-right {
        --page-layout: var(--main-width) var(--sidebar-width);

        .columns > .column.main {
            order: -1;
        }
    }
}

@variant lg {
    [class*="page-layout-2columns-"],
    .page-layout-3columns {
        --sidebar-width: 320px;
    }
}

@variant xl {
    .page-layout-3columns {
        --sidebar-width: 240px;
        --page-layout: var(--sidebar-width) var(--main-width)
            var(--sidebar-width);
    }
}