User:Alistair3149/sandbox/componenttest/styles.css

.template-components__section { position: relative; margin-right: 0.75rem; 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: 1rem; right: 0; opacity: .1; }

.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 ) */ }