:root {
    --box-shadow-S: 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 5px -2px rgba(0, 0, 0, 0.5);
    --box-shadow-M: 0 0 1px rgba(0, 0, 0, 0.2), 0 3px 10px -3px rgba(0, 0, 0, 0.5);
    --box-shadow-L: 0 0 1px rgba(0, 0, 0, 0.2), 0 5px 20px -5px rgba(0, 0, 0, 0.5);
    --box-shadow-X: 0 0 1px rgba(0, 0, 0, 0.2), 0 10px 40px -5px rgba(0, 0, 0, 0.6);
    --box-shadow-XX: 0 0 1px rgba(0, 0, 0, 0.2), 0 10px 60px -5px rgba(0, 0, 0, 0.7);
    --box-shadow-XXX: 0 0 1px rgba(0, 0, 0, 0.2), 0 10px 80px -5px rgba(0, 0, 0, 0.8);
}

/* ============================================================================ */

.shadow-S {
    box-shadow: var(--box-shadow-S) !important;
}
.shadow-S-hover:hover {
    box-shadow: var(--box-shadow-S) !important;
}

.shadow-M {
    box-shadow: var(--box-shadow-M) !important;
}
.shadow-M-hover:hover {
    box-shadow: var(--box-shadow-S) !important;
}

.shadow-L {
    box-shadow: var(--box-shadow-L) !important;
}
.shadow-L-hover:hover {
    box-shadow: var(--box-shadow-S) !important;
}

.shadow-X {
    box-shadow: var(--box-shadow-X) !important;
}
.shadow-X-hover:hover {
    box-shadow: var(--box-shadow-S) !important;
}

.shadow-XX {
    box-shadow: var(--box-shadow-XX) !important;
}
.shadow-XX-hover:hover {
    box-shadow: var(--box-shadow-S) !important;
}

.shadow-XXX {
    box-shadow: var(--box-shadow-XXX) !important;
}
.shadow-XXX-hover:hover {
    box-shadow: var(--box-shadow-S) !important;
}