<script setup lang="ts">
interface ArtItem {
  slug: string;
  title: string;
  thumb: string;
}

defineProps<{
  items: ArtItem[];
}>();
</script>

<template>
  <div class="grid">
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  gap: 16px;
  padding: 24px 0;
}

@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
  }
}

@media (max-width: 640px) {
  .grid {
    grid-template-columns: repeat(1, minmax(200px, 1fr));
    padding: 16px 0;
  }
}
</style>
