const dynamicFontSize = (textLength) => {
    /**
     * Edit these values to suit your needs
     */
    // Them minimum and maximum font sizes in pixels
    const minFontSize = 32;
    const maxFontSize = 64;

    // The minimum and maximum line lengths in characters that should affect size
    const minLineLength = 12;
    const maxLineLength = 50;

    // The minimum and maximum viewport widths in pixels where resizing should occur
    const minViewportWidth = 480;
    const maxViewportWidth = 1400;

    /**
     * Danger, calculations below, tread carefully
     */
    // Relative max font size, gets bigger the fewer characters there are, down to minLineLength
    const relativeMaxFontSize =
      textLength < minLineLength
        ? maxFontSize
        : textLength > maxLineLength
        ? minFontSize
        : maxFontSize -
          ((maxFontSize - minFontSize) * (textLength - minLineLength)) /
            (maxLineLength - minLineLength);

    // Relative max viewport width, gets smaller the bigger the font size so it doesn't resize too soon
    const relativeMaxViewportWidth =
      maxViewportWidth * (minFontSize / relativeMaxFontSize);

    // Relative min viewport width, gets bigger the smaller the font size so it doesn't resize too late
    const relativeMinViewportWidth =
      minViewportWidth * (maxFontSize / relativeMaxFontSize);

    // Viewport width calculations
    const viewportWidth =
      (100 * (maxFontSize - minFontSize)) /
      (relativeMaxViewportWidth - relativeMinViewportWidth);

    // Relative font size calculation
    const relativeFontSize =
      (relativeMinViewportWidth * maxFontSize -
        relativeMaxViewportWidth * minFontSize) /
      (relativeMinViewportWidth - relativeMaxViewportWidth);

    // The magic clamp
    return `clamp(${minFontSize / 16}rem, ${viewportWidth}vw + ${
      relativeFontSize / 16
    }rem, ${relativeMaxFontSize / 16}rem)`;
  };

  const dynamicFontEls = document.querySelectorAll("[data-dynamic-font-size]");

  dynamicFontEls.forEach((dynamicFontEl) => {
    dynamicFontEl.style.fontSize = dynamicFontSize(
      dynamicFontEl.textContent.replace(/(<([^>]+)>)/gi, "").trim().length
    );
  });