画面幅に見立てた値をスライダーで動かします。clamp()の一次式とprogress()の式が同じ大きさになり、400pxより狭い側と1200pxより広い側では両端で止まります。
400pxより狭ければ1rem、1200pxより広ければ2remで止まります
clamp(1rem, 0.5rem + 2vw, 2rem)見出しのサンプル
calc(1rem + progress(100vw, 400px, 1200px) * 1rem)見出しのサンプル
実際の画面幅の代わりに、スライダーの値を--widthとして両方の式に渡しています。上は逆算した係数で書いた一次式、下はprogress()で両端をそのまま書いた式で、どの幅でも同じ大きさになります。
sibling-index()とsibling-count()をprogress()に渡し、項目数に関係なく先頭を0、末尾を1にして幅と不透明度を段階的に変えています。
progress(sibling-index(), 1, sibling-count())で先頭を0、末尾を1にしています。項目数を変えても、最初と最後が両端に張り付いたまま間が等分されます。