/* HERO */
.hero {
  background: url(../images/bg-fond.png), #fff;
  padding-top: 130px;
  /* @media screen and (min-width: 768px) {
        padding-top: 244px;
    } */
}
@media screen and (min-width: 1025px) {
  .hero {
    padding-top: 244px;
  }
}
.hero .container {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media screen and (min-width: 768px) {
  .hero .container {
    flex-direction: row-reverse;
    gap: 64px;
    align-items: center;
  }
}
@media screen and (min-width: 1281px) {
  .hero .container {
    padding: 0 80px;
  }
}
.hero .container-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media screen and (min-width: 768px) {
  .hero .container-text {
    max-width: 660px;
    width: 100%;
  }
}
.hero .container-text h1 {
  color: var(--electricBlue);
}
.hero .container-text p {
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 170%;
  color: var(--electricBlue);
  max-width: 500px;
  width: 100%;
}
.hero .container-img {
  height: 328px;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .hero .container-img {
    flex-direction: row-reverse;
    gap: 64px;
    max-width: 556px;
    height: 500px;
  }
}
.hero .container-img img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

/* END HERO */