{"version":3,"file":"BlokGrid.3e135f46.js","sources":["../../../../storyblok/Blok/BlokGrid.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { BlokGrid } from '~~/types/storyblok/bloks'\nconst props = defineProps<{ blok: BlokGrid }>()\n\nconst cards = computed(() => {\n  return props.blok?.cards || []\n})\n\nconst columns = computed(() => {\n  const cols = parseInt(props.blok.columns || '0')\n  return cols > cards.value?.length ? cards.value.length : cols || 1\n})\n\nconst gridClass = computed(() => {\n  return 'cols-' + columns.value\n})\n\nconst alignmentClass = computed(() => {\n  return props.blok?.alignment === 'center'\n    ? 'grid-alignment-center'\n    : 'grid-alignment-left'\n})\n</script>\n\n<template lang=\"pug\">\ndiv(\n  v-editable=\"blok\"\n  class=\"container blok-columns flex flex-wrap w-screen md:-mt-48 -mx-18 sm:w-auto sm:mx-auto md:m-auto\"\n  :class=\"[gridClass, alignmentClass]\"\n)\n  StoryblokComponent(\n    v-for=\"card in cards\"\n    :key=\"card._uid\"\n    :blok=\"card\"\n    class=\"column basis-full\"\n  )\n</template>\n\n<style lang=\"postcss\" scoped>\n.blok-columns {\n  &.cols-1 {\n    @apply max-w-480;\n  }\n  &.cols-2 {\n    @apply max-w-900;\n    .column {\n      @apply md:basis-6/12;\n    }\n  }\n  &.cols-3 {\n    .column {\n      @apply md:basis-4/12;\n    }\n  }\n  &.cols-4 {\n    .column {\n      @apply md:basis-6/12 xl:basis-3/12;\n    }\n  }\n  &.grid-alignment-center {\n    @apply justify-center;\n  }\n  &.grid-alignment-left {\n    @apply justify-start;\n  }\n}\n</style>\n"],"names":["cards","computed","_a","props","columns","cols","gridClass","alignmentClass"],"mappings":"+LAIAA,EAAAC,EAAA,IAAA,OACE,QAAAC,EAAAC,EAAA,OAAA,YAAAD,EAAA,QAAA,EAA6B,CAAA,EAG/BE,EAAAH,EAAA,IAAA,OACE,MAAAI,EAAA,SAAAF,EAAA,KAAA,SAAA,GAAA,EACA,OAAAE,IAAAH,EAAAF,EAAA,QAAA,YAAAE,EAAA,QAAAF,EAAA,MAAA,OAAAK,GAAA,CAAiE,CAAA,EAGnEC,EAAAL,EAAA,IACE,QAAAG,EAAA,KAAyB,EAG3BG,EAAAN,EAAA,IAAA,OACE,QAAAC,EAAAC,EAAA,OAAA,YAAAD,EAAA,aAAA,SAAA,wBAAA,qBAEI,CAAA"}