<template>
  <section class="py-8 text-center">
    <h2 class="text-2xl font-semibold">Примеры использования</h2>
    <div class="grid gap-6 mt-6 grid-cols-1 md:grid-cols-3 md:gap-8 md:gap-y-0">
      <!-- Пример 1 -->
      <div class="grid md:grid-rows-subgrid md:row-span-2">
        <p class="mb-2 self-center">
          Автомобиль: получайте уведомления о проблемах с парковкой или фарами.
        </p>
        <img
          src="@/assets/examples/car-200x200.jpg"
          width="200"
          height="200"
          alt="Автомобиль"
          class="mx-auto rounded-lg row-start-2"
        />
      </div>
      <!-- Пример 2 -->
      <div class="grid md:grid-rows-subgrid md:row-span-2">
        <p class="mb-2 self-center">Питомец: помогите вернуть потерявшегося питомца.</p>
        <img
          src="@/assets/examples/dog-200x200.jpg"
          width="200"
          height="200"
          alt="Питомец"
          class="mx-auto rounded-lg row-start-2"
        />
      </div>
      <!-- Пример 3 -->
      <div class="grid md:grid-rows-subgrid md:row-span-2">
        <p class="mb-2 self-center">Квартира: оставляйте инструкции для курьеров или соседей.</p>
        <img
          src="@/assets/examples/door-200x200.jpg"
          width="200"
          height="200"
          alt="Квартира"
          class="mx-auto rounded-lg row-start-2"
        />
      </div>
    </div>
  </section>
</template>

<script setup lang="ts"></script>
