/* =========================================================
SEZIONE 1
Reference originale: 1920x1176

Tutto scala proporzionalmente alla larghezza della viewport.
1920px = 100vw
1176px = 61.25vw
========================================================= */

.sezione_1 {
  width: 100%;
  height: 61.25vw;
  position: relative;
  overflow: hidden;
}

/* =========================================================
IMMAGINE SFONDO SEZIONE 1

Reference:
width  = 1920px
height = 1176px

Occupa esattamente tutta la sezione.
========================================================= */

.immagine_sfondo_sezione_1 {
  width: 100%;
  height: 100%;

  background: url("../assets/storia/immagine_sfondo_sezione_1.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;

  position: absolute;

  top: 0;
  left: 0;

  overflow: hidden;
}

/* =========================================================
TITOLO

Reference:
x = 0px
y = 288px
width = 1920px
font = 275px

288 / 1920 = 15vw
275 / 1920 = 14.3229167vw
========================================================= */

.titolo_sezione_1 {
  width: 100%;

  color: var(--colore-bianco);

  position: absolute;

  top: 50%;
  left: 0;
  transform: translateY(-50%);

  text-shadow: -0.4166667vw 0.4166667vw 0.2083333vw var(--colore-ombra-forte);

  font-family: var(--font-titoli);
  font-weight: 400;

  font-size: 14.3229167vw;

  line-height: 1;

  text-align: center;

  margin: 0;
}

* {
  box-sizing: border-box;
}

.sezione_2 {
  width: 100%;
  height: 130.2083333vw;
  position: relative;
  overflow: hidden;
}

.sfondo_titolo_sezione_2 {
  width: 100%;
  height: 11.0416667vw;

  background: var(--colore-grigio-primario);

  position: absolute;

  top: 0;
  left: 0;

  overflow: hidden;
}

.titolo_sezione_2 {
  width: 84.375vw;
  height: 8.4375vw;

  color: var(--colore-bianco);

  position: absolute;

  top: 0;
  left: 1.5vw;

  margin-left: 0.8333333vw;

  font-family: var(--font-titoli);
  font-weight: 400;

  font-size: 3.1770833vw;

  line-height: 1;

  text-align: left;

  display: flex;
  align-items: center;
}

.separatore_sezione_2 {
  width: 93.9583333vw;
  height: 0.2604167vw;

  background: var(--colore-bianco);

  position: absolute;

  top: 8.4375vw;
  left: 2.34375vw;

  overflow: hidden;
}

.testo_sezione_2 {
  width: 88.9583333vw;
  height: 117.4479167vw;

  color: var(--colore-nero);

  position: absolute;

  top: 11.0416667vw;

  margin-top: 1.71875vw;

  font-family: var(--font-testo);
  font-weight: 400;

  font-size: 2.0833333vw;

  line-height: 1.2;

  text-align: left;

  margin-left: 2.2916667vw;
}

.grassetto {
  color: var(--colore-nero);
  font-family: var(--font-testo);
}

.sezione_3 {
  width: 100%;
  height: 200.46875vw;
  position: relative;
  overflow: hidden;
}

.foto_sezione_3 {
  width: 100%;
  height: 200.46875vw;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.foto_1 {
  width: 37.5vw;
  height: 46.4583333vw;

  background: url("../assets/storia/foto_1.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;

  position: absolute;

  top: 0;
  left: 0;

  overflow: hidden;
}

.foto_2 {
  width: 100%;
  height: 45.625vw;

  background: url("../assets/storia/foto_2.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;

  position: absolute;

  top: 39.5833333vw;
  left: 37.5vw;

  overflow: hidden;
}

.foto_3 {
  width: 22.34375vw;
  height: 31.6145833vw;

  background: url("../assets/storia/foto_3.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  position: absolute;

  top: 168.8541667vw;
  left: 77.65625vw;

  overflow: hidden;
}

.foto_4 {
  width: 37.5vw;
  height: 27.5vw;

  background: url("../assets/storia/foto_4.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;

  position: absolute;

  top: 172.96875vw;
  left: 0;

  overflow: hidden;
}

.foto_5 {
  width: 40.15625vw;
  height: 31.6145833vw;

  background: url("../assets/storia/foto_5.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;

  position: absolute;

  top: 168.8541667vw;
  left: 37.5vw;

  overflow: hidden;
}

.foto_6 {
  width: 100%;
  height: 40.5208333vw;

  background: url("../assets/storia/foto_6.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;

  position: absolute;

  top: 85.2083333vw;
  left: 37.5vw;

  overflow: hidden;
}

.foto_7 {
  width: 100%;
  height: 39.5833333vw;

  background: url("../assets/storia/foto_7.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;

  position: absolute;

  top: 0;
  left: 37.5vw;

  overflow: hidden;
}

.foto_8 {
  width: 37.5vw;
  height: 24.6354167vw;

  background: url("../assets/storia/foto_8.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;

  position: absolute;

  top: 96.25vw;
  left: 0;

  overflow: hidden;
}

.foto_9 {
  width: 37.5vw;
  height: 28.125vw;

  background: url("../assets/storia/foto_9.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;

  position: absolute;

  top: 120.8854167vw;
  left: 0;

  overflow: hidden;
}

.foto_10 {
  width: 100%;
  height: 43.125vw;

  background: url("../assets/storia/foto_4.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;

  position: absolute;

  top: 125.7291667vw;
  left: 37.5vw;

  overflow: hidden;
}

.foto_11 {
  width: 37.5vw;
  height: 49.7916667vw;

  background: url("../assets/storia/foto_11.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;

  position: absolute;

  top: 46.4583333vw;
  left: 0;

  overflow: hidden;
}

.foto_12 {
  width: 37.5vw;
  height: 23.9583333vw;

  background: url("../assets/storia/foto_12.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;

  position: absolute;

  top: 148.9583333vw;
  left: 0;

  overflow: hidden;
}