minnan-website/components/parts/ThreeImageList.vue

<template>
  <div class="ThreeImageList d-flex flex-row flex-wrap th">
    <NuxtLink 
      v-for="(item, index) in list"
      :key="index"
      :to="item.link"
      class="item"
    >
      <ImageTitleBlock 
        :image="item.image"
        :title="item.title"
        :desc="item.desc"
      />
    </NuxtLink>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';
import ImageTitleBlock from './ImageTitleBlock.vue';

defineProps({	
  list : {
    type: Object as PropType<{title: string, image: string, desc: string, link: string }[]>,
    default: () => [],
  }	
})
</script>

<style lang="scss">
.ThreeImageList {
  position: relative;
  gap: 30px;

  .item {
    width: calc(33.33% - 20px);
    margin-right: 0;
  }
}

@media (max-width: 900px) {
  .ThreeImageList {
    .item {
      width: calc(50% - 15px);
    }
  }
}
@media (max-width: 600px) {
  .ThreeImageList {
    .item {
      width: 100%;
    }
  }
}
</style>