*{
    box-sizing: border-box;
    margin: 2px;
    padding: 2px;


}

img{
    width: 100%;
    height: 95%;
    display: block;
    border-radius: 10px;
}



/* Forside */
.forside_grid_1-1-1{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-top: 10%;
}

.link2{
    grid-column: 1/1;
    grid-row: 3/2;
    margin-top: -10%;
    padding: 0% 0% 0% 30%;
}
.link3{
    grid-column: 2/2;
    grid-row: 3/2;
    margin-top: -10%; 
    padding: 0% 0% 0% 30%;
}

.link4{
    grid-column: 3/3;
    grid-row: 3/2; 
    margin-top: -10%;
    padding: 0% 0% 0% 25%;
    
}

@media (max-width: 650px){
    .chiagroed, .link2{
        grid-column: span 4;
        grid-row: span 4;
    }
 

    .bananpandekager, .link3{
        grid-column: span 4;
        grid-row: span 4;
    }

    .smoothiebowl, .link4{
        grid-column: span 4;
        grid-row: span 4;
    }

    .link2, .link3, .link4{
        padding: 0% 0% 0% 30%;
        margin-top: -10%;
    }

    nav{
        --less-than: 650;
        --burger-lines: #A19786;
        --burger-border: #A19786;
      
      }


     nav ul{
      display: flex;
      gap: 1ch;
      background-color: #A19786;
      font-size: 18px;
      box-shadow: 10px 10px 8px #888888;
      border-radius: 10px;
      text-align: start;
    } 
   
}

/* Side 2 - grød */

.side2_grid_1-1{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 10%;
}

.chiagroed1{
    grid-column: 1/2 ;
    grid-row: 1/2;
}

.chiagroed2{
    grid-column: 2/2 ;
    grid-row: 1/2;
}

.oats1{
    grid-column: 1/2 ;
    grid-row: 1/2; 
}

.oats2{
    grid-column: 2/2 ;
    grid-row: 1/2; 
}

@media (max-width: 650px){
h4{
    margin-bottom: 20px;
    font-size: 20px;
}

h5{
    font-size: 16px;
  }

  .chiagroed1, .chiagroed2, .oats1, .oats2, .banan1, .banan2, .blaabaer1, .blaabaer2{
    margin-left:  25px;
  }

.ingredienser{
    grid-column: span 4;
        grid-row: span 4;
        
    }
.groed_opskrift, .smoothie_opskrift{
    grid-column: span 4;
    grid-row: span 4;
}
    

.time{
    text-align: center;
    margin-top: -20px;
    font-size: 12px;
  }

}

/* Side 3 - Bagværk */
.bagvaerk_grid_1-1-1-1{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    margin-top: 10%;
    margin-bottom: -5%;
}

.bagvaerk_grid_1-1{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 10%;
}

.pandekage1, .pandekage2, .pandekage3{
    margin-left: 50%;
}

.opskrift_bagvaerk{
    grid-column: 2/2 ;
    grid-row: 1/2;
}


.ingredienser2{
    grid-column: 1/2 ;
    grid-row: 1/2;

}

.knaekbroed1, .knaekbroed2, .knaekbroed3{
    margin-left: 50%;
}




@media (max-width: 650px){
    .ingredienser2{
        grid-column: span 4;
        grid-row: span 4;
    } 
    .opskrift_bagvaerk{
        grid-column: span 4;
        grid-row: span 4;
    }
    .pandekage1{
        grid-column: span 4;
        grid-row: span 2; 
    }

    .pandekage2{
        grid-column: span 2;
        grid-row: span 2;
    
    }
    .pandekage3{
        grid-column: span 2;
        grid-row: span 2;
    
    }
    .pandekage1, .pandekage2, .pandekage3{
        margin-left: 0%;
    }

.knaekbroed1{
    grid-column: span 4;
        grid-row: span 2; 
}

.knaekbroed2{
    grid-column: span 2;
        grid-row: span 2;
}

.knaekbroed3{
    grid-column: span 2;
        grid-row: span 2;
}
.knaekbroed1, .knaekbroed2, .knaekbroed3{
    margin-left: 0%;
}

}


/* Side 4 - smoothiebowl */

.banan1{
    grid-column: 1/2 ;
    grid-row: 1/2;
}

.banan2{
    grid-column: 2/2 ;
    grid-row: 1/2;  
}

.blaabaer1{
    grid-column: 1/2 ;
    grid-row: 1/2;  
}

.blaabaer2{
    grid-column: 2/2 ;
    grid-row: 1/2; 
}