<script lang="ts">
    import ColumnsColumn from "./ColumnsColumn.svelte"
    export let block: ContentBlock<"columns">
</script>

<div class="container">
    {#each block.columns || [] as column}
        <ColumnsColumn column="{column}" />
    {/each}
</div>

<style lang="less">
    @import "../../../../lib/assets/css/variables.less";
    .container {
        display: flex;
        gap: 1.1rem;
        max-width: var(--normal-max-width);
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        overflow: hidden;
        @media @mobile {
            flex-direction: column-reverse;
            :global & > section {
                width: 100% !important;
            }
        }
    }
</style>
