SEO

frontend/app/components/content/ArtGrid.vue

@@ -0,0 +1,39 @@
+<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>