.lq-sb-outer {
    --lq-sb-height: 300px;
    --lq-sb-width: 100%;
    --lq-sb-skew: 10deg;
    --lq-sb-extra-offset: 0px;

    /* Axis flags — 1 = active, 0 = inactive (default: X axis) */
    --lq-sb--skew-x: 1;
    --lq-sb--skew-y: 0;

    /* Direction vars (default: right) */
    --lq-sb-dir-x: -1;
    --lq-sb-dir-y:  0;
    --lq-sb-dir-right:  1;
    --lq-sb-dir-left:   0;
    --lq-sb-dir-top:    0;
    --lq-sb-dir-bottom: 0;

	--lq-sb-skew-translate-x: calc(tan(abs(var(--lq-sb-skew))) * (var(--lq-sb-height) * 0.5));
	--lq-sb-skew-translate-y: calc(tan(abs(var(--lq-sb-skew))) * (var(--lq-sb-width) * 0.5));
    --lq-sb-skew-padding-x: calc(var(--lq-sb-skew-translate-x) * 2);
    --lq-sb-skew-padding-y: calc(var(--lq-sb-skew-translate-y) * 2);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    height: var(--lq-sb-height, 300px);
    width: var(--lq-sb-width, 100%);
    padding-top: calc(var(--lq-sb-pt, 0px) + (var(--lq-sb-skew-padding-y) * var(--lq-sb-dir-top)));
    padding-right: calc(var(--lq-sb-pr, 0px) + (var(--lq-sb-skew-padding-x) * var(--lq-sb-dir-right)));
    padding-bottom: calc(var(--lq-sb-pb, 0px) + (var(--lq-sb-skew-padding-y) * var(--lq-sb-dir-bottom)));
    padding-left: calc(var(--lq-sb-pl, 0px) + (var(--lq-sb-skew-padding-x) * var(--lq-sb-dir-left)));
}

.lq-sb-bg {
    position: absolute;
    display: block;
    top: calc(var(--lq-sb-skew-translate-y) * var(--lq-sb--skew-y) * var(--lq-sb-dir-y));
    left: calc(var(--lq-sb-skew-translate-x) * var(--lq-sb--skew-x) * var(--lq-sb-dir-x));
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    /* Single formula: only one term is non-zero at a time */
    transform:
        skewX(calc(var(--lq-sb-skew) * var(--lq-sb--skew-x)))
        skewY(calc(var(--lq-sb-skew) * var(--lq-sb--skew-y)));
}

.lq-sb-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.lq-sb-text-group {
    display: flex;
    flex-direction: column;
}

.lq-sb-title {
    margin: 0;
}

.lq-sb-text {
    margin: 0;
}