* {
    padding: 0;
    margin: 0;
  }

  body {
    margin-bottom: 110px;
    line-height: 1.6;
    word-spacing: 1.4px;
    font-family: Arial, sans-serif;
    color: #21619c;
    background-color: #b3d5ed;

    height: 100vh;
  }

  header {
    width: 100%;
    height: 100px;
    background-color: rgb(134, 210, 240);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }


  main {
    width: 80%;
    margin: 90px auto;
    border: 3px solid rgb(187, 211, 242);
    background-color: #ccc;
    
  }

  div {
    border: 2px solid green;
    background-color: orange;
  }

  .dio-mreze {
    padding: 0.5em;
    background-color: #ccc;
    border: 1px solid #b3d5ed;
  }

  /* GRID */

  .mreza {
    
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(5, 160px);
  }

  .dio-1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    background-color: blueviolet;
    background-image: url(slike/slika1.jpg);
    background-repeat: no-repeat;
    background-size: auto;
    background-size: cover;
    background-position: center;
    transition: transform .2s
  }
p{
  font-size: 13pt;
  height: 130px;
  width: 300px;
  padding: 5px;;
}
mark{
 background-color: #b3d5ed;
}
  .dio-2 {
   /*  grid-column-start: 5;
    grid-column-end: 7; */
    grid-column: 3/5;
   /*  grid-row-start: 1;
    grid-row-end: 3; */
    grid-row: 2/3;
    background-color: chartreuse;
    background-image: url(slike/slika2.jpg);
    background-repeat: no-repeat;
    background-size: auto;
    background-size: cover;
    background-position: center;
    transition: transform .2s
  }

  .dio-3 {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    color: #b3d5ed;
    grid-column: 1/5;
    grid-row: 5/6;
    background-color: cyan;
    background-image: url(slike/slika3.jpg);
    background-repeat: no-repeat;
    background-size: auto;
    background-size: cover;
    background-position: center;
    transition: transform .2s
  }
  
  .dio-4 {
    grid-column: 3/5;
    grid-row: 3/5;
    background-color: rgb(0, 43, 43,0.8);
    z-index:1;
    background-image: url(slike/slika4.jpg);
    background-repeat: no-repeat;
    background-size: auto;
    background-size: cover;
    background-position: center;
    transition: transform .2s
  }

  .dio-5{
    grid-column: 1/3;
    grid-row: 3/5;
    background-color: rgb(0, 43, 43,0.8);
    z-index:1;
    background-image: url(slike/slika5.jpg);
    background-repeat: no-repeat;
    background-size: auto;
    background-size: cover;
    background-position: center;
    transition: transform .2s
  }

  .dio-6 {
    grid-column: 1/5;
    grid-row: 1/2;
    background-color: cyan;
    background-image: url(slike/slika6.jpg);
    background-repeat: no-repeat;
    background-size: auto;
    background-size: cover;
    background-position: center;
    transition: transform .3s
  }
  
  .dio-1:hover{
    transform: scale(1.1);
    z-index: 2;
 
  }
  .dio-2:hover{
    transform: scale(1.1);
    z-index: 2;
  }
  .dio-3:hover{
    transform: scale(1.1);
    z-index: 2;
  }
  .dio-4:hover{
    transform: scale(1.1);
    z-index: 2;
   
  }
  .dio-5:hover{
    transform: scale(1.1);
    z-index: 2;
  }
  .dio-6:hover{
    transform: scale(1.1);
    z-index: 2;
  }


  @media screen and (max-width:900px){

  
   
    .dio-3 {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      color: #b3d5ed;
      grid-column: 1/3;
      grid-row: 4/5;
      background-color: cyan;
      background-image: url(slike/slika3.jpg);
      background-repeat: no-repeat;
      background-size: auto;
      background-size: cover;
      background-position: center;
      transition: transform .2s
    }
    
    .dio-4 {
      grid-column: 3/5;
      grid-row: 4/5;
      background-color: rgb(0, 43, 43,0.8);
      z-index:1;
      background-image: url(slike/slika4.jpg);
      background-repeat: no-repeat;
      background-size: auto;
      background-size: cover;
      background-position: center;
      transition: transform .2s
    }
  
    .dio-5{
      grid-column: 1/5;
      grid-row: 3/4;
      background-color: rgb(0, 43, 43,0.8);
      z-index:1;
      background-image: url(slike/slika5.jpg);
      background-repeat: no-repeat;
      background-size: auto;
      background-size: cover;
      background-position: center;
      transition: transform .2s
    }
  
   
    
 .mreza {
   
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-template-rows: repeat(4, 160px);
 }
 p{
   font-size: 11.5pt;
   height: 130px;
   width: 300px;
   padding: 1px;;
 }
 }




  @media screen and (max-width:500px){

    
    .dio-1 {
      grid-column: 1/5;
      grid-row: 2/3;
      background-color: cyan;
      background-image: url(slike/slika1.jpg);
      background-repeat: no-repeat;
      background-size: auto;
      background-size: cover;
      background-position: center;
      transition: transform .3s
    }
    .dio-2 {
      grid-column: 1/5;
      grid-row: 3/4;
      background-color: cyan;
      background-image: url(slike/slika2.jpg);
      background-repeat: no-repeat;
      background-size: auto;
      background-size: cover;
      background-position: center;
      transition: transform .3s
    }
    .dio-4 {
      grid-column: 1/5;
      grid-row: 4/5;
      background-color: cyan;
      background-image: url(slike/slika4.jpg);
      background-repeat: no-repeat;
      background-size: auto;
      background-size: cover;
      background-position: center;
      transition: transform .3s
    }

 .dio-5 {
      grid-column: 1/5;
      grid-row: 5/6;
      background-color: cyan;
      background-image: url(slike/slika5.jpg);
      background-repeat: no-repeat;
      background-size: auto;
      background-size: cover;
      background-position: center;
      transition: transform .3s;
      height: 160px;
      
    }
    .dio-3 {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      color: #b3d5ed;
      grid-column: 1/5;
      grid-row: 6/7;
      background-color: cyan;
      background-image: url(slike/slika3.jpg);
      background-repeat: no-repeat;
      background-size: auto;
      background-size: cover;
      background-position: center;
      transition: transform .2s
    }
  
  }