/* ==========================================================================
   Osmo Supply — Draw Path on Scroll
   Eins zu eins aus osmo-draw-path-on-scroll.webflow.io uebernommen.
   Die Linie selbst zeichnet das JS ueber stroke-dasharray/-dashoffset,
   die Farbe kommt aus currentColor.
   ========================================================================== */

.draw-scroll__container {
  width: 100%;
  max-width: 100em;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2em;
  padding-right: 2em;
}

.draw-scroll__wrap {
  padding-top: 18.75em;
  padding-bottom: 18.75em;
}

.draw-scroll__text-row {
  z-index: 1;
  text-align: center;
  width: 100%;
  max-width: 52.5em;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.draw-scroll__text-heading {
  z-index: 1;
  letter-spacing: -.04em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Haffer, Arial, sans-serif;
  font-size: clamp(2em, 7.5vw, 5em);
  font-weight: 500;
  line-height: .95;
  display: inline-block;
  position: relative;
}

.draw-scroll__text-heading.is--tag {
  background-color: #ff6d61;
  border: .0625em solid #fdc0bd;
  border-radius: .1em;
  padding: .125em .4em .1875em;
  box-shadow: 0 .075em #00000026;
}

.draw-scroll__text-heading.is--tag.is--1 {
  z-index: 0;
  transform: rotate(-3deg) translate(0, -.05em);
}

.draw-scroll__text-heading.is--tag.is--2 {
  z-index: 0;
  transform: rotate(2deg);
}

.draw-scroll__path-w {
  z-index: 0;
  aspect-ratio: 980 / 2370;
  margin: max(-7.5vw, -6em) auto max(-16vw, -12em);
  position: relative;
}

.draw-scroll__path-el {
  color: #f4f4f4b3;
  width: 100%;
  overflow: visible !important;
}

.draw-scroll__path-el.is--mobile {
  display: none;
}

@media screen and (max-width: 767px) {
  .draw-scroll__path-w {
    margin-bottom: max(-10vw, -8em);
  }

  .draw-scroll__path-el.is--desktop {
    display: none;
  }

  .draw-scroll__path-el.is--mobile {
    display: block;
  }
}