/* Algemene stijlen voor body en tekst */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
}

/* Wrapper stijl */
.wrapper {
    max-width: 900px;
    margin: 0 auto; /* Centreert de wrapper */
    padding: 0 20px; /* Optionele padding voor wat ruimte aan de zijkanten */
}

/* Header sectie stijl */
.header {
    background: #ffffff;
    padding: 20px;
}

.logo {
    max-width: 300px; /* Pas dit aan naar wens */
}

/* Introductie tekst sectie stijl */
.intro {
    font-size: 16px; /* Standaard tekstgrootte */
    color: #333; /* Standaard tekstkleur */
    line-height: 1.5; /* Regelhoogte voor betere leesbaarheid */
    text-align: left; /* Tekst centreren */
    padding: 20px; /* Ruimte binnen de sectie */
    margin: 20px 0; /* Ruimte buiten de sectie */
    background-color: #f9f9f9; /* Achtergrondkleur */
    border-radius: 8px; /* Afgeronde hoeken */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Schaduw voor een lichte 3D-effect */
}

/* Specifieke stijlen voor verschillende teksttypen binnen de .intro */
.intro h2 {
    font-size: 24px; /* Tekstgrootte voor kopteksten */
    color: #222; /* Kleur voor kopteksten */
    margin-bottom: 10px; /* Ruimte onder de koptekst */
}

/* Stijlen voor de H2 titel boven de grid */
.grid-title {
    font-size: 24px; /* Tekstgrootte van de titel */
    color: #c2c2c2; /* Kleur van de titel */
    text-align: center; /* Centreren van de titel */
    margin-top: 40px; /* Ruimte boven de titel */
	margin-bottom: 0px; /* Ruimte onder de titel */
    font-weight: bold; /* Vetgedrukte tekst */
}



/* Grid container stijl */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 kolommen standaard */
    gap: 20px; /* Ruimte tussen de items */
    padding: 20px;
}

/* Grid items stijl */
.grid-item {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
}

.grid-item img {
    max-width: 100%; /* Zorgt ervoor dat het logo binnen het vakje past */
}

/* Responsieve stijlen */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 kolommen op tablets */
    }
}

@media (max-width: 480px) {
    .grid-container {
        grid-template-columns: 1fr; /* 1 kolom op mobiele apparaten */
    }
}