.traits-grid.svelte-49q7w{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1rem;.trait:where(.svelte-49q7w){--radius: var(--br-xl);--padding: 1.25rem;position:relative;background:var(--shade8);border-radius:var(--radius);border:2px solid var(--shade3-25);overflow:clip;transition:scale var(--transition);&:hover,&:focus{scale:1.05;z-index:1}}.trait-icon-container:where(.svelte-49q7w){position:relative;display:grid;place-items:center;padding-block:1rem;>*{grid-area:1 / 1}}.trait-icon:nth-child(1){--size: 19rem;position:absolute;top:50%;left:50%;translate:-50% -50%;mask-image:linear-gradient(to bottom,oklch(0 0 0 / .05),transparent);pointer-events:none}.trait-icon:nth-child(2){--size: 5.5rem}.trait-info:where(.svelte-49q7w){display:grid;grid-auto-rows:max-content;gap:.5rem;padding:var(--padding);padding-block-start:0}.trait-name:where(.svelte-49q7w){text-align:center}.trait-description:where(.svelte-49q7w){color:var(--shade1)}hr:where(.svelte-49q7w){width:100%;height:1px;background:var(--shade6);border:none}.trait-bonuses:where(.svelte-49q7w){display:grid;gap:.5rem}.trait-bonus-number:where(.svelte-49q7w){flex-shrink:0;width:3ch;text-align:center;background:var(--shade5);border-radius:var(--br)}.trait-bonus:where(.svelte-49q7w){display:flex;align-items:flex-start;gap:.5rem}.trait-units:where(.svelte-49q7w){display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;justify-content:center}}