<template>
    <main class="column-layout">
        <div class="columns">
            <lenis class="column one" instance="column-one">
                <slot name="column-one" />
            </lenis>

            <lenis class="column two" instance="column-two">
                <slot name="column-two" />
            </lenis>
        </div>
    </main>
</template>

<script setup>
import Lenis from './Lenis.vue'
</script>

<style lang="scss">
.column-layout {
    /* padding-top: var(--header-height); */
    /* height: var(--win-height); */
    height: 100vh;
    overflow: hidden;

    .breadcrumbs {
        padding-top: desktop-vw(28px);
        padding-bottom: desktop-vw(28px);
    }

    .columns {
        grid-template-columns: desktop-vw(480px) 1fr;
        display: grid;
        border-top: 1px solid var(--theme-fg);

        .column {
            height: 100vh;
            overflow: scroll;

            &.one {
                border-right: 1px solid var(--theme-fg);
            }
            &.three {
                border-left: 1px solid var(--theme-fg);
            }
        }
    }

    @include mobile {
        height: auto;
        margin-top: mobile-vw(20px);

        .columns {
            grid-template-columns: 1fr;
            padding-bottom: 35vh;

            .column {
                height: auto;
                overflow: hidden;

                &.one {
                    border-top: 1px solid var(--theme-fg);
                    position: fixed;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 35vh;
                    z-index: 5;
                    background: var(--theme-bg);
                    overflow: scroll;
                }
            }
        }
    }
}
</style>
