{"version":3,"file":"o9IUTtWP.js","sources":["../../../../storyblok/MultiContent.vue"],"sourcesContent":["<template>\n  <div\n    class=\"multi-content\"\n    :id=\"blok.id\"\n    :class=\"[\n      blok.blokPadding,\n      {\n        [`bg-${blok.bgColor}`]: blok.bgColor,\n      },\n    ]\"\n  >\n    <GridContainer\n      class=\"multi-content-container\"\n      :class=\"{\n        [blok.mediaPosition]: hasMedia,\n        [blok.mediaVerticalAlignment]: hasMedia,\n        [blok.mediaSize]:\n          hasMedia &&\n          (blok.mediaPosition == 'media-position-left' ||\n            blok.mediaPosition == 'media-position-right'),\n        'full-width': blok.fullWidth,\n      }\"\n    >\n      <GridItem\n        class=\"title-container\"\n        v-if=\"hasMedia && blok.mediaPosition == 'media-position-center'\"\n      >\n        <RichText\n          :class=\"getAlignmentOptions(blok.titleTextAlignment, 'text-align')\"\n          :text=\"blok.title\"\n        />\n      </GridItem>\n      <GridItem\n        class=\"media-container\"\n        v-if=\"blok.media?.[0]\"\n        v-bind=\"imageGridSize\"\n      >\n        <StoryblokComponent :blok=\"blok.media?.[0]\" />\n      </GridItem>\n      <GridItem class=\"text-container\" v-bind=\"textGridSize\">\n        <RichText\n          :text=\"blok.title\"\n          class=\"title\"\n          :class=\"getAlignmentOptions(blok.titleTextAlignment, 'text-align')\"\n          v-if=\"\n            blok.mediaPosition != 'media-position-center' ||\n            (!hasMedia && blok.mediaPosition == 'media-position-center')\n          \"\n        />\n        <RichText\n          class=\"text\"\n          :class=\"getAlignmentOptions(blok.bodyTextAlignment, 'text-align')\"\n          :text=\"blok.body\"\n        />\n      </GridItem>\n    </GridContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { GridContainer, GridItem } from \"cja-phoenix\";\nimport { MultiContentStoryblok } from \"~/types/bloks\";\nimport { getAlignmentOptions } from \"#imports\";\n\nconst { blok } = defineProps<{\n  blok: MultiContentStoryblok;\n}>();\n\nconst hasMedia = blok.media?.length;\n\nconst textGridSize = (() => {\n  const gridItemOptions = {\n    sizeSm: 4,\n    sizeMd: 4,\n    sizeLg: 9,\n    sizeXl: 9,\n  };\n\n  if (\n    !hasMedia ||\n    (hasMedia &&\n      (blok.mediaPosition == \"media-position-top\" ||\n        blok.mediaPosition == \"media-position-bottom\" ||\n        blok.mediaPosition == \"media-position-center\"))\n  ) {\n    gridItemOptions.sizeLg = 12;\n    gridItemOptions.sizeXl = 12;\n  } else if (hasMedia && blok.mediaSize == \"media-size-half\") {\n    gridItemOptions.sizeLg = 6;\n    gridItemOptions.sizeXl = 6;\n  }\n\n  return gridItemOptions;\n})();\n\nconst imageGridSize = (() => {\n  const gridItemOptions = {\n    sizeSm: 4,\n    sizeMd: 4,\n    offsetLg: 0,\n    sizeLg: 3,\n    offsetXl: 0,\n    sizeXl: 3,\n  };\n\n  if (\n    blok.mediaPosition == \"media-position-top\" ||\n    blok.mediaPosition == \"media-position-bottom\" ||\n    blok.mediaPosition == \"media-position-center\"\n  ) {\n    gridItemOptions.sizeLg = 12;\n    gridItemOptions.sizeXl = 12;\n  } else if (blok.mediaSize == \"media-size-half\") {\n    gridItemOptions.sizeLg = 6;\n    gridItemOptions.sizeXl = 6;\n  }\n\n  return gridItemOptions;\n})();\n</script>\n\n<style lang=\"scss\" scoped>\n.multi-content {\n  .multi-content-container {\n    gap: 40px;\n\n    &.media-alignment-center {\n      align-items: center;\n    }\n\n    &.media-alignment-bottom {\n      align-items: flex-end;\n    }\n\n    &.media-position-right {\n      .text-container {\n        grid-column-start: 1;\n        grid-row-start: 1;\n      }\n\n      &.media-size-half .media-container {\n        @media screen and (min-width: $break-lg-min) {\n          grid-column-start: 7;\n        }\n      }\n\n      &.media-size-quarter .media-container {\n        @media screen and (min-width: $break-lg-min) {\n          grid-column-start: 10;\n        }\n      }\n    }\n\n    &.media-position-bottom {\n      .media-container {\n        grid-row-start: 2;\n      }\n    }\n\n    &.full-width {\n      .media-container {\n        @media screen and (max-width: $break-sm-max) {\n          margin: 0 -24px;\n        }\n\n        @media screen and (min-width: $break-md-min) and (max-width: $break-md-max) {\n          margin: 0 -40px;\n        }\n\n        .media-content-image {\n          width: 100%;\n        }\n\n        :deep(img) {\n          width: 100%;\n        }\n      }\n\n      &.media-position-left .media-container {\n        @media screen and (min-width: $break-lg-min) {\n          margin-left: -32px;\n        }\n\n        @media screen and (min-width: $break-xl-min) {\n          margin-left: -64px;\n        }\n      }\n\n      &.media-position-right .media-container {\n        @media screen and (min-width: $break-lg-min) {\n          margin-right: -32px;\n        }\n\n        @media screen and (min-width: $break-xl-min) {\n          margin-right: -64px;\n        }\n      }\n\n      &.media-position-top,\n      &.media-position-center,\n      &.media-position-bottom {\n        .media-container {\n          @media screen and (min-width: $break-lg-min) {\n            margin: 0 -32px;\n          }\n\n          @media screen and (min-width: $break-xl-min) {\n            margin: 0 -64px;\n          }\n        }\n      }\n    }\n\n    .media-container {\n      display: grid;\n    }\n\n    .text-container {\n      .title {\n        margin-bottom: 24px;\n      }\n\n      .text {\n        display: grid;\n\n        :deep(p),\n        :deep(ul) {\n          margin-top: 0;\n        }\n      }\n    }\n\n    .title-container,\n    .text-container {\n      :deep(h1),\n      :deep(h2),\n      :deep(h3) {\n        font-weight: 800;\n\n        b {\n          font-weight: 800;\n        }\n      }\n    }\n\n    @include breakpoint-text-align;\n  }\n}\n</style>\n"],"names":["hasMedia","_a","__props","textGridSize","gridItemOptions","imageGridSize"],"mappings":"4QAoEM,MAAAA,GAAWC,EAAAC,EAAA,KAAK,QAAL,YAAAD,EAAY,OAEvBE,GAAgB,IAAM,CAC1B,MAAMC,EAAkB,CACtB,OAAQ,EACR,OAAQ,EACR,OAAQ,EACR,OAAQ,CACV,EAEA,MACE,CAACJ,GACAA,IACEE,EAAA,KAAK,eAAiB,sBACrBA,EAAI,KAAC,eAAiB,yBACtBA,EAAI,KAAC,eAAiB,0BAE1BE,EAAgB,OAAS,GACzBA,EAAgB,OAAS,IAChBJ,GAAYE,EAAI,KAAC,WAAa,oBACvCE,EAAgB,OAAS,EACzBA,EAAgB,OAAS,GAGpBA,CAAA,GACN,EAEGC,GAAiB,IAAM,CAC3B,MAAMD,EAAkB,CACtB,OAAQ,EACR,OAAQ,EACR,SAAU,EACV,OAAQ,EACR,SAAU,EACV,OAAQ,CACV,EAGE,OAAAF,OAAK,eAAiB,sBACtBA,EAAA,KAAK,eAAiB,yBACtBA,OAAK,eAAiB,yBAEtBE,EAAgB,OAAS,GACzBA,EAAgB,OAAS,IAChBF,EAAA,KAAK,WAAa,oBAC3BE,EAAgB,OAAS,EACzBA,EAAgB,OAAS,GAGpBA,CAAA,GACN"}