<template>
    <div
    class="suggestions px-[1vw] md:px-[1.042vw] mt-[12vw] md:mt-[3.2vw] md:bg-white rounded-[0.781vw] flex flex-col gap-[0.417vw] pb-[1.667vw]"
  >
    <h5
      class="text-[4.544vw] mt-[1.5vw] md:mt-[1.6vw] md:text-[1.481vw] text-[#383E43] font-bold"
    >
      دوره های پیشنهادی
    </h5>
    <div
      class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
    >
    <div v-for="(course, index) in selectedItems"
    :key="index">
    <Card :course="course" />
  
  </div>
    </div>
  </div>
</template>
<script setup>
const data = await useFetch("/api/course");
const selectedItems = data.data.value.courses.slice(0, 8);
</script>