.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tre lige store kolonner */
    gap: 20px; /* Afstand mellem boksene */
    width: 100vw; /* Får containeren til at fylde hele skærmbredden */
    box-sizing: border-box;
    padding: 20px;
    background-color: #f4f4f4;
}

.grid-item {
    background-color: #e4e4df; /* Baggrundsfarve til bokse */
    color: #333; /* Tekstfarve */
    padding: 20px; /* Indvendig margen */
    text-align: center; /* Centrer tekst */
    border-radius: 5px;
}
.grid-item img {
    border-radius: 5px;
}

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: repeat(
            1,
            1fr
        ); /* To kolonner på mindre skærme */
    }
}

@media (max-width: 480px) {
    .grid-container {
        grid-template-columns: 1fr; /* Én kolonne på meget små skærme */
    }
}