* {
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;

grid-template-areas:
"logo naslov izbornik"
"podnaslov podnaslov podnaslov"
"html css responsive"
"dodatni dodatni dodatni"
"tekst esbr godina"
"nadnevak nadnevak nadnevak";
}

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

/* GRID AREAS */

.logo { grid-area: logo; }

.naslov { grid-area: naslov; }

.izbornik { grid-area: izbornik; }

.podnaslov { grid-area: podnaslov; }

.html { grid-area: html; }

.css { grid-area: css; }

.responsive { grid-area: responsive; }

.dodatni { grid-area: dodatni; }

.tekst { grid-area: tekst; }

.esbr { grid-area: esbr; }

.godina { grid-area: godina; }

.nadnevak { grid-area: nadnevak; }

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);

grid-template-areas:
"logo naslov"
"izbornik izbornik"
"podnaslov podnaslov"
"html css"
"responsive responsive"
"dodatni dodatni"
"tekst esbr"
"godina nadnevak";

}

.box {
background: #0369a1;
}

}

/* MOBITEL */

@media (max-width: 600px) {

.container {

grid-template-columns: 1fr;

grid-template-areas:
"logo"
"naslov"
"izbornik"
"podnaslov"
"html"
"css"
"responsive"
"dodatni"
"tekst"
"esbr"
"godina"
"nadnevak";

}

.box {
background: #b91c1c;
}

}