@media (min-width: 768px) {

  body {
    max-width: 1200px;
    margin: auto;
  }

  header {
    max-width: 1200px;
    margin: auto;
  }

#menu ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

  nav li {
    margin-bottom: 0;
    width: auto;
  }

  nav a {
    display: inline-block;
  }
  .menu-knop {
  display: none;
}

#menu {
  display: block;
}
#menu li {
  width: auto;
}

#menu a {
  width: auto;

  border-radius: 10px;

  border-bottom: none;

  text-align: center;

  padding: 6px 10px;
}

  section,
  main p,
  main img {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Contactformulier */

  form {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  .verzendknop {
    width: auto;
    align-self: center;
    padding-left: 30px;
    padding-right: 30px;
  }

  /* Footer */

  footer {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }



  /* Grotere basis-tekst, ALLEEN op grotere schermen.
     Mobiel (de basis in style.css) blijft op de standaardgrootte. */
  body {
    font-size: 18px;
  }

  /* --- INTRO: twee kolommen NAAST elkaar (was: onder elkaar op mobiel) --- */
  .intro {
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;  /* beide kolommen bovenaan uitlijnen */
  }

  /* flex: 1 op elke kolom = ze delen de breedte gelijk (elk de helft). */
  .intro .kolom {
    flex: 1;
  }

  /* --- FOTO-BLOK: foto en tekst naast elkaar ---
     De <section> heeft DRIE directe kinderen (<h2>, <img>, .tekst). Daarom
     flex-wrap, zodat de titel op een eigen regel kan en foto + tekst eronder. */
  .foto-blok {
    flex-direction: row;     /* items naast elkaar i.p.v. onder elkaar */
    flex-wrap: wrap;         /* sta toe dat de titel op een eigen regel valt */
    align-items: stretch;    /* foto en tekstblok worden even hoog */
    gap: 25px;
  }

  /* De titel pakt de volle breedte en duwt foto + tekst naar de regel eronder. */
  .foto-blok h2 {
    flex-basis: 100%;
    margin-top: 0;
  }

  .foto-blok img {
    width: 250px;
    flex-shrink: 0;          /* niet laten krimpen */
    align-self: flex-start;  /* NIET meerekken; eigen natuurlijke hoogte behouden */
  }

  .foto-blok .tekst {
    flex: 1;                 /* groei mee en pak alle overige breedte */
    min-width: 250px;        /* nooit smaller dan dit, anders wrapt het netjes */

    /* Het tekstblok wordt ZELF een flex-kolom (geneste flexbox). Door
       align-items: stretch hierboven is dit blok even hoog als de foto;
       justify-content: space-between verdeelt de <p>'s over die hoogte. */
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    font-size: 22px;
  }

  /* --- VOORSTELLING: foto en tekst naast elkaar, afwisselend links/rechts ---
     .hond is een flex-rij: foto + .tekst naast elkaar. */
  .hond {
    flex-direction: row;
    gap: 30px;
    align-items: center;     /* tekst verticaal centreren naast de foto */
  }

  .hond img {
    width: 350px;
    flex-shrink: 0;          /* niet laten krimpen */
    margin: 0;               /* de auto-marges van "main img" hierboven uitzetten,
                                anders verstoren ze de flex-layout */
  }

  .hond .tekst {
    flex: 1;                 /* tekst pakt de overige breedte */
  }

  /* Afwisselen: elke EVEN hond krijgt row-reverse, zodat de foto naar de
     ANDERE kant (rechts) springt. Zo staat de foto om-en-om links/rechts. */
  .hond:nth-of-type(even) {
    flex-direction: row-reverse;
  }

  /* --- TIPS-GRID: 2 kolommen + elk 3e kaartje een lange horizontale balk ---
     grid-column: 1 / -1 = van de eerste tot de laatste kolomlijn (volle breedte). */
  .tips-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tips-grid article:nth-child(3n) {
    grid-column: 1 / -1;
  }

  /* --- GALERIJ: 3 kolommen + alle foto's even groot --- */
  /* Op desktop 3 even brede kolommen (op mobiel was het 1 kolom). */
  .galerij-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }

  .galerij-grid article {
    max-width: none;
    margin: 0;
    transition: 0.3s;
  }

  .galerij-grid article:hover {
    transform: scale(1.02);
  }

  /* Alle foto's dezelfde vaste hoogte = strak, gelijk raster.
     object-fit: cover staat al in de basis (style.css). */
  .galerij-grid img {
    width: 100%;
    height: 250px;
    border-radius: 12px;
  }

}