body {
    --bg-container-top-position-horiz: 50%;
    --bg-container-top-position-vert: 50%;
    --bg-container-top-repeat: no-repeat;
    --bg-cotnainer-top-size: cover;
    --bg-container-top-attachment: unset;
    --bg-container-top-color: unset;

    --bg-top-position-horiz: 50%;
    --bg-top-position-vert: 50%;
    --bg-top-repeat: no-repeat;
    --bg-top-size: cover;
    --bg-top-attachment: unset;
    --bg-top-color: unset;

    --bg-navigation-position-horiz: 50%;
    --bg-navigation-position-vert: 50%;
    --bg-navigation-repeat: no-repeat;
    --bg-navigation-size: cover;
    --bg-navigation-attachment: unset;
    --bg-navigation-color: unset;

    --bg-slideshow-position-horiz: 50%;
    --bg-slideshow-position-vert: 50%;
    --bg-slideshow-repeat: no-repeat;
    --bg-slideshow-size: cover;
    --bg-slideshow-attachment: unset;
    --bg-slideshow-color: unset;

    --bg-header-position-horiz: 50%;
    --bg-header-position-vert: 50%;
    --bg-header-repeat: no-repeat;
    --bg-header-size: cover;
    --bg-header-attachment: unset;
    --bg-header-color: unset;

    --bg-above-position-horiz: 50%;
    --bg-above-position-vert: 50%;
    --bg-above-repeat: no-repeat;
    --bg-above-size: cover;
    --bg-above-attachment: unset;
    --bg-above-color: unset;

    --bg-feature-position-horiz: 50%;
    --bg-feature-position-vert: 50%;
    --bg-feature-repeat: no-repeat;
    --bg-feature-size: cover;
    --bg-feature-attachment: unset;
    --bg-feature-color: unset;

    --bg-showcase-position-horiz: 50%;
    --bg-showcase-position-vert: 50%;
    --bg-showcase-repeat: no-repeat;
    --bg-showcase-size: cover;
    --bg-showcase-attachment: unset;
    --bg-showcase-color: unset;

    --bg-utility-position-horiz: 50%;
    --bg-utility-position-vert: 50%;
    --bg-utility-repeat: no-repeat;
    --bg-utility-size: cover;
    --bg-utility-attachment: unset;
    --bg-utility-color: unset;

    --bg-container-main-position-horiz: 50%;
    --bg-container-main-position-vert: 50%;
    --bg-container-main-repeat: no-repeat;
    --bg-container-main-size: cover;
    --bg-container-main-attachment: unset;
    --bg-container-main-color: unset;

    --bg-expanded-position-horiz: 50%;
    --bg-expanded-position-vert: 50%;
    --bg-expanded-repeat: no-repeat;
    --bg-expanded-size: cover;
    --bg-expanded-attachment: unset;
    --bg-expanded-color: unset;

    --bg-extension-position-horiz: 50%;
    --bg-extension-position-vert: 50%;
    --bg-extension-repeat: no-repeat;
    --bg-extension-size: cover;
    --bg-extension-attachment: unset;
    --bg-extension-color: unset;

    --bg-bottom-position-horiz: 50%;
    --bg-bottom-position-vert: 50%;
    --bg-bottom-repeat: no-repeat;
    --bg-bottom-size: cover;
    --bg-bottom-attachment: unset;
    --bg-bottom-color: unset;

    --bg-container-footer-position-horiz: 50%;
    --bg-container-footer-position-vert: 50%;
    --bg-container-footer-repeat: no-repeat;
    --bg-container-footer-size: cover;
    --bg-container-footer-attachment: unset;
    --bg-container-footer-color: unset;

    --bg-footer-position-horiz: 50%;
    --bg-footer-position-vert: 50%;
    --bg-footer-repeat: no-repeat;
    --bg-footer-size: cover;
    --bg-footer-attachment: unset;
    --bg-footer-color: unset;

    --bg-copyright-position-horiz: 50%;
    --bg-copyright-position-vert: 50%;
    --bg-copyright-repeat: no-repeat;
    --bg-copyright-size: cover;
    --bg-copyright-attachment: unset;
    --bg-copyright-color: unset;

    --bg-offcanvas-position-horiz: 50%;
    --bg-offcanvas-position-vert: 50%;
    --bg-offcanvas-repeat: no-repeat;
    --bg-offcanvas-size: cover;
    --bg-offcanvas-attachment: unset;
    --bg-offcanvas-color: unset;
}





/* Overlay base: make section the stacking context and layer ::before under content */
[class*="bg-overlay-"]::before { content: ""; position: absolute; inset: 0;  }

/* Primary overlay via ::before */
.bg-overlay-color-primary-05::before { background: rgba(var(--primary-color-rgb), 0.05); }
.bg-overlay-color-primary-10::before { background: rgba(var(--primary-color-rgb), 0.10); }
.bg-overlay-color-primary-15::before { background: rgba(var(--primary-color-rgb), 0.15); }
.bg-overlay-color-primary-20::before { background: rgba(var(--primary-color-rgb), 0.20); }
.bg-overlay-color-primary-25::before { background: rgba(var(--primary-color-rgb), 0.25); }
.bg-overlay-color-primary-30::before { background: rgba(var(--primary-color-rgb), 0.30); }
.bg-overlay-color-primary-35::before { background: rgba(var(--primary-color-rgb), 0.35); }
.bg-overlay-color-primary-40::before { background: rgba(var(--primary-color-rgb), 0.40); }
.bg-overlay-color-primary-45::before { background: rgba(var(--primary-color-rgb), 0.45); }
.bg-overlay-color-primary-50::before { background: rgba(var(--primary-color-rgb), 0.50); }
.bg-overlay-color-primary-55::before { background: rgba(var(--primary-color-rgb), 0.55); }
.bg-overlay-color-primary-60::before { background: rgba(var(--primary-color-rgb), 0.60); }
.bg-overlay-color-primary-65::before { background: rgba(var(--primary-color-rgb), 0.65); }
.bg-overlay-color-primary-70::before { background: rgba(var(--primary-color-rgb), 0.70); }
.bg-overlay-color-primary-75::before { background: rgba(var(--primary-color-rgb), 0.75); }
.bg-overlay-color-primary-80::before { background: rgba(var(--primary-color-rgb), 0.80); }
.bg-overlay-color-primary-85::before { background: rgba(var(--primary-color-rgb), 0.85); }
.bg-overlay-color-primary-90::before { background: rgba(var(--primary-color-rgb), 0.90); }
.bg-overlay-color-primary-95::before { background: rgba(var(--primary-color-rgb), 0.95); }
.bg-overlay-color-primary-100::before { background: rgba(var(--primary-color-rgb), 1); }

/* Secondary overlay via ::before */
.bg-overlay-color-secondary-05::before { background: rgba(var(--secondary-color-rgb), 0.05); }
.bg-overlay-color-secondary-10::before { background: rgba(var(--secondary-color-rgb), 0.10); }
.bg-overlay-color-secondary-15::before { background: rgba(var(--secondary-color-rgb), 0.15); }
.bg-overlay-color-secondary-20::before { background: rgba(var(--secondary-color-rgb), 0.20); }
.bg-overlay-color-secondary-25::before { background: rgba(var(--secondary-color-rgb), 0.25); }
.bg-overlay-color-secondary-30::before { background: rgba(var(--secondary-color-rgb), 0.30); }
.bg-overlay-color-secondary-35::before { background: rgba(var(--secondary-color-rgb), 0.35); }
.bg-overlay-color-secondary-40::before { background: rgba(var(--secondary-color-rgb), 0.40); }
.bg-overlay-color-secondary-45::before { background: rgba(var(--secondary-color-rgb), 0.45); }
.bg-overlay-color-secondary-50::before { background: rgba(var(--secondary-color-rgb), 0.50); }
.bg-overlay-color-secondary-55::before { background: rgba(var(--secondary-color-rgb), 0.55); }
.bg-overlay-color-secondary-60::before { background: rgba(var(--secondary-color-rgb), 0.60); }
.bg-overlay-color-secondary-65::before { background: rgba(var(--secondary-color-rgb), 0.65); }
.bg-overlay-color-secondary-70::before { background: rgba(var(--secondary-color-rgb), 0.70); }
.bg-overlay-color-secondary-75::before { background: rgba(var(--secondary-color-rgb), 0.75); }
.bg-overlay-color-secondary-80::before { background: rgba(var(--secondary-color-rgb), 0.80); }
.bg-overlay-color-secondary-85::before { background: rgba(var(--secondary-color-rgb), 0.85); }
.bg-overlay-color-secondary-90::before { background: rgba(var(--secondary-color-rgb), 0.90); }
.bg-overlay-color-secondary-95::before { background: rgba(var(--secondary-color-rgb), 0.95); }
.bg-overlay-color-secondary-100::before { background: rgba(var(--secondary-color-rgb), 1); }

/* Tertiary overlay via ::before */
.bg-overlay-color-tertiary-05::before { background: rgba(var(--tertiary-color-rgb), 0.05); }
.bg-overlay-color-tertiary-10::before { background: rgba(var(--tertiary-color-rgb), 0.10); }
.bg-overlay-color-tertiary-15::before { background: rgba(var(--tertiary-color-rgb), 0.15); }
.bg-overlay-color-tertiary-20::before { background: rgba(var(--tertiary-color-rgb), 0.20); }
.bg-overlay-color-tertiary-25::before { background: rgba(var(--tertiary-color-rgb), 0.25); }
.bg-overlay-color-tertiary-30::before { background: rgba(var(--tertiary-color-rgb), 0.30); }
.bg-overlay-color-tertiary-35::before { background: rgba(var(--tertiary-color-rgb), 0.35); }
.bg-overlay-color-tertiary-40::before { background: rgba(var(--tertiary-color-rgb), 0.40); }
.bg-overlay-color-tertiary-45::before { background: rgba(var(--tertiary-color-rgb), 0.45); }
.bg-overlay-color-tertiary-50::before { background: rgba(var(--tertiary-color-rgb), 0.50); }
.bg-overlay-color-tertiary-55::before { background: rgba(var(--tertiary-color-rgb), 0.55); }
.bg-overlay-color-tertiary-60::before { background: rgba(var(--tertiary-color-rgb), 0.60); }
.bg-overlay-color-tertiary-65::before { background: rgba(var(--tertiary-color-rgb), 0.65); }
.bg-overlay-color-tertiary-70::before { background: rgba(var(--tertiary-color-rgb), 0.70); }
.bg-overlay-color-tertiary-75::before { background: rgba(var(--tertiary-color-rgb), 0.75); }
.bg-overlay-color-tertiary-80::before { background: rgba(var(--tertiary-color-rgb), 0.80); }
.bg-overlay-color-tertiary-85::before { background: rgba(var(--tertiary-color-rgb), 0.85); }
.bg-overlay-color-tertiary-90::before { background: rgba(var(--tertiary-color-rgb), 0.90); }
.bg-overlay-color-tertiary-95::before { background: rgba(var(--tertiary-color-rgb), 0.95); }
.bg-overlay-color-tertiary-100::before { background: rgba(var(--tertiary-color-rgb), 1); }

/* Neutral overlays via ::before */
.bg-overlay-color-black-05::before { background: rgba(var(--default-black-rgb), 0.05); }
.bg-overlay-color-black-10::before { background: rgba(var(--default-black-rgb), 0.10); }
.bg-overlay-color-black-15::before { background: rgba(var(--default-black-rgb), 0.15); }
.bg-overlay-color-black-20::before { background: rgba(var(--default-black-rgb), 0.20); }
.bg-overlay-color-black-25::before { background: rgba(var(--default-black-rgb), 0.25); }
.bg-overlay-color-black-30::before { background: rgba(var(--default-black-rgb), 0.30); }
.bg-overlay-color-black-35::before { background: rgba(var(--default-black-rgb), 0.35); }
.bg-overlay-color-black-40::before { background: rgba(var(--default-black-rgb), 0.40); }
.bg-overlay-color-black-45::before { background: rgba(var(--default-black-rgb), 0.45); }
.bg-overlay-color-black-50::before { background: rgba(var(--default-black-rgb), 0.50); }
.bg-overlay-color-black-55::before { background: rgba(var(--default-black-rgb), 0.55); }
.bg-overlay-color-black-60::before { background: rgba(var(--default-black-rgb), 0.60); }
.bg-overlay-color-black-65::before { background: rgba(var(--default-black-rgb), 0.65); }
.bg-overlay-color-black-70::before { background: rgba(var(--default-black-rgb), 0.70); }
.bg-overlay-color-black-75::before { background: rgba(var(--default-black-rgb), 0.75); }
.bg-overlay-color-black-80::before { background: rgba(var(--default-black-rgb), 0.80); }
.bg-overlay-color-black-85::before { background: rgba(var(--default-black-rgb), 0.85); }
.bg-overlay-color-black-90::before { background: rgba(var(--default-black-rgb), 0.90); }
.bg-overlay-color-black-95::before { background: rgba(var(--default-black-rgb), 0.95); }
.bg-overlay-color-black-100::before { background: rgba(var(--default-black-rgb), 1); }

.bg-overlay-color-white-05::before { background: rgba(var(--default-white-rgb), 0.05); }
.bg-overlay-color-white-10::before { background: rgba(var(--default-white-rgb), 0.10); }
.bg-overlay-color-white-15::before { background: rgba(var(--default-white-rgb), 0.15); }
.bg-overlay-color-white-20::before { background: rgba(var(--default-white-rgb), 0.20); }
.bg-overlay-color-white-25::before { background: rgba(var(--default-white-rgb), 0.25); }
.bg-overlay-color-white-30::before { background: rgba(var(--default-white-rgb), 0.30); }
.bg-overlay-color-white-35::before { background: rgba(var(--default-white-rgb), 0.35); }
.bg-overlay-color-white-40::before { background: rgba(var(--default-white-rgb), 0.40); }
.bg-overlay-color-white-45::before { background: rgba(var(--default-white-rgb), 0.45); }
.bg-overlay-color-white-50::before { background: rgba(var(--default-white-rgb), 0.50); }
.bg-overlay-color-white-55::before { background: rgba(var(--default-white-rgb), 0.55); }
.bg-overlay-color-white-60::before { background: rgba(var(--default-white-rgb), 0.60); }
.bg-overlay-color-white-65::before { background: rgba(var(--default-white-rgb), 0.65); }
.bg-overlay-color-white-70::before { background: rgba(var(--default-white-rgb), 0.70); }
.bg-overlay-color-white-75::before { background: rgba(var(--default-white-rgb), 0.75); }
.bg-overlay-color-white-80::before { background: rgba(var(--default-white-rgb), 0.80); }
.bg-overlay-color-white-85::before { background: rgba(var(--default-white-rgb), 0.85); }
.bg-overlay-color-white-90::before { background: rgba(var(--default-white-rgb), 0.90); }
.bg-overlay-color-white-95::before { background: rgba(var(--default-white-rgb), 0.95); }
.bg-overlay-color-white-100::before { background: rgba(var(--default-white-rgb), 1); }

/* Blur overlays via ::before */
.bg-overlay-blur-01::before { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
.bg-overlay-blur-02::before { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.bg-overlay-blur-03::before { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.bg-overlay-blur-04::before { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.bg-overlay-blur-05::before { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.bg-overlay-blur-06::before { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bg-overlay-blur-07::before { backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.bg-overlay-blur-08::before { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.bg-overlay-blur-09::before { backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.bg-overlay-blur-10::before { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }