body
{
    margin: 0;
    font-family: Arial, sans-serif;
}

/* Grid layout met 4 rijen en 1 kolom */
.grid-container
{
    display: grid;
    grid-template-rows: auto auto 1fr auto; 
    
    min-height: 100vh; /* hele schermhoogte */
    background: #f0f0f0;
}

header
{
    background: #007eb6;
    color: white;
    padding: 10px;
}

nav
{
    background: #d9eafd;
    padding: 10px;
}

/* Flexbox voorbeeld: horizontale navigatie */
.nav-list
{
    display: flex;
    justify-content: left;
    gap: 20px;
    flex-wrap: wrap; /* breekt naar nieuwe rij indien nodig */
    

    list-style: none;
    padding: 0;
    margin: 0;   
}
.nav-list li a
{
    background: #4a90e2;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
}

main
{
    background: #ffffff;
    padding: 10px;
}

footer
{
    background: #4a90e2;
    color: white;
    padding: 10px;
    text-align: center;
}


/* Flexbox voorbeeld: kaarten */
.card-list
{
    display: flex;
    gap: 10px;
    flex-wrap: wrap; /* breekt naar nieuwe rij indien nodig */
}
.card
{
    background: #d9eafd;
    padding: 10px;
    
    flex: 1 0 300px; /* groeit mee, min. 25% breed */
    text-align: center;
}

.card:hover
{
     opacity: 0.5;
}

.card p img
{
    max-width: 100%;
    max-height: 100%;;
}

.card p
{
    height: 270px;
    border-radius: 10px;
    border: 1px solid #ccc;
    background-color: #ffffff;;
}

.card p:hover
{
    /* opacity: 0.5; */
}