* {
    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(160, 193, 217, 0.598);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }


  main {
    width: 80%;
    margin: 100px auto;
    border: 3px solid rgb(255, 255, 255);
    background-color: #ccc;
  }

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

  .dio-mreze {
    padding: 0.5em;
    background-color: #ccc;
    border: 1px solid rgb(255, 255, 255);
  }

  /* GRID */

  .mreza {
    display: grid;
    grid-template-columns:3fr 1fr 2fr 1fr;
    grid-template-rows: repeat(4, 180px);
  }

  .dio-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    background-color: rgb(123, 157, 241);
    background-image: url(slike/zima1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform 0.3 ease;
  }

  .dio-1:hover {
    transform: scale(1.1);
  }

  .dio-2 {
    grid-column: 3 / 5;
    grid-row: 1 / 3;
    background-color: rgb(123, 157, 241);
    background-image: url(slike/zima4.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform 0.3 ease;
  }

  .dio-2:hover:hover {
    transform: scale(1.1);
  }

  .dio-3 {
/*     grid-column: 1 / 7;
    grid-row: 3 / 5; */
/*     grid-area: grid-row-start grid-column-start grid-row-end grid-row-end; */
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    background-color: rgb(123, 157, 241);
    background-color: #ccc;
    background-image: url(slike/zima5.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: flex-end;  
    align-items: flex-end;        
    width: 100%;
    transition: transform 0.3 ease;
  }

  .dio-3:hover:hover {
    transform: scale(1.1);
  }

  p {
    padding-top: 20px; 
    padding-right: 20px;
    max-width: 300px;
    font-size: 15px;
  }
  
  
  .dio-4 {
    grid-column: 2 / 4;
    grid-row: 2 / 3;
    background-color: rgb(123, 157, 241);
    z-index: 1;
    background-image: url(slike/zima2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform 0.3 ease;
  }

  .dio-4:hover {
    transform: scale(1.1);
  }

  .dio-5 {
    grid-column: 3 / 5;
    grid-row: 3 / 5;
    background-color: rgb(123, 157, 241);
    z-index: 1;
    background-image: url(slike/zima6.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform 0.3 ease;
  }

  .dio-5:hover:hover {
    transform: scale(1.1);
  }

  .dio-6 {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
    background-color: rgb(123, 157, 241);
    z-index: 1;
    background-image: url(slike/zima3.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform 0.3 ease;
  }

  .dio-6:hover:hover {
    transform: scale(1.1);
  }

  @media(max-width: 900px) {
    .mreza {
      display: grid;
      grid-template-columns:3fr 1fr 2fr;
      grid-template-rows: repeat(4, 200px);
    }

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

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

    .dio-3 {
      grid-column: 1 / 4;
      grid-row: 3 / 4;
      padding: 0;
    }

    .dio-5 {
      grid-column: 2 / 4;
      grid-row: 4 / 5;
    }

    .dio-6 {
      grid-column: 1 / 2;
      grid-row: 4 / 5;
    }
  }

  @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;
    }

    .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: 4 / 5;
    }

    .dio-5 {
      grid-column: 1 / 4;
      grid-row: 5 / 6;
    }

    .dio-6 {
      grid-column: 1 / 4;
      grid-row: 6 / 7;
    }
  }