*{
    box-sizing: border-box;
    margin: 0;
}
 
body{
    background-color: antiquewhite;
    display: grid;
    grid-template-rows: 150px 300px auto 150px;
    min-height: 100vh;
    margin: 0;
}
 
header{
    outline: 2px dotted red;
    background-color: lightgreen;
}
 
.wrapper_header{
     outline: 2px dotted rgb(128, 56, 124);
     max-width: 960px;
     width: 100%;
     display: flex;
     justify-content: space-between;
     min-height: 100%;
     align-items: center;
     justify-self: center;
}
 
.hero{
     outline: 2px dotted blue;
}
 
.inner_wrapper{
    justify-self: center;
    background-color: brown;
    width: 100%;
    max-width: 960px;
    justify-content: center;
    align-items: center;
    display: flex;
    min-height: 100%;
}
 
main{
    outline: 2px dotted green;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    max-width: 960px;
    width: 100%;
    justify-self: center;
    grid-template-areas:
        "prvi drugi treci"
        "cetvrti cetvrti peti"
        ;
}
.prvi{
    grid-area: prvi;
}
.drugi{
    grid-area: drugi;
}
.treci{
    grid-area: treci;
}
.cetvrti{
    grid-area: cetvrti;
}
.peti{
    grid-area: peti;
}


 
.card{
      outline: 2px dotted rgb(26, 107, 100);
      background-color: lightblue;
     
}
 
.slika{
      outline: 2px dotted rgb(66, 38, 167);
      background-color: rgb(116, 141, 48);
     
}
 
.test_drzac{
     outline: 2px dotted rgb(255, 82, 177);
      background-color: rgb(135, 63, 153);
     
}
 
footer{
     outline: 2px dotted rgb(182, 99, 22);
}
 
.wrapper_footer{
      outline: 2px dotted rgb(128, 56, 124);
     max-width: 960px;
     width: 100%;
     display: flex;
     justify-content: space-between;
     min-height: 100%;
     align-items: center;
     justify-self: center;
}
 
@media (max-width: 768px){
    body{
        grid-template-rows: 150px auto auto 150px;
    }
    main{
        grid-column: 1fr 1fr;
    }
    .test_drzac{
        grid-column: 2/3;
    }
 
    main .card:nth-child(3){
        grid-column: 1/3;
    }
}
@media (max-width: 600px){
    body{
        grid-template-rows: 150px auto auto 150px;
    }
    main{
        grid-template-columns:  1fr;
    }
    .test_drzac{
        grid-column: 1/2;
    }
 
    main .card:nth-child(3){
        grid-column: 1/2;
    }
}