/* QSN */
.qsn {
  margin-top: 56px;
  margin-bottom: 56px;
}
@media screen and (min-width: 768px) {
  .qsn {
    margin-top: 120px;
    margin-bottom: 120px;
  }
}
.qsn .container {
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media screen and (min-width: 768px) {
  .qsn .container {
    gap: 64px;
    grid-template-columns: minmax(300px, 432px) minmax(300px, 739px);
  }
}
@media screen and (min-width: 1281px) {
  .qsn .container {
    padding: 0 80px;
  }
}
.qsn .uptitle {
  color: var(--sarcelle);
  border-color: var(--sarcelle);
}
@media screen and (min-width: 768px) {
  .qsn .uptitle {
    grid-column: 1/3;
  }
}
.qsn .container-text {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media screen and (min-width: 768px) {
  .qsn .container-text {
    gap: 40px;
  }
}
.qsn .container-text h2 {
  color: var(--sarcelle);
}
@media screen and (min-width: 768px) {
  .qsn .container-text h2 {
    font-size: 3rem;
  }
}
@media screen and (min-width: 768px) {
  .qsn .container-text h2 strong {
    font-size: 3.5rem;
  }
}
.qsn .container-text p {
  color: var(--greyDark);
}
.qsn .container-img {
  height: 300px;
}
@media screen and (min-width: 768px) {
  .qsn .container-img {
    height: 678px;
  }
}
.qsn .container-img .image {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}
@media screen and (min-width: 1281px) {
  .qsn .container-img .image {
    -o-object-fit: cover;
    object-fit: cover;
  }
}

/* END QSN */