@layer components{.mb-card{--mb-x:var(--bot-x,var(--mb-home-x));--mb-top:var(--bot-top,var(--mb-home-top));--mb-s:var(--bot-s,1);--mb-head-mid:calc(var(--mb-top) + var(--mb-s) * var(--mb-u) * .67);--mb-head-bottom:calc(var(--mb-top) + var(--mb-s) * var(--mb-u) * 1.09);--mb-head-half:calc(var(--mb-s) * var(--mb-u) * .51);--mb-cx:clamp(var(--bhw) + 8px, var(--mb-x), 100cqw - var(--bhw) - 8px);left:var(--mb-cx);top:calc(var(--mb-top) - 15px);translate:-50% -100%}.mb-card[data-side=below]{top:calc(var(--mb-head-bottom) + 14px);translate:-50%}.mb-card[data-side=right]{left:calc(var(--mb-x) + var(--mb-head-half) + 14px);top:var(--mb-head-mid);translate:0 -50%}.mb-card[data-side=left]{left:calc(var(--mb-x) - var(--mb-head-half) - 14px);top:var(--mb-head-mid);translate:-100% -50%}.mb-tail{left:clamp(22px, var(--bhw) + var(--mb-x) - var(--mb-cx), 100% - 22px);border-width:0 1px 1px 0;bottom:-8px;translate:-50%}.mb-card[data-side=below] .mb-tail{border-width:1px 0 0 1px;top:-8px;bottom:auto}.mb-card[data-side=right] .mb-tail{border-width:0 0 1px 1px;top:50%;bottom:auto;left:-8px;translate:0 -50%}.mb-card[data-side=left] .mb-tail{border-width:1px 1px 0 0;inset:50% -8px auto auto;translate:0 -50%}}