.ripcrypt .HeroSkillsCardV1 { /* Foundry Variable Tweaks */ --input-height: 1rem; --col-gap: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(13, minmax(0, 1fr)); column-gap: var(--col-gap); background: var(--base-background); color: var(--base-text); .col-header { background: var(--section-header-background); color: var(--section-header-text); } .row-alt { background: var(--alt-row-background); color: var(--alt-row-text); } label, .label { box-sizing: border-box; padding: 2px 4px; text-transform: uppercase; font-size: var(--font-size-14); overflow: hidden; text-overflow: ellipsis; font-weight: bold; } .list-header { display: flex; justify-content: space-between; align-items: center; } .skill-list { display: grid; grid-template-rows: subgrid; & > li { padding-left: 4px; } &.even > :nth-child(even), &.odd > :nth-child(odd) { background: var(--alt-row-background); color: var(--alt-row-text); } } .grit-skills { grid-column: 1 / span 1; grid-row: 2 / span 4; } .gait-skills { grid-column: 2 / span 1; grid-row: 2 / span 4; } .grip-skills-header { grid-column: 1 / span 1; grid-row: 6 / span 1; } .grip-skills { grid-column: 1 / span 1; grid-row: 7 / span 4; } .glim-skills-header { grid-column: 2 / span 1; grid-row: 6 / span 1; } .glim-skills { grid-column: 2 / span 1; grid-row: 7 / span 4; } .gear-list { grid-row: span 12; display: grid; grid-template-rows: subgrid; list-style-type: none; > :nth-child(even) { background: var(--alt-row-background); color: var(--alt-row-text); } } .currencies { grid-column: 1 / span 2; grid-row: 13 / span 1; display: grid; column-gap: var(--col-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); .currency { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; background: var(--section-header-background); color: var(--section-header-text); --input-background: var(--base-background); --input-text: var(--base-text); .input { margin: 2px; border-radius: 999px; text-align: center; } } } .half-pill { border-radius: 0 999px 999px 0; } }