* {
    box-sizing: border-box;
}
header img { 
	margin: 10px;
	float: left 
}

header {
  display: flex; /* Flexbox inschakelen */
  gap: 2px; /* Voeg 2px ruimte toe tussen de containers */
  align-items: center; /* Zorg ervoor dat de containers verticaal gecentreerd zijn */
}


body {
    font-family: Garamond, Arial, Helvetica, sans-serif;
           
    background-color: #FFF0F5;
    margin: 0;
    padding: 0;
    
        }
        header {
            background-color: #f8c8dc;
            color: white;
            text-align: center;
            padding: 20px 0;
            
        }
        
       
          
        .product-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            margin-top: 10px;
              width: 100%;
        }
        .product {
            background-color: white;
            margin: 10px;
            padding: 20px;
            width: 5px;
            text-align: center;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .product img {
            width: 100%;
            height: auto;
        }
        .product button {
            background-color: #c4dcc3;
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            font-size: 16px;
        }
        .product button:hover {
            background-color: #006400;
        }
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px ;
            margin-top: 10px;
            
        }
  
/* Zorg ervoor dat de container de breedte van het scherm gebruikt */
.product-container {
  display: flex;          /* Flexbox inschakelen */
  justify-content: space-between; /* Zorgt ervoor dat de producten gelijk verdeeld zijn */
  flex-wrap: wrap;        /* Als er geen ruimte is, laat de producten dan naar de volgende regel springen */
  gap: 40px;              /* Ruimte tussen de producten */
}

.product {
  flex: 1 1 20%;          /* Elke product neemt minimaal 30% van de breedte in */
  box-sizing: border-box; /* Zorgt ervoor dat de padding niet buiten de breedte valt */
  text-align: center;     /* Centraal uitgelijnde tekst */
  border: 1px solid #ddd; /* Rand rondom elk product */
  padding: 10px;          /* Wat ruimte rondom de inhoud */
}

.product img {
  max-width: 100%;        /* Zorgt ervoor dat afbeeldingen niet breder zijn dan hun container */
  height: 300px;           /* Behoud de verhoudingen van de afbeelding */
  width: 300px;