* {
   box-sizing: border-box;
}

body {
   margin: 0;
   font-family: Arial, sans-serif;
   background: #f1f5f9;
}

.container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   padding: 40px;
   min-height: 100vh;
}

.box {
   background: #334155;
   color: white;
   padding: 25px;
   border-radius: 12px;
   text-align: center;
}

.podnaslov,
.dodatni {
   grid-column: 1 / 4;
   background: #1e293b;
}

.nadnevak {
   grid-column: 1 / 4;
}

img {
   max-width: 100%;
   border-radius: 10px;
   margin-top: 10px;
}

nav a {
   color: white;
   text-decoration: none;
   margin: 0 10px;
   font-weight: bold;
}

nav a:hover {
   text-decoration: underline;
}


/* TABLET */

@media (max-width:992px) {

   .container {
      grid-template-columns: repeat(2, 1fr);
   }

   .box {
      background: #0369a1;
   }

   .izbornik,
   .podnaslov,
   .dodatni,
   .godina,
   .nadnevak,
   .responsive {
      grid-column: 1 / 3;
   }

}


/* MOBITEL */

@media (max-width:600px) {

   .container {
      grid-template-columns: 1fr;
   }

   .box {
      background: #b91c1c;
   }

   .izbornik,
   .podnaslov,
   .dodatni,
   .godina,
   .nadnevak,
   .responsive {
      grid-column: 1 / 2;
   }

}