<template>
  <PageFrame section-class="subjects-grid">
    <SubjectCard v-for="item in subjects" :key="item" :title="item" />
  </PageFrame>
</template>

<script setup lang="ts">
import PageFrame from '@/components/layout/PageFrame.vue'
import SubjectCard from '@/components/cards/SubjectCard.vue'

const subjects = ['英语', '语文', '数学', '科学']
</script>

<style scoped lang="scss">
:deep(.subjects-grid) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 33px 32px;
  border-radius: 12px;
  padding: 33px;
}
</style>
 