{"version":3,"file":"CQgKpAS2.js","sources":["../../../../components/common/Timeline.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { type TimelineItem } from '~/models/arbitrary';\r\n\r\ntype Props = {\r\n  items: TimelineItem[];\r\n};\r\n\r\nconst props = defineProps<Props>();\r\n\r\nconst isImageless = props.items.every((item) => !item.image);\r\nconst isRightSided = props.items.every((item) => item.position === 'right');\r\nconst isLeftSided = props.items.every((item) => item.position === 'left');\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    class=\"timeline\"\r\n    :class=\"{\r\n      'timeline__item--right-side': isRightSided,\r\n      'timeline__item--left-side': isLeftSided,\r\n      'timeline__item--imagesless': isImageless,\r\n    }\"\r\n  >\r\n    <div\r\n      v-for=\"(item, index) in items\"\r\n      :key=\"item.id\"\r\n      class=\"timeline__item\"\r\n      :class=\"{\r\n        [`timeline__item--${item.position}`]: true,\r\n        'timeline__item--first': index === 0,\r\n        'timeline__item--last': index === items.length - 1,\r\n      }\"\r\n    >\r\n      <div v-if=\"!isImageless\" class=\"timeline__image\">\r\n        <img alt=\"\" aria-hidden=\"true\" loading=\"lazy\" :src=\"item.image\" :srcset=\"item.imageSet\" />\r\n      </div>\r\n      <div class=\"timeline__number\">\r\n        <span>{{ index + 1 }}</span>\r\n      </div>\r\n      <div class=\"timeline__content\">\r\n        <div class=\"timeline__card card card--dark\">\r\n          <h5>{{ item.title }}</h5>\r\n          <span>{{ item.content }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n.timeline {\r\n  --row-gap: 2.5rem;\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 1.875rem;\r\n\r\n  &.timeline__item--right-side.timeline__item--imagesless,\r\n  &.timeline__item--left-side.timeline__item--imagesless {\r\n    .timeline__item {\r\n      &.timeline__item--right {\r\n        grid-template-columns: 3.125rem 1fr;\r\n        grid-template-areas: 'number content';\r\n      }\r\n\r\n      &.timeline__item--left {\r\n        grid-template-columns: 1fr 3.125rem;\r\n        grid-template-areas: 'content number';\r\n      }\r\n    }\r\n  }\r\n\r\n  &.timeline__item--right-side {\r\n    @media (max-width: 787.98px) {\r\n      .timeline__item {\r\n        grid-template-columns: 3.125rem 1fr;\r\n        grid-template-areas:\r\n          'number image'\r\n          'number content';\r\n      }\r\n    }\r\n  }\r\n\r\n  &.timeline__item--left-side {\r\n    @media (max-width: 787.98px) {\r\n      .timeline__item {\r\n        grid-template-columns: 1fr 3.125rem;\r\n        grid-template-areas:\r\n          'image number'\r\n          'content number';\r\n      }\r\n    }\r\n  }\r\n\r\n  .timeline__item {\r\n    display: grid;\r\n    grid-template-columns: 3.125rem 1fr;\r\n    grid-template-areas: 'number content';\r\n    gap: var(--row-gap);\r\n    align-items: center;\r\n\r\n    @media (min-width: 768px) {\r\n      grid-template-columns: 1fr 3.125rem 1fr;\r\n      grid-template-areas: 'image number content';\r\n    }\r\n\r\n    &.timeline__item--left {\r\n      grid-template-areas: 'content number';\r\n\r\n      @media (min-width: 768px) {\r\n        grid-template-areas: 'content number image';\r\n      }\r\n    }\r\n\r\n    &.timeline__item--first {\r\n      .timeline__number {\r\n        &::after {\r\n          top: 50%;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.timeline__item--last {\r\n      .timeline__number {\r\n        &::after {\r\n          bottom: 50%;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .timeline__image {\r\n    display: none;\r\n\r\n    grid-area: image;\r\n\r\n    @media (min-width: 768px) {\r\n      display: block;\r\n    }\r\n\r\n    img {\r\n      margin: 0 auto;\r\n    }\r\n  }\r\n\r\n  .timeline__number {\r\n    grid-area: number;\r\n\r\n    position: relative;\r\n    z-index: 1;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    align-self: stretch;\r\n\r\n    span {\r\n      z-index: 2;\r\n\r\n      height: 4.375rem;\r\n      width: 100%;\r\n\r\n      font-weight: 700;\r\n      font-size: var(--font-size-xxxl);\r\n      line-height: 4.375rem;\r\n      text-align: center;\r\n\r\n      background-color: var(--brown-darkened);\r\n    }\r\n\r\n    &::after {\r\n      content: ' ';\r\n\r\n      position: absolute;\r\n      z-index: 0;\r\n      bottom: calc(var(--row-gap) * -0.5);\r\n      top: calc(var(--row-gap) * -0.5);\r\n\r\n      width: 0.0625rem;\r\n\r\n      background-color: var(--gray-light);\r\n    }\r\n  }\r\n\r\n  .timeline__content {\r\n    grid-area: content;\r\n  }\r\n}\r\n</style>\r\n"],"names":["props","__props","isImageless","item","isRightSided","isLeftSided"],"mappings":"0TAOA,MAAMA,EAAQC,EAERC,EAAcF,EAAM,MAAM,MAAOG,GAAS,CAACA,EAAK,KAAK,EACrDC,EAAeJ,EAAM,MAAM,MAAOG,GAASA,EAAK,WAAa,OAAO,EACpEE,EAAcL,EAAM,MAAM,MAAOG,GAASA,EAAK,WAAa,MAAM"}