/* !!! CAUTION:
* CSS Container Queries do not work with custom properties, so we need to use a fixed width !!!
*/
@layer ds_utilities {
  :where(h1),
  .util-h1-ish {
    font-size: var(--ds-utility-h1-ish-font-size-min);
    font-weight: var(--ds-utility-h1-ish-font-weight);
    font-family: var(--ds-utility-h1-ish-font-family);
    letter-spacing: var(--ds-utility-h1-ish-letter-spacing);
    line-height: var(--ds-utility-h1-ish-line-height);
    text-wrap: var(--ds-utility-h1-ish-text-wrap);
    hyphens: var(--ds-utility-h1-ish-hyphens);

    @container (width > 40ch) {
      font-size: var(--ds-utility-h1-ish-font-size-max);
    }
  }

  :where(h2),
  .util-h2-ish {
    font-size: var(--ds-utility-h2-ish-font-size-min);
    font-weight: var(--ds-utility-h2-ish-font-weight);
    font-family: var(--ds-utility-h2-ish-font-family);
    letter-spacing: var(--ds-utility-h2-ish-letter-spacing);
    line-height: var(--ds-utility-h2-ish-line-height);
    text-wrap: var(--ds-utility-h2-ish-text-wrap);
    hyphens: var(--ds-utility-h2-ish-hyphens);

    @container (width > 40ch) {
      font-size: var(--ds-utility-h2-ish-font-size-max);
    }
  }

  :where(h3),
  .util-h3-ish {
    font-size: var(--ds-utility-h3-ish-font-size-min);
    font-weight: var(--ds-utility-h3-ish-font-weight);
    font-family: var(--ds-utility-h3-ish-font-family);
    letter-spacing: var(--ds-utility-h3-ish-letter-spacing);
    line-height: var(--ds-utility-h3-ish-line-height);
    text-wrap: var(--ds-utility-h3-ish-text-wrap);
    hyphens: var(--ds-utility-h3-ish-hyphens);

    @container (width > 40ch) {
      font-size: var(--ds-utility-h3-ish-font-size-max);
    }
  }

  :where(h4),
  .util-h4-ish {
    font-size: var(--ds-utility-h4-ish-font-size-min);
    font-weight: var(--ds-utility-h4-ish-font-weight);
    font-family: var(--ds-utility-h4-ish-font-family);
    letter-spacing: var(--ds-utility-h4-ish-letter-spacing);
    line-height: var(--ds-utility-h4-ish-line-height);
    text-wrap: var(--ds-utility-h4-ish-text-wrap);
    hyphens: var(--ds-utility-h4-ish-hyphens);

    @container (width > 40ch) {
      font-size: var(--ds-utility-h4-ish-font-size-max);
    }
  }

  :where(h5),
  .util-h5-ish {
    font-size: var(--ds-utility-h5-ish-font-size-min);
    font-weight: var(--ds-utility-h5-ish-font-weight);
    font-family: var(--ds-utility-h5-ish-font-family);
    letter-spacing: var(--ds-utility-h5-ish-letter-spacing);
    line-height: var(--ds-utility-h5-ish-line-height);
    text-wrap: var(--ds-utility-h5-ish-text-wrap);
    hyphens: var(--ds-utility-h5-ish-hyphens);

    @container (width > 40ch) {
      font-size: var(--ds-utility-h5-ish-font-size-max);
    }
  }
}