@charset "utf-8";
/* CSS Document */
#tekst div {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  will-change: opacity, transform;
  border-radius: 8px;
}
#tekst > div.show {
  opacity: 1;
  transform: scale(1);
}
#tekst > div:nth-child(1) {
  transition-delay: 0s;
}
#tekst > div:nth-child(2) {
  transition-delay: 0.03s;
}
#tekst > div:nth-child(3) {
  transition-delay: 0.06s;
}
#tekst > div:nth-child(4) {
  transition-delay: 0.09s;
}
#tekst > div:nth-child(5) {
  transition-delay: 0.12s;
}
#tekst > div:nth-child(6) {
  transition-delay: 0.15s;
}
article #tekst {
  grid-template-rows: 250px 250px;
  grid-template-columns: 3fr 1fr 3fr;
  grid-template-areas:
    "Prvo Prvo Cetrto"
    "Drugo Tretje Tretje";
}
#Prvo {
  grid-area: Prvo;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 6px 12px 12px hsl(0deg 0% 0% / 0.31);
  height: 250px;
  position: relative;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}
article div p {
  margin: 10px 20px 20px 20px;
  border-bottom: 2px solid black;
  height: auto;
  flex-grow: 1;
}
article div h2 {
  margin: 20px 20px 10px 20px;
}
article div * {
  z-index: 1000;
}
#Drugo p, #Peto p, #Sesto p, #Osmo p, #Enajsto p {
  border-bottom: 2px solid rgba(255, 255, 255, 0.25);
}
#Drugo {
	  grid-area: Tretje;
}
#Peto {
	grid-area:Peto;
}
	#Osmo { 
		grid-area:Osmo;
	}
		#Deveto { 
		grid-area:Deveto;
	}
		#Deseto { 
		grid-area:Deseto;
	}
		#Enajsto { 
		grid-area:Enajsto;
	}
#Drugo, #Peto, #Sesto, #Osmo, #Enajsto {

  background: #08162b;
  color: white;
  height: 250px;
  box-shadow: 6px 12px 12px hsl(0deg 0% 0% / 0.31);
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
#Sesto {
	grid-area:Sesto;
}
#Sedmo {
	grid-area:Sedmo;
}
#Tretje {
	grid-area:Drugo;
}
#Tretje, #Sedmo, #Deveto, #Deseto {
  background: CED0D5;
  height: 250px;
  width: auto;
  box-shadow: 6px 12px 12px hsl(0deg 0% 0% / 0.31);
  position: relative;
  overflow: hidden;
}
#Cetrto {
  grid-area: Cetrto;
  background: #EDEDED;
  height: 250px;
  width: auto;
  box-shadow: 6px 12px 12px hsl(0deg 0% 0% / 0.31);
  position: relative;
  overflow: hidden;
}
#tekst div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
@media only screen and (max-width: 770px) {
  article #tekst {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 3fr 1fr 3fr;
    grid-template-areas:
      "Prvo Prvo Prvo"
      "Cetrto Cetrto Cetrto"
      "Tretje Tretje Tretje"
      "Drugo Drugo Drugo";
  }
}