.grid-container {
    display: grid; /** lager grid element **/
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr) ); /** lager grid med automatiske kolloner  kollonner **/
    grid-row-gap: 10px; /** mellomrom mellom boxene i grid containeren**/
    grid-column-gap: 10px;
}

.box {
    border-style: solid;
    border-width: 2px;
    border-radius: 10px;
    background-color: rgb(172, 172, 172);
    text-align: center;
}

.box:hover {    /** Gjør boxen større for å "Poppe ut" og gir skygge for bedre dybde når du har musepekeren over. **/
    transform: scale(1.02,1.02); 
    transition: all 0.3s;
    box-shadow: 5px 5px 5px grey;
}
  
.box > img {
    width: 100%; /** Kan ikke være større i bredde enn boksen**/
    height: auto;
}

@media only screen and (max-width: 450px) { /** endrer til flex når skjermen er mindre enn 450px **/
    .grid-container {
     display: flex;
     flex-wrap: wrap;
    }
}
    
/** fonts og sånt **/
h1 {
    font-family: Arial, Helvetica, sans-serif;
}

.tittel {
    font-size: 50px;
}

.undertittel {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 35px;    
}
p {
    font-family: Arial, Helvetica, sans-serif;

}

body {
    background: lightgray;
}

.footer {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}