.wrk-w-wrap {
  width: 100%;
  position: relative;
  container-type: inline-size;
  overflow: visible;
}

.wrk-w-title {
  position: relative;
  z-index: 1;
  width: 100%;
  line-height: 1;
  overflow: visible;
}

.wrk-w-title::before {
  content: attr(data-text);
  position: absolute;
  inset-inline-start: var(--bg-safe-inline);
  inset-block-start: 40%;
  transform: translateY(calc(-40% + var(--bg-safe-block) * -0.5)) translateX(calc(var(--bg-x) - var(--bg-safe-inline)));
  transform-origin: left center;
  white-space: nowrap;
  pointer-events: none;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: var(--bg-stroke-width) var(--bg-stroke-color);
  paint-order: stroke fill;
  font-weight: 800;
  letter-spacing: .025ch;
  font-size: clamp(1.25rem, calc(var(--bg-fluid) - var(--bg-safety)), calc(var(--h1) * 3.6));
}

@container (max-width: 42rem) {
  .wrk-w-title::before {
    inset-inline-start: var(--bg-safe-inline);
    inset-block-start: var(--bg-safe-block);
    transform: translate(0, 0);
    white-space: normal;
    hyphens: manual;
    overflow-wrap: anywhere;
    inline-size: calc(100% - 2 * var(--bg-safe-inline));
  }
}

.wrk-w-title {
  font-size: calc(var(--h1) * 2);
  width: 100%;
}