Draw fixed-size gap decorations by using container query units

Normally, you can only control the size of a gap decoration along the axis that's perpendicular to that decoration. For example, for a horizontal decoration line, you can only control the height, when defining the line with rule: 2px solid red.
However, if you place your layout in a CSS container (by using the container-type property), you can then use container query units (such as cqi) to set the size of the decoration along the other axis, thanks to the rule-inset property.

The rule-inset property lets you inset a decoration line by some length. Because that decoration is inside of a CSS container, insetting it by 50cqi (for a horizontal line) gives you no decoration at all since both ends of the line get inset by 50% of the container inline size.
You can use this to inset the decoration by, say, calc(50cqi - 2px) to get a centerd 4 pixel wide decoration (each end of the line get inset by half of the length of the line minus 2 pixels).

For this technique to work, you will need to add an extra element around the layout elements that have gap decorations. For example, if you have a <div class="layout"> element that uses gap decorations and this technique, you will also need an element that's an ancestor to it and that uses container-type: inline-size. There should also be no difference in sizes between the ancestor and the layout element if you want the cqi values to work as expected (e.g. no padding on the ancestor, and no margin on the layout).