{{ partial:components/molecules/blocks/container }}
    <div
        class="{{ [
            columns_bg:color,
            columns_text:color,
            'rounded-2xl' => columns_bg:color != null or columns_bg:image != null,
            'p-2.5 md:px-0' => (columns_bg:color != null or columns_bg:image != null) and gap:gap_x == 'sm',
            'p-5 md:px-0' => (columns_bg:color != null or columns_bg:image != null) and gap:gap_x == 'md',
            'p-5 md:px-0 lg:py-10' => (columns_bg:color != null or columns_bg:image != null) and gap:gap_x == 'lg',
            'bg-cover bg-center bg-no-repeat' => columns_bg:image != null,
            'md:flex',
            'md:flex-wrap',
            'md:-mx-2.5' => columns_bg:color == null and columns_bg:image == null and gap:gap_x == 'sm',
            'md:-mx-5' => columns_bg:color == null and columns_bg:image == null and gap:gap_x == 'md',
            'md:-mx-5 lg:-mx-10' => columns_bg:color == null and columns_bg:image == null and gap:gap_x == 'lg',
            'space-y-2.5 md:gap-y-2.5' => gap:gap_y == 'sm',
            'space-y-5 md:gap-y-5' => gap:gap_y == 'md',
            'space-y-5 md:gap-y-10' => gap:gap_y == 'lg',
            'md:space-y-0',
            justify_content,
            columns_radius_mobile,
            columns_radius_tablet,
            columns_radius_desktop,
            align_items
        ] | classes | collapse_whitespace }}"
        {{ if columns_bg:image }}style="background-image: url({{ glide :src='columns_bg:image' }});"{{ /if}}
    >
    {{ columns }}
        <div
            class="{{ [
                'flex flex-col items-center' => is_center,
                'flex-initial',
                column_bg:color,
                column_text:color,
                'p-5 md:px-0' => column_bg:color != null or column_bg:image != null,
                'space-y-5',
                'rounded-2xl' => column_bg:color != null or column_bg:image != null,
                'md:space-y-10',
                'md:px-2.5' => gap:gap_x == 'sm',
                'md:px-5' => gap:gap_x == 'md',
                'md:px-5 lg:px-10' => gap:gap_x == 'lg',
                'md:basis-6/12' => width:md === '50',
                'md:basis-7/12' => width:md === '58',
                'md:basis-8/12' => width:md === '66',
                'md:basis-9/12' => width:md === '75',
                'md:basis-full' => width:md === '100',
                'lg:basis-3/12' => width:lg === '25',
                'lg:basis-4/12' => width:lg === '33',
                'lg:basis-5/12' => width:lg === '42',
                'lg:basis-6/12' => width:lg === '50',
                'lg:basis-7/12' => width:lg === '58',
                'lg:basis-8/12' => width:lg === '66',
                'lg:basis-9/12' => width:lg === '75',
                'lg:basis-full' => width:lg === '100',
                column_radius_mobile,
                column_radius_tablet,
                column_radius_desktop
            ] | classes | collapse_whitespace }}"
            {{ if columns_bg:image }}style="background-image: url({{ glide :src='column_bg:image' }});"{{ /if}}
        >
            {{ content }}
                {{ partial:if_exists src="components/molecules/content/{type}" text_color="{ column_text:color ?? columns_text:color }" }}
            {{ /content }}
        </div>
    {{ /columns }}
    </div>
{{/partial:components/molecules/blocks/container }}