<template>
  <section class="py-8 text-center">
    <h2 class="text-2xl font-semibold">Примеры использования</h2>
    <div class="grid gap-6 mt-6 md:grid-cols-3 md:gap-8">
      <!-- Пример 1 -->
      <div class="grid items-center grid-rows-[auto,1fr] md:subgrid">
        <p class="row-start-1 mb-2">
          Автомобиль: получайте уведомления о проблемах с парковкой или фарами.
        </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 items-center grid-rows-[auto,1fr] md:subgrid">
        <p class="row-start-1 mb-2">Питомец: помогите вернуть потерявшегося питомца.</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 items-center grid-rows-[auto,1fr] md:subgrid">
        <p class="row-start-1 mb-2">Квартира: оставляйте инструкции для курьеров или соседей.</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>
