<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Flashcards do Gui</title>
  <style>
    @page { size: A4 portrait; margin: 8mm; }
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Arial, sans-serif; }
    body { background: #fff; padding: 0; }
    .page {
      width: 100%;
      height: 100vh;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: repeat(3, 1fr);
      gap: 12px;
      padding: 10px;
      page-break-after: always;
    }
    .card {
      border: 3px dashed #4A90E2;
      border-radius: 16px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      background-color: #fafafa;
    }
    .img-box {
      font-size: 75px;
      line-height: 1;
      margin: 10px 0;
    }
    .word-en {
      font-size: 22pt;
      font-weight: bold;
      color: #1E3A8A;
    }
    .word-fr {
      font-size: 22pt;
      font-weight: bold;
      color: #B91C1C;
    }
    .phonetic {
      font-size: 13pt;
      font-weight: normal;
      color: #4B5563;
      font-style: italic;
    }
  </style>
</head>
<body>

  <!-- PÁGINA 1: OBJETOS E NATUREZA -->
  <div class="page">
    <div class="card">
      <div class="img-box">⚽</div>
      <div class="word-en">Ball <span class="phonetic">(bôl)</span></div>
      <div class="word-fr">Balle <span class="phonetic">(bal)</span></div>
    </div>
    <div class="card">
      <div class="img-box">🚗</div>
      <div class="word-en">Car <span class="phonetic">(cár)</span></div>
      <div class="word-fr">Voiture <span class="phonetic">(vua-túr)</span></div>
    </div>
    <div class="card">
      <div class="img-box">☀️</div>
      <div class="word-en">Sun <span class="phonetic">(sãn)</span></div>
      <div class="word-fr">Soleil <span class="phonetic">(so-lê-i)</span></div>
    </div>
    <div class="card">
      <div class="img-box">🏠</div>
      <div class="word-en">House <span class="phonetic">(ráus)</span></div>
      <div class="word-fr">Maison <span class="phonetic">(mê-zõ)</span></div>
    </div>
    <div class="card">
      <div class="img-box">📖</div>
      <div class="word-en">Book <span class="phonetic">(búc)</span></div>
      <div class="word-fr">Livre <span class="phonetic">(lív-r)</span></div>
    </div>
    <div class="card">
      <div class="img-box">🌙</div>
      <div class="word-en">Moon <span class="phonetic">(mûn)</span></div>
      <div class="word-fr">Lune <span class="phonetic">(lún)</span></div>
    </div>
  </div>

  <!-- PÁGINA 2: TRANSPORTES -->
  <div class="page">
    <div class="card">
      <div class="img-box">🚌</div>
      <div class="word-en">Bus <span class="phonetic">(bãs)</span></div>
      <div class="word-fr">Bus <span class="phonetic">(bús)</span></div>
    </div>
    <div class="card">
      <div class="img-box">🚲</div>
      <div class="word-en">Bike <span class="phonetic">(báic)</span></div>
      <div class="word-fr">Vélo <span class="phonetic">(ve-ló)</span></div>
    </div>
    <div class="card">
      <div class="img-box">🚂</div>
      <div class="word-en">Train <span class="phonetic">(trêin)</span></div>
      <div class="word-fr">Train <span class="phonetic">(trẽ)</span></div>
    </div>
    <div class="card">
      <div class="img-box">✈️</div>
      <div class="word-en">Plane <span class="phonetic">(plêin)</span></div>
      <div class="word-fr">Avion <span class="phonetic">(a-vi-õ)</span></div>
    </div>
    <div class="card">
      <div class="img-box">⛵</div>
      <div class="word-en">Boat <span class="phonetic">(bôut)</span></div>
      <div class="word-fr">Bateau <span class="phonetic">(ba-tô)</span></div>
    </div>
    <div class="card">
      <div class="img-box">🚚</div>
      <div class="word-en">Truck <span class="phonetic">(trãc)</span></div>
      <div class="word-fr">Camion <span class="phonetic">(ca-mi-õ)</span></div>
    </div>
  </div>

</body>
</html>
