/* ╔═════════════════════════════════════════════════════╗
 *  🖥️ ==> HISTORY-PLACE CSS                                  
 * ╚═════════════════════════════════════════════════════╝ */

#history-place {
  width: 100%;
}
.vague-history-place {
  width: 100%;
}
.history-place-content {
  position: relative;
  background: #141313;
  width: 100%;
  height: 1555px;
  margin-top: -8px;
}
.fond-history-place {
  width: 1920px;
}

.history-text {
  position: absolute;
  top: 11%;
  left: 38%;
}

/* -------------------------------------------------------
 * 🛠️ PARTIE TEXTE 
 * ------------------------------------------------------- */
.span-history-text {
  position: absolute;
  top: 12%;
  left: 15%;
  font-family: "Roboto Flex", serif;
  font-size: 25px;
  font-weight: 400;
  color: #ffffff;
  text-transform: uppercase;
}

.history-text p {
  font-family: "Roboto Flex", serif;
  color: #616161;
  max-width: 929px;
  font-size: 40px;
  font-weight: 500;
  line-height: 60px;
  margin-bottom: 50px;
  text-align: left;
  letter-spacing: 1px;
  padding: 0 10px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ===> 🖥️ MEDIA QUERY : Max-width 1920px
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 1920px) {
  .history-place-content {
    height: 80.989vw;
    margin-top: -0.416vw;
  }
  .fond-history-place {
    width: 100vw;
  }

  /* 🛠️ PARTIE TEXTE */
  .span-history-text {
    font-size: 1.302vw;
  }

  .history-text p {
    max-width: 48.385vw;
    font-size: 2.083vw;
    line-height: 3.125vw;
    margin-bottom: 2.604vw;
    letter-spacing: 0.052vw;
  }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ===> 🖥️ MEDIA QUERY : Max-width 1000px
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width: 1000px) {
  #history-place {
    width: 100%;
  }
  .vague-history-place {
    width: 100%;
    position: relative;
    z-index: 5;
  }
  .history-place-content {
    position: relative;
    background: #141313;
    width: 100%;
    height: 1065px;
    margin-top: -8px;
  }
  .fond-history-place {
    max-width: 100%;
    height: 650px;
    object-fit: cover;
    object-position: left;
  }

  .history-text {
    position: absolute;
    top: 8%;
    left: 1%;
    width: 100%;
    margin: 0 auto;
  }

  /* 🛠️ PARTIE TEXTE */
  .span-history-text {
    position: absolute;
    top: 4.2%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: 500;
    color: #8a8989;
    text-transform: uppercase;
  }

  .history-text p {
    font-family: "Roboto Flex", serif;
    color: #403f3f;
    max-width: 374px;
    margin: 0 auto;
    font-size: 22px;
    font-weight: 500;
    line-height: 31px;
    margin-bottom: 50px;
    text-align: left;
    letter-spacing: 1px;
  }
}