/* ==========================================================================
   Fragmentos — destino das etiquetas do hero
   ========================================================================== */

.fragments {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 14.5833vw 2.7778vw 13.8889vw;
  display: flex;
  flex-direction: column;
  min-height: 48.8889vw;
  color: var(--color-black);
  background-color: var(--color-pink);
  justify-content: center;
  align-items: center;
}

.fragments__headline {
  position: relative;
  width: 49.7917vw;
  display: block;
  max-width: 100%;
  font-size: 0;
  text-align: center;
}

.fragments__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 7.6389vw;
  color: var(--color-black);
  line-height: 0.91;
  display: inline;
}

.fragments__title-accent {
  font-family: var(--font-serif);
  font-weight: 200;
  font-size: 5.8333vw;
  color: var(--color-black);
  line-height: 0.91;
  display: inline;
}

.fragments__lead {
  margin: 1vw 0 0;
  max-width: 750px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.3889vw;
  line-height: 1.1;
  text-align: center;
  display: block;
}


/* Mobile */
@media (max-width: 767px) {
  .fragments {
    min-height: 136.3636vw;
    padding-top: 37.5vw;
    padding-bottom: 43.1818vw;
  }

  .fragments__headline {
    width: 90%;
  }

  .fragments__title {
    font-size: 11.3636vw;
    line-height: 1.06;
  }

  .fragments__title-accent {
    font-size: 9.0909vw;
    line-height: 1.15;
    margin-top: 1.8182vw;
  }

  .fragments__lead {
    max-width: 69.5455vw;
    font-size: 3.6364vw;
    margin: 5.6818vw 0 0;
  }
}