BOX-SHADOW CLASSES
/***
BOX-SHADOW CLASSES
Quickly apply multi-layered box shadows.
***/
.shadow {
box-shadow:
0 4px 4px -10px hsla(var(--base-h), var(--base-s), var(--base-l), 0.04),
0 13px 13px -10px hsla(var(--base-h), var(--base-s), var(--base-l), 0.06),
0 40px 60px -10px hsla(var(--base-h), var(--base-s), var(--base-l), 0.08)
}
.shadow--l {
box-shadow:
0 2.7px 3.6px -5px hsla(var(--base-h), var(--base-s), var(--base-l), .04),
0 7.5px 10px -5px hsla(var(--base-h), var(--base-s), var(--base-l), .06),
0 18px 24.1px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.08),
0 60px 80px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.1)
}
.shadow--xl {
box-shadow:
0 2.2px 2.8px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.01),
0 5.3px 6.7px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.02),
0 10px 12.5px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.04),
0 17.9px 22.3px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.06),
0 33.4px 41.8px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.08),
0 80px 100px -5px hsla(var(--base-h), var(--base-s), var(--base-l), 0.1)
}