.scroll-progress {
  --scroll-progress: 0;
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 9px;
  overflow: hidden;
  pointer-events: none;
}

.scroll-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    #1c3135 0 33.333%,
    #9f2d24 33.333% 66.666%,
    #c7a98c 66.666% 100%
  );
  transform: scaleX(var(--scroll-progress));
  transform-origin: left center;
  will-change: transform;
}

@media (max-width: 760px) {
  .scroll-progress {
    height: 9px;
  }
}