/* Hero-to-story divider: repeated yellow string asset, edge to edge. */
.lo-story-cintillo {
  --lo-cintillo-ribbon-height: clamp(26px, 2.25vw, 40px);

  position: relative;
  z-index: 12;
  height: var(--lo-cintillo-ribbon-height);
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}

.lo-story-cintillo::before {
  content: "";
  position: absolute;
  pointer-events: none;
}

.lo-story-cintillo::before {
  z-index: 4;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: url("/images/yellow-string-lo.png") left center / auto 100% repeat-x;
  filter:
    saturate(1.12)
    contrast(1.05)
    drop-shadow(0 -1px 0 rgba(255, 233, 112, .32))
    drop-shadow(0 3px 0 rgba(49, 29, 0, .34))
    drop-shadow(0 10px 16px rgba(35, 20, 0, .30));
}

@media (max-width: 899px) {
  .lo-story-cintillo {
    --lo-cintillo-ribbon-height: 28px;
  }
}