#gear{ display:flex; flex-direction:column; gap:var(--grid-gap); > .coin{ display:flex; flex-wrap:wrap; gap:var(--half-gap); h2{ width:100%; } .input-label{ flex:1; } .input-label__input{ width:80px; flex:1 0 80px; } } .repeating-container{ align-self:initial; } .repitem{ display:grid; gap:var(--half-gap); } .equipped{ .repitem{ grid-template-columns: auto 1fr auto; .skill{ grid-column: 1 / -1; place-self:center; } } } .over-equip-control:checked + .input-label{ span:last-of-type{ color:transparent; display:grid; grid-template-columns:'content'; > * { grid-area:content; } &:before{ content:'!'; color:var(--errorColor); font-size:150%; } } input:first-of-type{ color:var(--errorColor); font-family:var(--topHeaderFont); } } .stored{ .repitem{ grid-template-columns: auto 1fr auto; } .section-display:not(.wear){ grid-column:1 / -1; display:grid; gap:var(--half-gap); &.weapon-section{ grid-template-columns:auto 1fr 2fr; grid-template-areas: "blitz damage damage" "range range wear"; } &.gear{ grid-auto-flow: column; place-content:center; } @each $field in blitz,damage,range,wear{ .#{$field}{ grid-area:$field; } } .input-label__input:not([type="checkbox"]){ width:70px; flex:1; } .input-label{ flex:1; } } } }