* {
  padding: 0;
  margin: 0;
}

nav ul{
  list-style-type: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  font-size: 25px;
}
nav a{
  color: #275070;
  text-decoration: none;
}

header{
  background-image: url(slike/zaglavlje.jpg);
  background-size: cover ; 
  background-position: left;
  height: 300px;
}
nav{
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
}

.mreza{
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template-rows: 1;
}
aside{
  background-color: #3b79a9;
  grid-column:2/3 ;
  grid-row: 1/2;
  padding: 15px;
  padding-bottom: 180px;
}
article{
  border-top: 2px solid #3b79a9;
  background-color: #d1e2ef;
  padding-left: 70px;
  grid-column: 1/2;
  /* subgrid */
  display: grid;
  grid-template-columns: 5fr 1fr;
  grid-template-rows: minmax(100px, auto);
}

/* smejštanje elemenata u articleu */


.desno {
  margin: 30px;
  width: 250px;
}
aside h2{
  color: white;
}
aside ul{
  list-style: none;
}

article h1,h2{
  padding-top: 20px;
  color: #275070;
}

article p{
  padding-top: 20px;
}
p a{
  text-decoration: none;
  color: #79a93b;
}
footer{
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #275070;
}
footer p{
  color: white;
  padding-top: 10px;
}




/* karte grid */

.karte {
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-template-rows: 1fr;
}

.article1 {
  grid-column: 2 / 3;
  grid-row: 1/2;
  /* subgrid za ovaj article sa slikama karti */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 3fr;
  gap: 10px;
}

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

.tekst {
  grid-column: 1/5;
}


.slk {
  grid-column: span 1;
}
.karte {
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-template-rows: 1fr;
}

.article1 {
  grid-column: 2 / 3;
  grid-row: 1/2;
  /* subgrid za ovaj article sa slikama karti */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 3fr;
  gap: 10px;
}

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


.article1 img {
  width: 250px;
  height: 250px;
}


  @media only screen and (max-width: 700px){
    .article1{
      display: block;
    }
    .mreza{
      display: block;
    }
    .karte{
      display: block;
    }
    
  }