/* Storia Page Styles */

/* Grid Layout */

.contenitore.storia {
  position: relative;
  display: grid;
  grid-column-gap: 170px;
  grid-row-gap: 170px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  grid-template-areas: 
  ". immagine-storia-1"
  "immagine-storia-2 ."
  ". immagine-storia-3"
  "immagine-storia-4 ."
  ". immagine-storia-5"
}

#immagine-storia-1 {
  grid-area: immagine-storia-1;
  z-index: 1;
  width: 310px;
  position: relative;
}
#immagine-storia-2 {
  grid-area: immagine-storia-2;
  width: 243px;
  transform: rotate(-5.016deg);
  justify-self: end;
}
#immagine-storia-3 {
  grid-area: immagine-storia-3;
  z-index: 1;
  width: 368px;
  position: relative;
  transform: rotate(4.627deg);
}
#immagine-storia-4 {
  grid-area: immagine-storia-4;
  width: 373px;
  transform: rotate(-7.461deg);
  justify-self: end;
}
#immagine-storia-5 {
  grid-area: immagine-storia-5;
  z-index: 1;
  position: relative;
}


/* Content Section */
.contenuto-storia {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
}

/* Quote Section */
.citazione {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  line-height: 1.2;
  display: flex;
}

.linea-di-separazione {
  border-top: 1px dashed var(--oro-acetaia--01);
  width: 100%;
  height: 1px;
}

.testo-citazione {
  color: var(--testo-scuro);
  font-family: Geller Text, sans-serif;
  font-weight: 300;
}

/* Elementi Linea del Tempo */
.linea-del-tempo {
  border-left: 1px dashed var(--testo-scuro);
  width: 1px;
  position: absolute;
  inset: 0% 50%;
}

.collegamento-storia {
  position: absolute;
  height: 21px;
  width: 150px;
}
.collegamento-storia.destra {
  background-image: url('../../images/collegamento-storia.svg');
  inset: 50% calc(100% + 75.5px)
}

.collegamento-storia.sinistra {
  background-image: url('../../images/collegamento-storia.svg');
  rotate: 180deg;
  inset: 50% -224.5px;
}

/* Links */
.disciplinare {
  color: var(--testo-scuro);
  text-decoration: underline;
}

/* Media Queries */
@media screen and (max-width: 991px) {

  .contenitore.storia {
    max-width: 700px;
    grid-row-gap: 120px;
    padding-left: 60px;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "immagine-storia-1"
    "."
    "immagine-storia-2"
    "."
    "immagine-storia-3"
    "."
    "immagine-storia-4"
    "."
    "immagine-storia-5"
    "."
  }

  #immagine-storia-1, #immagine-storia-2, #immagine-storia-3, #immagine-storia-4, #immagine-storia-5 {
    justify-self: start;
    margin-bottom: -60px;
  }

  .linea-del-tempo {
    position: absolute;
    inset: 0%;
  }

  .collegamento-storia.destra, .collegamento-storia.sinistra {
      inset: 10px -69.5px;
      rotate: 0deg;
      width: 50px;
  }


}

@media screen and (max-width: 479px) {
  .immagine-oggi {
    order: -1;
  }
}