* {
    padding: 0;
    margin: 0;
  }

  body {

    line-height: 1.6;
    word-spacing: 1.4px;
    font-family: Arial, sans-serif;
    color: #000;
    background-color: #fff;

    height: 100vh;
  }

  header {
    width: 100%;
    height: 100px;
    background-color: rgba(139, 202, 253, 0.8);
    color: #fff;

    display: flex;
    justify-content: center;
    align-items: center;
  }


  main {
    width: 80%;
    margin: 90px auto;
 
    background-color: #ccc;
  }

  div {
   
    background-color: orange;
  }

  .dio-mreze {
    padding: 0.5em;
    background-color: #ccc;
  
  }

  /* GRID */

  .mreza {
    display: grid;

    grid-template-columns: 3fr 1fr 1fr 1fr;
    grid-template-rows: repeat(4, minmax(100px,170px));

  

  }

  .dio-1 {
    grid-column-start: 1;
    grid-column-end: 3;

    grid-row-start: 1;
    grid-row-end: 3;

    background-color: salmon;
    background-image:url(slike/zima8.jpg);
    background-position: center;
    background-size: cover;
    opacity:0.5;
    transition: 1s ease;
    }
    
    .dio-1:hover{
    opacity:1;
    transition: 1s ease;
    }

  .dio-2 {
    /* grid-column-start: 5;
       grid-column-end: 7; */
    grid-column: 3 / 5;

   /*  grid-row-start: 1;
    grid-row-end: 3; */
    grid-row: 1/3;

    background-color: lightsalmon;
    background-image:url(slike/zima7.jpg);
    background-position: center;
    background-size: cover;
    transition: 1s ease;
}

.dio-2:hover{
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
transition: 1s ease;
}

  .dio-3 {
   /*  grid-column: 1/7;
    grid-row: 3/5; */
   /*  grid-area: grid-row-start  grid-column-start  grid-row-end  grid-column-end; */
   grid-area: 3 / 1 / 5 / 5;

    background-color: darksalmon;

    background-image:url(slike/zima12.webp);
    background-position: center;
    background-size: cover;

    transition: 1s ease;

display: flex;
align-items: end;
justify-content: right;
}

.dio-3:hover {
border-radius:50%;
transition: 1s ease;
}
  
  .dio-4 {
    grid-area: 2 / 2 / 4 / 4;
   
    z-index: 1; 
    background-color: rgba(139, 202, 253, 0.8);
 
  
    justify-content: center;
    display: flex;
    align-items: center;
    
}


  h1 {
    color: #094474;
  }

  .dio-5 { 
    grid-row-start: 1;
    grid-row-end:2 ;

    grid-column-start: 1;
    grid-column-start: 3;

    z-index: 1; 
    background-image:url(slike/zima10.jpg);
    background-position: center;
    background-size: cover; 
    transition: 1s ease;
}

    .dio-5:hover{
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
        transition: 1s ease;
        }

  .dio-6 {
    grid-row-start: 3;
    grid-row-end: 5;

    grid-column-start: 3;
    grid-column-end:5 ;
    background-image:url(slike/zima9.webp);
    background-position: center;
    background-size: cover;


    transition: .5s ease;
}

.dio-6:hover{
box-shadow:
1px 1px #373737,
2px 2px #373737,
3px 3px #373737,
4px 4px #373737,
5px 5px #373737,
6px 6px #373737;
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
transition: .5s ease;
}

p {
    color: #041e29;
    background-color: rgba(139, 202, 253, 0.8);
 
    display: flex;
    
    width: 30%;
    height: 100px;
    
    margin-top: 230px;
z-index: 2;
}


    
   
   
  
     
     
    
    @media(max-width: 900px) {
      .mreza {
        display: grid;
        grid-template-columns:3fr 1fr 2fr;
        grid-template-rows: repeat(4, 190px);
      }
  
      .dio-1 {
        grid-column: 1 / 4;
        grid-row: 1 / 2;
        background-image:url(slike/zima8.jpg);
        background-position: center;
        background-size: cover;
        opacity:0.5;
        transition: 1s ease;
      }
  
      .dio-2 {
        grid-column: 1 / 4;
        grid-row: 2 / 3;
        background-image:url(slike/zima7.jpg);
        background-position: center;
        background-size: cover;
      }
  
      .dio-3 {
        grid-column: 1 / 4;
        grid-row: 3 / 4;
       
      }
  
      .dio-4 {
        grid-column: 1 / 4;
        grid-row: 3 / 4;
        height:173px;
      }
  
      .dio-5 {
        grid-column: 2 / 4;
        grid-row: 4 / 5;
      }
  
      .dio-6 {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
      }
  
      p {
       width:60%;
     padding-bottom: 20px;
   padding-right: 20px;
       
      }
    }
  
    @media(max-width: 600px) {
      .mreza {
        display: grid;
        grid-template-columns:3fr 1fr 2fr;
        grid-template-rows: repeat(6, 200px);
      }
  
      .dio-1 {
        grid-column: 1 / 4;
        grid-row: 1 / 2;
        background-image:url(slike/zima8.jpg);
        background-position: center;
        background-size: cover;
      }
  
      .dio-2 {
        grid-column: 1 / 4;
        grid-row: 2 / 3;
      }
  
      .dio-3 {
        grid-column: 1 / 4;
        grid-row: 3 / 4;
      }
  
      .dio-4 {
        grid-column: 1 / 4;
        grid-row: 6 / 7;
        width:96%;
      }
  
      .dio-5 {
        grid-column: 1 / 4;
        grid-row: 4 / 5;
      }
  
      .dio-6 {
        grid-column: 1 / 4;
        grid-row: 5 / 6;
      }
   p {
    width:80%;

   }
     
     
    }