/* Allmänna stilar för hela sidan */
body {
    background-color: white; /* Gräddvit bakgrund */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 2rem;
}

/* Stilar för rubrikerna */
header {
    text-align: center;
    margin-bottom: 3rem;
}

h1 {
    color: #556B2F; /* Olivgrön färg */
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

h2 {
    color: #AAAAAA; /* Svagt grå färg */
    font-weight: normal;
    font-size: 1.2rem;
    margin-top: 0;
}

/* Stilar för bildgalleriet */
.galleri-container {
    display: grid;
    /* Skapar fyra kolumner med jämnt avstånd */
    grid-template-columns: repeat(4, 1fr); 
    gap: 1rem; /* Avstånd mellan bilderna */
    max-width: 1200px;
    margin: 0 auto; /* Centrerar galleriet på sidan */
}

/* Stilar för varje bild */
.galleri-container img {
    width: 100%; /* Får bilden att fylla sin kolumn */
    height: auto; /* Bevarar bildens proportioner */
    display: block;
    border-radius: 4px; /* Lätt rundade hörn */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* En subtil skugga */
}

/* Anpassning för mindre skärmar (t.ex. mobiler) */
@media (max-width: 800px) {
    .galleri-container {
        /* Ändrar till två kolumner på skärmar smalare än 800px */
        grid-template-columns: repeat(2, 1fr);
    }
}