User:Alistair3149/sandbox/componenttest/template/styles.css

.template-component--level-2 { margin-left: 3rem; }

.template-component__card { position: relative; border: 1px solid var( --border-color-base ); border-radius: var( --border-radius--medium ); display: grid; grid-template-columns: 3rem auto; /* This isn't pretty */ line-height: 1.4; }

.template-component__hardpoint { display: grid; place-content: center; border-right: 1px solid var( --border-color-base ); border-top-left-radius: var( --border-radius--medium ); border-bottom-left-radius: var( --border-radius--medium ); font-weight: 500; }

.template-component__count { position: absolute; top: -0.75rem; right: -0.75rem; padding: 0.125rem 0.5rem; outline: 4px solid var(--color-surface-0); color: #fff; background-color: var( --color-primary ); border-radius: 1000px; font-size: 0.8125rem; }

.template-component__item { padding: var( --space-sm ) var( --space-md ); background-color: var( --color-surface-2 ); }

.template-component__title { font-weight: 500; font-size: 0.875rem; }

.template-component__subtitle { color: var( --color-base--subtle ); font-size: 0.8125rem; }