/* Generelle styles */
body {
    font-family: 'Space Mono', monospace;
    background-color: #121212;
    color: white;
    margin: 0;
    padding: 0;
}

/* Indholdscontainer - paragraf og billeder på én række */
.content-container {
    display: flex; /* Brug flexbox for at placere paragraf og billeder på samme række */
    align-items: flex-start; /* Sørger for, at indholdet starter fra toppen */
    gap: 40px; /* Luft mellem paragraf og billeder */
    padding: 20px;
    margin-left: 250px; /* Justér til nav-bredden */
    width: calc(100% - 250px); /* Bredden af containeren */
}

/* Paragraf - tekstdelen */
.paragraph {
    flex: 1; /* Paragraffen får al den plads, der er til rådighed */
    max-width: 50%; /* Begrænser bredden på paragrafen */
    text-align: left;
    padding-right: 40px;
    box-sizing: border-box; /* Sørger for, at padding ikke overskrider bredden */
}

.paragraph a {
    color: white; /* Sørg for, at links også er hvide */
    text-decoration: none; /* Fjern understregning på links inde i paragrafen */
}
.grid {
    display: flex; /* Bruger flexbox for bedre justering */
    justify-content: flex-start; /* Starter billederne fra venstre */
    align-items: flex-start; /* Sørger for at billeder starter samme sted */
    gap: 30%; /* Luft mellem billederne */
    padding: 20px;
    margin-top: 19%; /* Justerer afstand fra navbaren - ændre højden om nødvendigt */
    margin-left: 8%;
}

.grid a {
    text-decoration: none;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 300px; /* Fast bredde for hver boks */
    min-height: auto; /* Fjern fast højde */
}

.grid a img {
    width: 100%; /* Gør billederne responsive */
    min-width: 600px; /* Sætter en minimum bredde */
    height: auto; /* Bevarer proportioner */
    object-fit: contain; /* Viser hele billedet uden at skære det af */
    border-radius: 10px;
}

/* Hvis du vil have hover-effekt på billederne */
.grid a:hover img {
    transform: scale(1.05);
    opacity: 0.8;
}


/* Responsiv tilpasning */
@media (max-width: 1024px) {
    .content-container {
        margin-left: 200px;
        width: calc(100% - 200px);
    }
}

@media (max-width: 768px) {
    .content-container {
        margin-left: 0;
        width: 100%;
        flex-direction: column; /* Ændrer layout til vertikalt på små skærme */
        align-items: center;
    }

    .grid {
        width: 100%; /* Gør billederne mere fleksible på små skærme */
        justify-content: center;
    }

    .paragraph {
        max-width: 100%;
    }
}