@media (max-width: 480px) {
        :root {
            --al-margin-top: calc(var(--content-gap) * 0.5);
            --al-margin-right: calc(var(--container-gap) * 1);
            --al-margin-bottom: var(--space-xs);
            --al-margin-left: calc(var(--container-gap) * 1);
        }
    }

    
    @media (min-width: 481px) and (max-width: 768px) {
        :root {
            --al-margin-top: calc(var(--content-gap) * 0.75);
            --al-margin-right: calc(var(--container-gap) * 1.5);
            --al-margin-bottom: var(--space-xs);
            --al-margin-left: calc(var(--container-gap) * 1.5);
        }
    }

    
    @media (min-width: 769px) and (max-width: 1024px) {
        :root {
            --al-margin-top: calc(var(--content-gap) * 0.75);
            --al-margin-right: calc(var(--container-gap) * 1.75);
            --al-margin-bottom: var(--space-s);
            --al-margin-left: calc(var(--container-gap) * 1.75);
        }
    }

    
    @media (min-width: 1025px) and (max-width: 1440px) {
        :root {
            --al-margin-top: calc(var(--content-gap) * 1);
            --al-margin-right: calc(var(--container-gap) * 2);
            --al-margin-bottom: var(--space-s);
            --al-margin-left: calc(var(--container-gap) * 2);
        }
    }

    
    @media (min-width: 1441px) {
        :root {
            --al-margin-top: calc(var(--content-gap) * 1);
            --al-margin-right: calc(var(--container-gap) * 1);
            --al-margin-bottom: var(--space-xs);
            --al-margin-left: calc(var(--container-gap) * 1);
        }
    }
:root {
    
    --al-header-color: var(--primary);
    --al-main-highlight: var(--base);
    --al-filter-accent: var(--primary);
    --al-filter-accent-hover: var(--primary-hover);
    --al-side-color: var(--secondary);

    
    --al-main-height: calc(
        100vh - (var(--al-content-top-margin) + var(--al-content-bottom-margin))
    );
    --al-content-top-margin: 10vh;
    --al-content-bottom-margin: var(--space-xs);
    --al-slider-height: 75vh;
    --al-proslider-height: 70vh;
    --al-thumbs-slider-height: 90px;
    --al-width-lrg: calc(
        var(--content-width) + (100vw - var(--content-width)) / 2
    );
    --al-width-gutter: calc(100vw - (var(--gutter) * 2));

    
    --al-dot-color: var(--primary);
    --al-dot-xxs: 4px;
    --al-dot-xs: 8px;
    --al-dot-s: 12px;
    --al-dot-m: 16px;
    --al-dot-l: 32px;

    
    --al-trans-very-fast: all 0.05s ease-in-out;
    --al-trans-fast: all 0.1s ease-in-out;
    --al-trans-medium: all 0.2s ease-in-out;
    --al-trans-long: all 0.3s ease-in-out;
    --al-trans-slow: all 0.4s ease-in-out;
    --al-trans-01: 0.1s ease-in-out;
    --al-trans-02: 0.2s ease-in-out;
    --al-trans-03: 0.3s ease-in-out;
    --al-trans-04: 0.4s ease-in-out;
    --al-trans-05: 0.5s ease-in-out;
    --al-trans-06: 0.6s ease-in-out;
    --al-trans-07: 0.7s ease-in-out;
    --al-trans-08: 0.8s ease-in-out;
    --al-trans-09: 0.9s ease-in-out;
    --al-trans-10: 1s ease-in-out;

    
    --al-header-txt--lrg: 6rem;
    --al-header-txt--med: 4rem;
    --al-header-txt--sml: 2rem;

    
    --al-bg-site: #f9f9f9;
    --al-bg-site-dark: #141414;
    --al-bg-card: var(--neutral-ultra-dark-trans-60);
    --al-hover-bg: var(--neutral-ultra-dark);
    --al-separator-dark: 1px solid var(--neutral-dark);

    
    --al-radius-sml: 0.25em;
    --al-radius-med: 0.75em;
    --al-radius-lrg: 1.5em;

    
    --space-xxs: calc((var(--space-xs) / 4));
    --space-xxxs: calc((var(--space-xs) / 12));
    --space-xxxl: calc((var(--space-xxl) * 2));
    --space-xxxxl: calc((var(--space-xxl) * 3));

    
    --al-border-xsml: 1px solid var(--neutral-dark);
    --al-border-sml: 2px solid var(--neutral-dark);
    --al-border-med: 3px solid var(--neutral-dark);
    --al-border-lrg: 5px solid var(--neutral-dark);
}