User:Alistair3149/sandbox/componenttest/styles.css

.template-components__section { position: relative; padding-top: var( --space-md ); padding-bottom: var( --space-md ); display: flex; flex-direction: column; gap: var( --space-sm ); }

.template-components__section + .template-components__section { border-top: 1px solid var( --border-color-base ); }

.template-components__label { align-self: flex-start; display: flex; align-items: center; color: var( --color-base--subtle ); font-size: 0.875rem; letter-spacing: 0.75px; gap: var(--space-sm ); line-height: 1.25; }

.template-components__label > img { height: 2.5rem; width: auto; position: absolute; top: 0.5rem; opacity: .1; }

.template-components__label > span { padding-left: 3rem; }

.template-components__group { display: flex; gap: var( --space-sm ); flex-wrap: wrap; flex-grow: 1; }

.template-components__subgroup { display: flex; flex-direction: column; gap: var( --space-sm ); flex-grow: 1; }

.template-components__subgroup .template-component__connectorY { top: -0.5rem; /* calc( var( --space-sm ) * -1 ) */ }

.template-components__subgroup .template-component:last-of-type .template-component__connectorY { bottom: calc( 50% + 2px); /* calc( var( --connector-thickness ) + 2px ) */ }