@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Playwrite+HR+Lijeva:wght@100..400&family=Varela+Round&display=swap');

* {
    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 {display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
   background-color: rgb(171, 143, 218);
    color: #fff;
  }

  h2 {
    font-family: "Cormorant", serif;
    font-size: 40px;
    text-transform:uppercase ;
  }


  main {
    width: 80%;
    margin: 20px auto;
    height:80vh;
  }


  .dio-mreze {
    padding: 0.5em;
    border: 2px solid #ccc;
    min-height: 200px;
  }

  /* GRID */

  .mreza {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 2fr 2fr;
    font-family: "Cormorant", serif;
  }

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

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

    background-color: rgb(51, 109, 233);

    background-image: url(prva.avif);
    background-size: cover;
    background-position: center;
  }

  .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: rgb(0, 140, 255);

    background-image: url(druga.webp);
    background-size: cover;
    background-position: center;
  }

  .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: rgb(95, 190, 207);

    background-image: url(treca.jpg);
    background-size: cover;
    background-position: center;

  }
  
  .dio-4 {
    grid-area: 2 / 2 / 4 / 4;
    background-color: rgba(183, 158, 223, 0.8);
    z-index: 1;
    font-size: 33px;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
  }

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