.gradient-icon{--gradient-icon-size:2.75rem;--gradient-icon-radius:.375rem;--gradient-icon-glyph:48%;width:var(--gradient-icon-size);height:var(--gradient-icon-size);border-radius:var(--gradient-icon-radius);color:#fff;flex:none;place-items:center;display:grid;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}html.dark .gradient-icon{box-shadow:0 4px 10px -2px #00000059,0 2px 4px -2px #00000047}.gradient-icon>:where(svg){width:var(--gradient-icon-glyph);height:var(--gradient-icon-glyph);stroke-width:1.75px}.gradient-icon--sm{--gradient-icon-size:2.35rem;--gradient-icon-glyph:46%}.gradient-icon--lg{--gradient-icon-size:3.5rem;--gradient-icon-radius:.5rem;--gradient-icon-glyph:46%}