{"version":3,"file":"BlokColumns.c82beff1.js","sources":["../../../../storyblok/Blok/BlokColumns.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { BlokColumns } from '~~/types/storyblok/bloks'\nconst props = defineProps<{ blok: BlokColumns | undefined }>()\n\nconst columns = computed(() => {\n  return props.blok?.columns || []\n})\n\nconst gridClass = computed(() => {\n  const count = props.blok?.columns?.length || 1\n  return count === 2\n    ? 'grid-12 cols-2'\n    : count === 3\n    ? 'grid-12 cols-3'\n    : 'grid-12 cols-1'\n})\n\nconst verticalAlignment = computed(() => {\n  return props.blok?.vertical_alignment === 'end'\n    ? 'items-end'\n    : props.blok?.vertical_alignment === 'start'\n    ? 'items-start'\n    : 'items-center'\n})\n</script>\n\n<template lang=\"pug\">\ndiv(\n  v-editable=\"blok\"\n  class=\"blok-columns container grid grid-cols-1 md:grid-cols-12 md:gap-36 xl:gap-48\"\n  :class=\"[gridClass, verticalAlignment]\"\n)\n  StoryblokComponent(\n    v-for=\"column in columns\"\n    :key=\"column._uid\"\n    :blok=\"{ ...column }\"\n    class=\"column\"\n  )\n</template>\n\n<style lang=\"postcss\" scoped>\n.blok-columns {\n  & + & {\n    @apply mt-72;\n  }\n}\n.grid-12 {\n  &.cols-1 {\n    .column {\n      @apply md:col-span-12;\n    }\n  }\n  &.cols-2 {\n    .column {\n      @apply md:col-span-6 xl:col-span-5;\n    }\n\n    > :first-child {\n      @apply xl:col-start-2;\n    }\n  }\n\n  &.cols-3 {\n    .column {\n      @apply md:col-span-4;\n    }\n  }\n}\n</style>\n"],"names":["columns","computed","_a","props","gridClass","count","_b","verticalAlignment"],"mappings":"kMAIAA,EAAAC,EAAA,IAAA,OACE,QAAAC,EAAAC,EAAA,OAAA,YAAAD,EAAA,UAAA,EAA+B,CAAA,EAGjCE,EAAAH,EAAA,IAAA,SACE,MAAAI,IAAAC,GAAAJ,EAAAC,EAAA,OAAA,YAAAD,EAAA,UAAA,YAAAI,EAAA,SAAA,EACA,OAAAD,IAAA,EAAA,iBAAAA,IAAA,EAAA,iBAAA,gBAII,CAAA,EAGNE,EAAAN,EAAA,IAAA,SACE,QAAAC,EAAAC,EAAA,OAAA,YAAAD,EAAA,sBAAA,MAAA,cAAAI,EAAAH,EAAA,OAAA,YAAAG,EAAA,sBAAA,QAAA,cAAA,cAII,CAAA"}