/* Gradient Card - variables - nastavení výšky, atd...
    - toto nastavení platí pro 
*/ 
.gradient-card {
  --height-top-1: 500px;
  --height-top-group: 220px;
  --height-nemovitosti: 180px;
  --height-serialy: 220px;
  --height-clanek: 500px;
}

.top-1 .gradient-card img {
	height: var(--height-top-1);
}
.top-group .gradient-card img {
	height: var(--height-top-group);
}
.view-nemovitosti .gradient-card img {
	height: var(--height-nemovitosti);
}
.view-serialy .gradient-card img {
	height: var(--height-serialy);
}

/* Responzivita
    - zatim netridene, veškeré styly mimo tyto breakpointy, kromě prvního, odpovídají gridu XS
*/
#main-navigation {
  display: none;
}
#mobile-navigation {
  display: flex;
}
.logo-bottom, .main-navigation-bottom {
  display: none;
}

/* XS */
@media (min-width: 576px) {

}
/* SM */
@media (min-width: 768px) {
  .logo-bottom {
    display: flex;
  }
}

/* MD */
@media (min-width: 1024px) {
  #main-navigation {
    display: flex;
  }
  #mobile-navigation {
    display: none;
  }

  .article-card-sm {
      height: 88px;
  }
  .article-card-sm img {
      height: 88px;
  }
  .article-card-md img {
    height: 116px;
    object-fit: cover;
  }
  #sport-kultura .article-card-sm {
    height: 100px;
  }
  #sport-kultura .article-card-sm img {
    height: 100px;
  }
  .card-nemo img {
    height: 180px;
  }
}

/* LG */
@media (min-width: 1280px) {
  .main-navigation-bottom {
    display: flex;
  }

}

/* později využitelné pro reklamní uši, byť momentálně ještě nevím, zda a jak použiji */
@media only screen and (max-width: 1024px) {
  .bgi {
      display: none;
  }
}

/* zde styly pro vše přidané po spuštění šablony */
#kraj {
  background: #fff;
  border-radius: 3px;
  margin: 2rem 0;
}
.kraj-left, .kraj-rigth {
  padding: .5rem 1rem;
}

.kraj-left {
  background-color: #e63237;
  color: #fff;
}

.kraj-right {
  color: #555;
}

h2.kraj-title {
  color: #fff;
  font-size: 1.8em;
}
h3.kraj-link {
  text-align: center;
  align-content: center;
  block-size: 42px;
}
.kraj-link a {
  text-decoration: none;
  color: #555;
}
.kraj-link a:hover {
  text-decoration: underline;
  color: #e63237;
}