<div class="grid gap-2 p-4 w-80">
  <div class="group p-4 rounded border bg-white">
    <img
      src="https://images.unsplash.com/photo-1682686581427-7c80ab60e3f3"
      alt="カード画像" 
      class="w-full rounded mb-4 h-48 object-cover" 
    />
    <h3 class="font-bold text-xl group-has-[img]:text-base group-has-[img]:mb-2">
      カードのタイトル
    </h3>
    <p class="text-gray-600 group-has-[img]:text-xs group-has-[img]:leading-relaxed">
      ここにカードの説明文が入ります。画像の有無によってテキストのスタイルが自動的に調整されます。
    </p>
  </div>

  <div class="group p-4 rounded border bg-white">
    <h3 class="font-bold text-xl group-has-[img]:text-base group-has-[img]:mb-2">
      カードのタイトル
    </h3>
    <p class="text-gray-600 group-has-[img]:text-xs group-has-[img]:leading-relaxed">
      ここにカードの説明文が入ります。画像の有無によってテキストのスタイルが自動的に調整されます。
    </p>
  </div>
</div>