:root {
    --ratio-base: 1.6;

    --spacing: calc(0.25rem * var(--ratio-base));
    --breakpoint-sm: calc(40rem * var(--ratio-base));
    --breakpoint-md: calc(48rem * var(--ratio-base));
    --breakpoint-lg: calc(64rem * var(--ratio-base));
    --breakpoint-xl: calc(80rem * var(--ratio-base));
    --breakpoint-2xl: calc(96rem * var(--ratio-base));
    --container-3xs: calc(16rem * var(--ratio-base));
    --container-2xs: calc(18rem * var(--ratio-base));
    --container-xs: calc(20rem * var(--ratio-base));
    --container-sm: calc(24rem * var(--ratio-base));
    --container-md: calc(28rem * var(--ratio-base));
    --container-lg: calc(32rem * var(--ratio-base));
    --container-xl: calc(36rem * var(--ratio-base));
    --container-2xl: calc(42rem * var(--ratio-base));
    --container-3xl: calc(48rem * var(--ratio-base));
    --container-4xl: calc(56rem * var(--ratio-base));
    --container-5xl: calc(64rem * var(--ratio-base));
    --container-6xl: calc(72rem * var(--ratio-base));
    --container-7xl: calc(80rem * var(--ratio-base));
    --text-xs: calc(0.75rem * var(--ratio-base));
    --text-sm: calc(0.875rem * var(--ratio-base));
    --text-base: calc(1rem * var(--ratio-base));
    --text-lg: calc(1.125rem * var(--ratio-base));
    --text-xl: calc(1.25rem * var(--ratio-base));
    --text-2xl: calc(1.5rem * var(--ratio-base));
    --text-3xl: calc(1.875rem * var(--ratio-base));
    --text-4xl: calc(2.25rem * var(--ratio-base));
    --text-5xl: calc(3rem * var(--ratio-base));
    --text-6xl: calc(3.75rem * var(--ratio-base));
    --text-7xl: calc(4.5rem * var(--ratio-base));
    --text-8xl: calc(6rem * var(--ratio-base));
    --text-9xl: calc(8rem * var(--ratio-base));
    --radius-xs: calc(0.125rem * var(--ratio-base));
    --radius-sm: calc(0.25rem * var(--ratio-base));
    --radius-md: calc(0.375rem * var(--ratio-base));
    --radius-lg: calc(0.5rem * var(--ratio-base));
    --radius-xl: calc(0.75rem * var(--ratio-base));
    --radius-2xl: calc(1rem * var(--ratio-base));
    --radius-3xl: calc(1.5rem * var(--ratio-base));
    --radius-4xl: calc(2rem * var(--ratio-base));
}

.btn {
    --size: calc(var(--size-field, 0.25rem) * var(--ratio-base) * 10);
    --btn-p: calc(1rem * var(--ratio-base));
}

.btn-xs {
    --fontsize: calc(0.6875rem * var(--text-base));
    --btn-p: calc(0.5rem * var(--text-base));
    --size: calc(var(--size-field, 0.25rem) * var(--ratio-base) * 6);
}

.btn-sm {
    --fontsize: calc(0.75rem * var(--text-base));
    --btn-p: calc(0.75rem * var(--text-base));
    --size: calc(var(--size-field, 0.25rem) * var(--ratio-base) * 8);
}

.btn-md {
    --fontsize: calc(0.875rem * var(--text-base));
    --btn-p: calc(1rem * var(--text-base));
    --size: calc(var(--size-field, 0.25rem) * var(--ratio-base) * 10);
}

.btn-lg {
    --fontsize: calc(1.125rem * var(--text-base));
    --btn-p: calc(1.25rem * var(--text-base));
    --size: calc(var(--size-field, 0.25rem) * var(--ratio-base) * 12);
}

.btn-xl {
    --fontsize: calc(1.375rem * var(--text-base));
    --btn-p: calc(1.5rem * var(--text-base));
    --size: calc(var(--size-field, 0.25rem) * var(--ratio-base) * 14);
}

a.btn,
a.btn:hover,
a.btn:visited {
    text-decoration: none;
}

.dropdown-menu {
	--mgz-dropdown-min-width: calc(10rem * var(--ratio-base));
	--mgz-dropdown-padding-y: calc(0.5rem * var(--ratio-base));
	--mgz-dropdown-spacer: calc(0.125rem * var(--ratio-base));
	--mgz-dropdown-font-size: calc(1rem * var(--ratio-base));
	--mgz-dropdown-divider-margin-y: calc(0.5rem * var(--ratio-base));
	--mgz-dropdown-item-padding-x: calc(1rem * var(--ratio-base));
	--mgz-dropdown-item-padding-y: calc(0.25rem * var(--ratio-base));
	--mgz-dropdown-header-padding-x: calc(1rem * var(--ratio-base));
	--mgz-dropdown-header-padding-y: calc(0.5rem * var(--ratio-base));
}