@zanichelli/zanichelli-it-frontend-kit 0.1.2 → 0.1.3

package/dist/zanichelli-it-frontend-kit/zanichelli-it-frontend-kit.css

@@ -1 +1,993 @@
-:root{--font-md:500}.title-1,.title-2,.title-3,.title-4,.title-5,.title-6,.title-1-rg,.title-2-rg,.title-3-rg,.title-4-rg,.title-5-rg,.title-6-rg,.title-1-lt,.title-2-lt,.title-3-lt,.title-4-lt,.title-5-lt,.title-6-lt,.title-1-sb,.title-2-sb,.title-3-sb,.title-4-sb,.title-5-sb,.title-6-sb,.title-1-bd,.title-2-bd,.title-3-bd,.title-4-bd,.title-5-bd,.title-6-bd,.title-1-md,.title-2-md,.title-3-md,.title-4-md,.title-5-md,.title-6-md{font-family:var(--font-family-serif);font-weight:var(--font-rg)}.title-1-lt,.title-2-lt,.title-3-lt,.title-4-lt,.title-5-lt,.title-6-lt,.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt,.body-1-lt,.body-2-lt,.body-3-lt,.body-4-lt,.body-5-lt,.body-6-lt,.body-7-lt,.interactive-1-lt,.interactive-2-lt{font-weight:var(--font-lt)}.title-1-md,.title-2-md,.title-3-md,.title-4-md,.title-5-md,.title-6-md,.heading-1-md,.heading-2-md,.heading-3-md,.heading-4-md,.body-1-md,.body-2-md,.body-3-md,.body-4-md,.body-5-md,.body-6-md,.body-7-md,.interactive-1-md,.interactive-2-md{font-weight:var(--font-md)}.title-1-rg,.title-2-rg,.title-3-rg,.title-4-rg,.title-5-rg,.title-6-rg,.heading-1-rg,.heading-2-rg,.heading-3-rg,.heading-4-rg,.body-1-rg,.body-2-rg,.body-3-rg,.body-4-rg,.body-5-rg,.body-6-rg,.body-7-rg,.interactive-1-rg,.interactive-2-rg{font-weight:var(--font-rg)}.title-1-sb,.title-2-sb,.title-3-sb,.title-4-sb,.title-5-sb,.title-6-sb,.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.body-6-sb,.body-7-sb,.interactive-1-sb,.interactive-2-sb{font-weight:var(--font-sb)}.title-1-bd,.title-2-bd,.title-3-bd,.title-4-bd,.title-5-bd,.title-6-bd,.heading-1-bd,.heading-2-bd,.heading-3-bd,.heading-4-bd,.body-1-bd,.body-2-bd,.body-3-bd,.body-4-bd,.body-5-bd,.body-6-bd,.body-7-bd,.interactive-1-bd,.interactive-2-bd{font-weight:var(--font-bd)}.font-lt{font-weight:var(--font-lt)}.font-rg{font-weight:var(--font-rg)}.font-md{font-weight:var(--font-md)}.font-sb{font-weight:var(--font-sb)}.font-bd{font-weight:var(--font-bd)}.font-it{font-style:italic}.font-serif{font-family:var(--font-family-serif)}.font-sans{font-family:var(--font-family-sans)}.title-1,.title-1-sb,.title-1-bd,.title-1-rg,.title-1-lt,.title-1-md{font-size:4.5rem;line-height:5rem;}.title-2,.title-2-sb,.title-2-bd,.title-2-rg,.title-2-lt,.title-2-md{font-size:3rem;line-height:3.25rem;}.title-3,.title-3-sb,.title-3-bd,.title-3-rg,.title-3-lt,.title-3-md{font-size:2rem;line-height:2.75rem;}.title-4,.title-4-sb,.title-4-bd,.title-4-rg,.title-4-lt,.title-4-md{font-size:1.75rem;line-height:2rem;}.title-5,.title-5-sb,.title-5-bd,.title-5-rg,.title-5-lt,.title-5-md{font-size:1.5rem;line-height:1.75rem;}.title-6,.title-6-sb,.title-6-bd,.title-6-rg,.title-6-lt,.title-6-md{font-size:1.25rem;line-height:1.75rem;}.heading-1,.heading-1-sb,.heading-1-bd,.heading-1-rg,.heading-1-lt,.heading-1-md{font-size:2rem;line-height:2.75rem;}.heading-2,.heading-2-sb,.heading-2-bd,.heading-2-rg,.heading-2-lt,.heading-2-md{font-size:1.75rem;line-height:2rem;}.heading-3,.heading-3-sb,.heading-3-bd,.heading-3-rg,.heading-3-lt,.heading-3-md{font-size:1.5rem;line-height:1.75rem;}.heading-4,.heading-4-sb,.heading-4-bd,.heading-4-rg,.heading-4-lt,.heading-4-md{font-size:1.125rem;line-height:1.375rem;}.body-1,.body-1-sb,.body-1-bd,.body-1-rg,.body-1-lt,.body-1-md{font-size:1.5rem;line-height:2rem;}.body-2,.body-2-sb,.body-2-bd,.body-2-rg,.body-2-lt,.body-2-md{font-size:1.25rem;line-height:1.75rem;}.body-3,.body-3-sb,.body-3-bd,.body-3-rg,.body-3-lt,.body-3-md{font-size:1.125rem;line-height:1.5rem;}.body-4,.body-4-sb,.body-4-bd,.body-4-rg,.body-4-lt,.body-4-md{font-size:1rem;line-height:1.5rem;}.body-5,.body-5-sb,.body-5-bd,.body-5-rg,.body-5-lt,.body-5-md{font-size:0.875rem;line-height:1.125rem;}.body-6,.body-6-sb,.body-6-bd,.body-6-rg,.body-6-lt,.body-6-md{font-size:0.75rem;line-height:1rem;}.body-7,.body-7-sb,.body-7-bd,.body-7-rg,.body-7-lt,.body-7-md{font-size:0.625rem;line-height:0.875rem;}.interactive-1,.interactive-1-sb,.interactive-1-bd,.interactive-1-rg,.interactive-1-lt,.interactive-1-md{font-size:1rem;line-height:1.5rem;}.interactive-2,.interactive-2-sb,.interactive-2-bd,.interactive-2-rg,.interactive-2-lt,.interactive-2-md{font-size:0.875rem;line-height:1.125rem;}@media (width < 768px){.mobile-title-1,.mobile-title-1-sb,.mobile-title-1-bd,.mobile-title-1-rg,.mobile-title-1-lt,.mobile-title-1-md{font-size:4.5rem;line-height:5rem;}.mobile-title-2,.mobile-title-2-sb,.mobile-title-2-bd,.mobile-title-2-rg,.mobile-title-2-lt,.mobile-title-2-md{font-size:3rem;line-height:3.25rem;}.mobile-title-3,.mobile-title-3-sb,.mobile-title-3-bd,.mobile-title-3-rg,.mobile-title-3-lt,.mobile-title-3-md{font-size:2rem;line-height:2.75rem;}.mobile-title-4,.mobile-title-4-sb,.mobile-title-4-bd,.mobile-title-4-rg,.mobile-title-4-lt,.mobile-title-4-md{font-size:1.75rem;line-height:2rem;}.mobile-title-5,.mobile-title-5-sb,.mobile-title-5-bd,.mobile-title-5-rg,.mobile-title-5-lt,.mobile-title-5-md{font-size:1.5rem;line-height:1.75rem;}.mobile-title-6,.mobile-title-6-sb,.mobile-title-6-bd,.mobile-title-6-rg,.mobile-title-6-lt,.mobile-title-6-md{font-size:1.25rem;line-height:1.75rem;}.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-bd,.mobile-heading-1-rg,.mobile-heading-1-lt,.mobile-heading-1-md{font-size:2rem;line-height:2.75rem;}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-bd,.mobile-heading-2-rg,.mobile-heading-2-lt,.mobile-heading-2-md{font-size:1.75rem;line-height:2rem;}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-bd,.mobile-heading-3-rg,.mobile-heading-3-lt,.mobile-heading-3-md{font-size:1.5rem;line-height:1.75rem;}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-bd,.mobile-heading-4-rg,.mobile-heading-4-lt,.mobile-heading-4-md{font-size:1.125rem;line-height:1.375rem;}.mobile-body-1,.mobile-body-1-sb,.mobile-body-1-bd,.mobile-body-1-rg,.mobile-body-1-lt,.mobile-body-1-md{font-size:1.5rem;line-height:2rem;}.mobile-body-2,.mobile-body-2-sb,.mobile-body-2-bd,.mobile-body-2-rg,.mobile-body-2-lt,.mobile-body-2-md{font-size:1.25rem;line-height:1.75rem;}.mobile-body-3,.mobile-body-3-sb,.mobile-body-3-bd,.mobile-body-3-rg,.mobile-body-3-lt,.mobile-body-3-md{font-size:1.125rem;line-height:1.5rem;}.mobile-body-4,.mobile-body-4-sb,.mobile-body-4-bd,.mobile-body-4-rg,.mobile-body-4-lt,.mobile-body-4-md{font-size:1rem;line-height:1.5rem;}.mobile-body-5,.mobile-body-5-sb,.mobile-body-5-bd,.mobile-body-5-rg,.mobile-body-5-lt,.mobile-body-5-md{font-size:0.875rem;line-height:1.125rem;}.mobile-body-6,.mobile-body-6-sb,.mobile-body-6-bd,.mobile-body-6-rg,.mobile-body-6-lt,.mobile-body-6-md{font-size:0.75rem;line-height:1rem;}.mobile-body-7,.mobile-body-7-sb,.mobile-body-7-bd,.mobile-body-7-rg,.mobile-body-7-lt,.mobile-body-7-md{font-size:0.625rem;line-height:0.875rem;}.mobile-interactive-1,.mobile-interactive-1-sb,.mobile-interactive-1-bd,.mobile-interactive-1-rg,.mobile-interactive-1-lt,.mobile-interactive-1-md{font-size:1rem;line-height:1.5rem;}.mobile-interactive-2,.mobile-interactive-2-sb,.mobile-interactive-2-bd,.mobile-interactive-2-rg,.mobile-interactive-2-lt,.mobile-interactive-2-md{font-size:0.875rem;line-height:1.125rem;}}@media (width >= 768px) and (width < 1152px){.tablet-title-1,.tablet-title-1-sb,.tablet-title-1-bd,.tablet-title-1-rg,.tablet-title-1-lt,.tablet-title-1-md{font-size:4.5rem;line-height:5rem;}.tablet-title-2,.tablet-title-2-sb,.tablet-title-2-bd,.tablet-title-2-rg,.tablet-title-2-lt,.tablet-title-2-md{font-size:3rem;line-height:3.25rem;}.tablet-title-3,.tablet-title-3-sb,.tablet-title-3-bd,.tablet-title-3-rg,.tablet-title-3-lt,.tablet-title-3-md{font-size:2rem;line-height:2.75rem;}.tablet-title-4,.tablet-title-4-sb,.tablet-title-4-bd,.tablet-title-4-rg,.tablet-title-4-lt,.tablet-title-4-md{font-size:1.75rem;line-height:2rem;}.tablet-title-5,.tablet-title-5-sb,.tablet-title-5-bd,.tablet-title-5-rg,.tablet-title-5-lt,.tablet-title-5-md{font-size:1.5rem;line-height:1.75rem;}.tablet-title-6,.tablet-title-6-sb,.tablet-title-6-bd,.tablet-title-6-rg,.tablet-title-6-lt,.tablet-title-6-md{font-size:1.25rem;line-height:1.75rem;}.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-bd,.tablet-heading-1-rg,.tablet-heading-1-lt,.tablet-heading-1-md{font-size:2rem;line-height:2.75rem;}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-bd,.tablet-heading-2-rg,.tablet-heading-2-lt,.tablet-heading-2-md{font-size:1.75rem;line-height:2rem;}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-bd,.tablet-heading-3-rg,.tablet-heading-3-lt,.tablet-heading-3-md{font-size:1.5rem;line-height:1.75rem;}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-bd,.tablet-heading-4-rg,.tablet-heading-4-lt,.tablet-heading-4-md{font-size:1.125rem;line-height:1.375rem;}.tablet-body-1,.tablet-body-1-sb,.tablet-body-1-bd,.tablet-body-1-rg,.tablet-body-1-lt,.tablet-body-1-md{font-size:1.5rem;line-height:2rem;}.tablet-body-2,.tablet-body-2-sb,.tablet-body-2-bd,.tablet-body-2-rg,.tablet-body-2-lt,.tablet-body-2-md{font-size:1.25rem;line-height:1.75rem;}.tablet-body-3,.tablet-body-3-sb,.tablet-body-3-bd,.tablet-body-3-rg,.tablet-body-3-lt,.tablet-body-3-md{font-size:1.125rem;line-height:1.5rem;}.tablet-body-4,.tablet-body-4-sb,.tablet-body-4-bd,.tablet-body-4-rg,.tablet-body-4-lt,.tablet-body-4-md{font-size:1rem;line-height:1.5rem;}.tablet-body-5,.tablet-body-5-sb,.tablet-body-5-bd,.tablet-body-5-rg,.tablet-body-5-lt,.tablet-body-5-md{font-size:0.875rem;line-height:1.125rem;}.tablet-body-6,.tablet-body-6-sb,.tablet-body-6-bd,.tablet-body-6-rg,.tablet-body-6-lt,.tablet-body-6-md{font-size:0.75rem;line-height:1rem;}.tablet-body-7,.tablet-body-7-sb,.tablet-body-7-bd,.tablet-body-7-rg,.tablet-body-7-lt,.tablet-body-7-md{font-size:0.625rem;line-height:0.875rem;}.tablet-interactive-1,.tablet-interactive-1-sb,.tablet-interactive-1-bd,.tablet-interactive-1-rg,.tablet-interactive-1-lt,.tablet-interactive-1-md{font-size:1rem;line-height:1.5rem;}.tablet-interactive-2,.tablet-interactive-2-sb,.tablet-interactive-2-bd,.tablet-interactive-2-rg,.tablet-interactive-2-lt,.tablet-interactive-2-md{font-size:0.875rem;line-height:1.125rem;}}@media (width >= 1152px){.desktop-title-1,.desktop-title-1-sb,.desktop-title-1-bd,.desktop-title-1-rg,.desktop-title-1-lt,.desktop-title-1-md{font-size:4.5rem;line-height:5rem;}.desktop-title-2,.desktop-title-2-sb,.desktop-title-2-bd,.desktop-title-2-rg,.desktop-title-2-lt,.desktop-title-2-md{font-size:3rem;line-height:3.25rem;}.desktop-title-3,.desktop-title-3-sb,.desktop-title-3-bd,.desktop-title-3-rg,.desktop-title-3-lt,.desktop-title-3-md{font-size:2rem;line-height:2.75rem;}.desktop-title-4,.desktop-title-4-sb,.desktop-title-4-bd,.desktop-title-4-rg,.desktop-title-4-lt,.desktop-title-4-md{font-size:1.75rem;line-height:2rem;}.desktop-title-5,.desktop-title-5-sb,.desktop-title-5-bd,.desktop-title-5-rg,.desktop-title-5-lt,.desktop-title-5-md{font-size:1.5rem;line-height:1.75rem;}.desktop-title-6,.desktop-title-6-sb,.desktop-title-6-bd,.desktop-title-6-rg,.desktop-title-6-lt,.desktop-title-6-md{font-size:1.25rem;line-height:1.75rem;}.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-bd,.desktop-heading-1-rg,.desktop-heading-1-lt,.desktop-heading-1-md{font-size:2rem;line-height:2.75rem;}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-bd,.desktop-heading-2-rg,.desktop-heading-2-lt,.desktop-heading-2-md{font-size:1.75rem;line-height:2rem;}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-bd,.desktop-heading-3-rg,.desktop-heading-3-lt,.desktop-heading-3-md{font-size:1.5rem;line-height:1.75rem;}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-bd,.desktop-heading-4-rg,.desktop-heading-4-lt,.desktop-heading-4-md{font-size:1.125rem;line-height:1.375rem;}.desktop-body-1,.desktop-body-1-sb,.desktop-body-1-bd,.desktop-body-1-rg,.desktop-body-1-lt,.desktop-body-1-md{font-size:1.5rem;line-height:2rem;}.desktop-body-2,.desktop-body-2-sb,.desktop-body-2-bd,.desktop-body-2-rg,.desktop-body-2-lt,.desktop-body-2-md{font-size:1.25rem;line-height:1.75rem;}.desktop-body-3,.desktop-body-3-sb,.desktop-body-3-bd,.desktop-body-3-rg,.desktop-body-3-lt,.desktop-body-3-md{font-size:1.125rem;line-height:1.5rem;}.desktop-body-4,.desktop-body-4-sb,.desktop-body-4-bd,.desktop-body-4-rg,.desktop-body-4-lt,.desktop-body-4-md{font-size:1rem;line-height:1.5rem;}.desktop-body-5,.desktop-body-5-sb,.desktop-body-5-bd,.desktop-body-5-rg,.desktop-body-5-lt,.desktop-body-5-md{font-size:0.875rem;line-height:1.125rem;}.desktop-body-6,.desktop-body-6-sb,.desktop-body-6-bd,.desktop-body-6-rg,.desktop-body-6-lt,.desktop-body-6-md{font-size:0.75rem;line-height:1rem;}.desktop-body-7,.desktop-body-7-sb,.desktop-body-7-bd,.desktop-body-7-rg,.desktop-body-7-lt,.desktop-body-7-md{font-size:0.625rem;line-height:0.875rem;}.desktop-interactive-1,.desktop-interactive-1-sb,.desktop-interactive-1-bd,.desktop-interactive-1-rg,.desktop-interactive-1-lt,.desktop-interactive-1-md{font-size:1rem;line-height:1.5rem;}.desktop-interactive-2,.desktop-interactive-2-sb,.desktop-interactive-2-bd,.desktop-interactive-2-rg,.desktop-interactive-2-lt,.desktop-interactive-2-md{font-size:0.875rem;line-height:1.125rem;}}z-button.zanit-button{--color-primary01:var(--red500);--color-hover-primary:var(--red800);--color-pressed-primary:var(--red400);--color-button-secondary:transparent;--color-primary02:transparent;--color-primary03:transparent}z-button.zanit-button-dark{--color-primary01:var(--gray950);--color-hover-primary:#000;--color-pressed-primary:var(--gray950);--color-button-secondary:transparent;--color-primary02:transparent;--color-primary03:transparent}:root{--zanit-accent-color:#ffe74c;--shadow-focus-primary:0 0 0 2px #fff, 0 0 2px 5px var(--gray950)}.zanit-link,.zanit-link-inverse{color:currentcolor;font-family:inherit;text-decoration:underline solid 12% var(--red500);text-underline-offset:28%}.zanit-link-inverse{color:var(--color-text-inverse);text-decoration-color:var(--color-text-inverse)}
+:root {
+  /* font-weight */
+  --font-md: 500;
+}
+
+.title-1,
+.title-2,
+.title-3,
+.title-4,
+.title-5,
+.title-6,
+.title-1-rg,
+.title-2-rg,
+.title-3-rg,
+.title-4-rg,
+.title-5-rg,
+.title-6-rg,
+.title-1-lt,
+.title-2-lt,
+.title-3-lt,
+.title-4-lt,
+.title-5-lt,
+.title-6-lt,
+.title-1-sb,
+.title-2-sb,
+.title-3-sb,
+.title-4-sb,
+.title-5-sb,
+.title-6-sb,
+.title-1-bd,
+.title-2-bd,
+.title-3-bd,
+.title-4-bd,
+.title-5-bd,
+.title-6-bd,
+.title-1-md,
+.title-2-md,
+.title-3-md,
+.title-4-md,
+.title-5-md,
+.title-6-md {
+  font-family: var(--font-family-serif);
+  font-weight: var(--font-rg);
+}
+
+.title-1-lt,
+.title-2-lt,
+.title-3-lt,
+.title-4-lt,
+.title-5-lt,
+.title-6-lt,
+.heading-1-lt,
+.heading-2-lt,
+.heading-3-lt,
+.heading-4-lt,
+.body-1-lt,
+.body-2-lt,
+.body-3-lt,
+.body-4-lt,
+.body-5-lt,
+.body-6-lt,
+.body-7-lt,
+.interactive-1-lt,
+.interactive-2-lt {
+  font-weight: var(--font-lt);
+}
+
+.title-1-md,
+.title-2-md,
+.title-3-md,
+.title-4-md,
+.title-5-md,
+.title-6-md,
+.heading-1-md,
+.heading-2-md,
+.heading-3-md,
+.heading-4-md,
+.body-1-md,
+.body-2-md,
+.body-3-md,
+.body-4-md,
+.body-5-md,
+.body-6-md,
+.body-7-md,
+.interactive-1-md,
+.interactive-2-md {
+  font-weight: var(--font-md);
+}
+
+.title-1-rg,
+.title-2-rg,
+.title-3-rg,
+.title-4-rg,
+.title-5-rg,
+.title-6-rg,
+.heading-1-rg,
+.heading-2-rg,
+.heading-3-rg,
+.heading-4-rg,
+.body-1-rg,
+.body-2-rg,
+.body-3-rg,
+.body-4-rg,
+.body-5-rg,
+.body-6-rg,
+.body-7-rg,
+.interactive-1-rg,
+.interactive-2-rg {
+  font-weight: var(--font-rg);
+}
+
+.title-1-sb,
+.title-2-sb,
+.title-3-sb,
+.title-4-sb,
+.title-5-sb,
+.title-6-sb,
+.heading-1-sb,
+.heading-2-sb,
+.heading-3-sb,
+.heading-4-sb,
+.body-2-sb,
+.body-3-sb,
+.body-4-sb,
+.body-5-sb,
+.body-6-sb,
+.body-7-sb,
+.interactive-1-sb,
+.interactive-2-sb {
+  font-weight: var(--font-sb);
+}
+
+.title-1-bd,
+.title-2-bd,
+.title-3-bd,
+.title-4-bd,
+.title-5-bd,
+.title-6-bd,
+.heading-1-bd,
+.heading-2-bd,
+.heading-3-bd,
+.heading-4-bd,
+.body-1-bd,
+.body-2-bd,
+.body-3-bd,
+.body-4-bd,
+.body-5-bd,
+.body-6-bd,
+.body-7-bd,
+.interactive-1-bd,
+.interactive-2-bd {
+  font-weight: var(--font-bd);
+}
+
+.font-lt {
+  font-weight: var(--font-lt);
+}
+
+.font-rg {
+  font-weight: var(--font-rg);
+}
+
+.font-md {
+  font-weight: var(--font-md);
+}
+
+.font-sb {
+  font-weight: var(--font-sb);
+}
+
+.font-bd {
+  font-weight: var(--font-bd);
+}
+
+.font-it {
+  font-style: italic;
+}
+
+.font-serif {
+  font-family: var(--font-family-serif);
+}
+
+.font-sans {
+  font-family: var(--font-family-sans);
+}
+
+.title-1,
+.title-1-sb,
+.title-1-bd,
+.title-1-rg,
+.title-1-lt,
+.title-1-md {
+  font-size: 4.5rem; /* 72px */
+  line-height: 5rem; /* 80px */
+}
+
+.title-2,
+.title-2-sb,
+.title-2-bd,
+.title-2-rg,
+.title-2-lt,
+.title-2-md {
+  font-size: 3rem; /* 48px */
+  line-height: 3.25rem; /* 52px */
+}
+
+.title-3,
+.title-3-sb,
+.title-3-bd,
+.title-3-rg,
+.title-3-lt,
+.title-3-md {
+  font-size: 2rem; /* 32px */
+  line-height: 2.75rem; /* 44px */
+}
+
+.title-4,
+.title-4-sb,
+.title-4-bd,
+.title-4-rg,
+.title-4-lt,
+.title-4-md {
+  font-size: 1.75rem; /* 28px */
+  line-height: 2rem; /* 32px */
+}
+
+.title-5,
+.title-5-sb,
+.title-5-bd,
+.title-5-rg,
+.title-5-lt,
+.title-5-md {
+  font-size: 1.5rem; /* 24px */
+  line-height: 1.75rem; /* 28px */
+}
+
+.title-6,
+.title-6-sb,
+.title-6-bd,
+.title-6-rg,
+.title-6-lt,
+.title-6-md {
+  font-size: 1.25rem; /* 20px */
+  line-height: 1.75rem; /* 28px */
+}
+
+.heading-1,
+.heading-1-sb,
+.heading-1-bd,
+.heading-1-rg,
+.heading-1-lt,
+.heading-1-md {
+  font-size: 2rem; /* 32px */
+  line-height: 2.75rem; /* 44px */
+}
+
+.heading-2,
+.heading-2-sb,
+.heading-2-bd,
+.heading-2-rg,
+.heading-2-lt,
+.heading-2-md {
+  font-size: 1.75rem; /* 28px */
+  line-height: 2rem; /* 32px */
+}
+
+.heading-3,
+.heading-3-sb,
+.heading-3-bd,
+.heading-3-rg,
+.heading-3-lt,
+.heading-3-md {
+  font-size: 1.5rem; /* 24px */
+  line-height: 1.75rem; /* 28px */
+}
+
+.heading-4,
+.heading-4-sb,
+.heading-4-bd,
+.heading-4-rg,
+.heading-4-lt,
+.heading-4-md {
+  font-size: 1.125rem; /* 18px */
+  line-height: 1.375rem; /* 22px */
+}
+
+.body-1,
+.body-1-sb,
+.body-1-bd,
+.body-1-rg,
+.body-1-lt,
+.body-1-md {
+  font-size: 1.5rem; /* 24px */
+  line-height: 2rem; /* 32px */
+}
+
+.body-2,
+.body-2-sb,
+.body-2-bd,
+.body-2-rg,
+.body-2-lt,
+.body-2-md {
+  font-size: 1.25rem; /* 20px */
+  line-height: 1.75rem; /* 28px */
+}
+
+.body-3,
+.body-3-sb,
+.body-3-bd,
+.body-3-rg,
+.body-3-lt,
+.body-3-md {
+  font-size: 1.125rem; /* 18px */
+  line-height: 1.5rem; /* 24px */
+}
+
+.body-4,
+.body-4-sb,
+.body-4-bd,
+.body-4-rg,
+.body-4-lt,
+.body-4-md {
+  font-size: 1rem; /* 16px */
+  line-height: 1.5rem; /* 24px */
+}
+
+.body-5,
+.body-5-sb,
+.body-5-bd,
+.body-5-rg,
+.body-5-lt,
+.body-5-md {
+  font-size: 0.875rem; /* 14px */
+  line-height: 1.125rem; /* 18px */
+}
+
+.body-6,
+.body-6-sb,
+.body-6-bd,
+.body-6-rg,
+.body-6-lt,
+.body-6-md {
+  font-size: 0.75rem; /* 12px */
+  line-height: 1rem; /* 16px */
+}
+
+.body-7,
+.body-7-sb,
+.body-7-bd,
+.body-7-rg,
+.body-7-lt,
+.body-7-md {
+  font-size: 0.625rem; /* 10px */
+  line-height: 0.875rem; /* 14px */
+}
+
+.interactive-1,
+.interactive-1-sb,
+.interactive-1-bd,
+.interactive-1-rg,
+.interactive-1-lt,
+.interactive-1-md {
+  font-size: 1rem; /* 16px */
+  line-height: 1.5rem; /* 24px */
+}
+
+.interactive-2,
+.interactive-2-sb,
+.interactive-2-bd,
+.interactive-2-rg,
+.interactive-2-lt,
+.interactive-2-md {
+  font-size: 0.875rem; /* 14px */
+  line-height: 1.125rem; /* 18px */
+}
+
+/* Mobile-prefixed rules. use them to set the styles only in mobile viewport */
+@media (width < 768px) {
+  .mobile-title-1,
+  .mobile-title-1-sb,
+  .mobile-title-1-bd,
+  .mobile-title-1-rg,
+  .mobile-title-1-lt,
+  .mobile-title-1-md {
+    font-size: 4.5rem; /* 72px */
+    line-height: 5rem; /* 80px */
+  }
+
+  .mobile-title-2,
+  .mobile-title-2-sb,
+  .mobile-title-2-bd,
+  .mobile-title-2-rg,
+  .mobile-title-2-lt,
+  .mobile-title-2-md {
+    font-size: 3rem; /* 48px */
+    line-height: 3.25rem; /* 52px */
+  }
+
+  .mobile-title-3,
+  .mobile-title-3-sb,
+  .mobile-title-3-bd,
+  .mobile-title-3-rg,
+  .mobile-title-3-lt,
+  .mobile-title-3-md {
+    font-size: 2rem; /* 32px */
+    line-height: 2.75rem; /* 44px */
+  }
+
+  .mobile-title-4,
+  .mobile-title-4-sb,
+  .mobile-title-4-bd,
+  .mobile-title-4-rg,
+  .mobile-title-4-lt,
+  .mobile-title-4-md {
+    font-size: 1.75rem; /* 28px */
+    line-height: 2rem; /* 32px */
+  }
+
+  .mobile-title-5,
+  .mobile-title-5-sb,
+  .mobile-title-5-bd,
+  .mobile-title-5-rg,
+  .mobile-title-5-lt,
+  .mobile-title-5-md {
+    font-size: 1.5rem; /* 24px */
+    line-height: 1.75rem; /* 28px */
+  }
+
+  .mobile-title-6,
+  .mobile-title-6-sb,
+  .mobile-title-6-bd,
+  .mobile-title-6-rg,
+  .mobile-title-6-lt,
+  .mobile-title-6-md {
+    font-size: 1.25rem; /* 20px */
+    line-height: 1.75rem; /* 28px */
+  }
+
+  .mobile-heading-1,
+  .mobile-heading-1-sb,
+  .mobile-heading-1-bd,
+  .mobile-heading-1-rg,
+  .mobile-heading-1-lt,
+  .mobile-heading-1-md {
+    font-size: 2rem; /* 32px */
+    line-height: 2.75rem; /* 44px */
+  }
+
+  .mobile-heading-2,
+  .mobile-heading-2-sb,
+  .mobile-heading-2-bd,
+  .mobile-heading-2-rg,
+  .mobile-heading-2-lt,
+  .mobile-heading-2-md {
+    font-size: 1.75rem; /* 28px */
+    line-height: 2rem; /* 32px */
+  }
+
+  .mobile-heading-3,
+  .mobile-heading-3-sb,
+  .mobile-heading-3-bd,
+  .mobile-heading-3-rg,
+  .mobile-heading-3-lt,
+  .mobile-heading-3-md {
+    font-size: 1.5rem; /* 24px */
+    line-height: 1.75rem; /* 28px */
+  }
+
+  .mobile-heading-4,
+  .mobile-heading-4-sb,
+  .mobile-heading-4-bd,
+  .mobile-heading-4-rg,
+  .mobile-heading-4-lt,
+  .mobile-heading-4-md {
+    font-size: 1.125rem; /* 18px */
+    line-height: 1.375rem; /* 22px */
+  }
+
+  .mobile-body-1,
+  .mobile-body-1-sb,
+  .mobile-body-1-bd,
+  .mobile-body-1-rg,
+  .mobile-body-1-lt,
+  .mobile-body-1-md {
+    font-size: 1.5rem; /* 24px */
+    line-height: 2rem; /* 32px */
+  }
+
+  .mobile-body-2,
+  .mobile-body-2-sb,
+  .mobile-body-2-bd,
+  .mobile-body-2-rg,
+  .mobile-body-2-lt,
+  .mobile-body-2-md {
+    font-size: 1.25rem; /* 20px */
+    line-height: 1.75rem; /* 28px */
+  }
+
+  .mobile-body-3,
+  .mobile-body-3-sb,
+  .mobile-body-3-bd,
+  .mobile-body-3-rg,
+  .mobile-body-3-lt,
+  .mobile-body-3-md {
+    font-size: 1.125rem; /* 18px */
+    line-height: 1.5rem; /* 24px */
+  }
+
+  .mobile-body-4,
+  .mobile-body-4-sb,
+  .mobile-body-4-bd,
+  .mobile-body-4-rg,
+  .mobile-body-4-lt,
+  .mobile-body-4-md {
+    font-size: 1rem; /* 16px */
+    line-height: 1.5rem; /* 24px */
+  }
+
+  .mobile-body-5,
+  .mobile-body-5-sb,
+  .mobile-body-5-bd,
+  .mobile-body-5-rg,
+  .mobile-body-5-lt,
+  .mobile-body-5-md {
+    font-size: 0.875rem; /* 14px */
+    line-height: 1.125rem; /* 18px */
+  }
+
+  .mobile-body-6,
+  .mobile-body-6-sb,
+  .mobile-body-6-bd,
+  .mobile-body-6-rg,
+  .mobile-body-6-lt,
+  .mobile-body-6-md {
+    font-size: 0.75rem; /* 12px */
+    line-height: 1rem; /* 16px */
+  }
+
+  .mobile-body-7,
+  .mobile-body-7-sb,
+  .mobile-body-7-bd,
+  .mobile-body-7-rg,
+  .mobile-body-7-lt,
+  .mobile-body-7-md {
+    font-size: 0.625rem; /* 10px */
+    line-height: 0.875rem; /* 14px */
+  }
+
+  .mobile-interactive-1,
+  .mobile-interactive-1-sb,
+  .mobile-interactive-1-bd,
+  .mobile-interactive-1-rg,
+  .mobile-interactive-1-lt,
+  .mobile-interactive-1-md {
+    font-size: 1rem; /* 16px */
+    line-height: 1.5rem; /* 24px */
+  }
+
+  .mobile-interactive-2,
+  .mobile-interactive-2-sb,
+  .mobile-interactive-2-bd,
+  .mobile-interactive-2-rg,
+  .mobile-interactive-2-lt,
+  .mobile-interactive-2-md {
+    font-size: 0.875rem; /* 14px */
+    line-height: 1.125rem; /* 18px */
+  }
+}
+
+/* Tablet-prefixed rules. use them to set the styles only in tablet viewport */
+@media (width >= 768px) and (width < 1152px) {
+  .tablet-title-1,
+  .tablet-title-1-sb,
+  .tablet-title-1-bd,
+  .tablet-title-1-rg,
+  .tablet-title-1-lt,
+  .tablet-title-1-md {
+    font-size: 4.5rem; /* 72px */
+    line-height: 5rem; /* 80px */
+  }
+
+  .tablet-title-2,
+  .tablet-title-2-sb,
+  .tablet-title-2-bd,
+  .tablet-title-2-rg,
+  .tablet-title-2-lt,
+  .tablet-title-2-md {
+    font-size: 3rem; /* 48px */
+    line-height: 3.25rem; /* 52px */
+  }
+
+  .tablet-title-3,
+  .tablet-title-3-sb,
+  .tablet-title-3-bd,
+  .tablet-title-3-rg,
+  .tablet-title-3-lt,
+  .tablet-title-3-md {
+    font-size: 2rem; /* 32px */
+    line-height: 2.75rem; /* 44px */
+  }
+
+  .tablet-title-4,
+  .tablet-title-4-sb,
+  .tablet-title-4-bd,
+  .tablet-title-4-rg,
+  .tablet-title-4-lt,
+  .tablet-title-4-md {
+    font-size: 1.75rem; /* 28px */
+    line-height: 2rem; /* 32px */
+  }
+
+  .tablet-title-5,
+  .tablet-title-5-sb,
+  .tablet-title-5-bd,
+  .tablet-title-5-rg,
+  .tablet-title-5-lt,
+  .tablet-title-5-md {
+    font-size: 1.5rem; /* 24px */
+    line-height: 1.75rem; /* 28px */
+  }
+
+  .tablet-title-6,
+  .tablet-title-6-sb,
+  .tablet-title-6-bd,
+  .tablet-title-6-rg,
+  .tablet-title-6-lt,
+  .tablet-title-6-md {
+    font-size: 1.25rem; /* 20px */
+    line-height: 1.75rem; /* 28px */
+  }
+
+  .tablet-heading-1,
+  .tablet-heading-1-sb,
+  .tablet-heading-1-bd,
+  .tablet-heading-1-rg,
+  .tablet-heading-1-lt,
+  .tablet-heading-1-md {
+    font-size: 2rem; /* 32px */
+    line-height: 2.75rem; /* 44px */
+  }
+
+  .tablet-heading-2,
+  .tablet-heading-2-sb,
+  .tablet-heading-2-bd,
+  .tablet-heading-2-rg,
+  .tablet-heading-2-lt,
+  .tablet-heading-2-md {
+    font-size: 1.75rem; /* 28px */
+    line-height: 2rem; /* 32px */
+  }
+
+  .tablet-heading-3,
+  .tablet-heading-3-sb,
+  .tablet-heading-3-bd,
+  .tablet-heading-3-rg,
+  .tablet-heading-3-lt,
+  .tablet-heading-3-md {
+    font-size: 1.5rem; /* 24px */
+    line-height: 1.75rem; /* 28px */
+  }
+
+  .tablet-heading-4,
+  .tablet-heading-4-sb,
+  .tablet-heading-4-bd,
+  .tablet-heading-4-rg,
+  .tablet-heading-4-lt,
+  .tablet-heading-4-md {
+    font-size: 1.125rem; /* 18px */
+    line-height: 1.375rem; /* 22px */
+  }
+
+  .tablet-body-1,
+  .tablet-body-1-sb,
+  .tablet-body-1-bd,
+  .tablet-body-1-rg,
+  .tablet-body-1-lt,
+  .tablet-body-1-md {
+    font-size: 1.5rem; /* 24px */
+    line-height: 2rem; /* 32px */
+  }
+
+  .tablet-body-2,
+  .tablet-body-2-sb,
+  .tablet-body-2-bd,
+  .tablet-body-2-rg,
+  .tablet-body-2-lt,
+  .tablet-body-2-md {
+    font-size: 1.25rem; /* 20px */
+    line-height: 1.75rem; /* 28px */
+  }
+
+  .tablet-body-3,
+  .tablet-body-3-sb,
+  .tablet-body-3-bd,
+  .tablet-body-3-rg,
+  .tablet-body-3-lt,
+  .tablet-body-3-md {
+    font-size: 1.125rem; /* 18px */
+    line-height: 1.5rem; /* 24px */
+  }
+
+  .tablet-body-4,
+  .tablet-body-4-sb,
+  .tablet-body-4-bd,
+  .tablet-body-4-rg,
+  .tablet-body-4-lt,
+  .tablet-body-4-md {
+    font-size: 1rem; /* 16px */
+    line-height: 1.5rem; /* 24px */
+  }
+
+  .tablet-body-5,
+  .tablet-body-5-sb,
+  .tablet-body-5-bd,
+  .tablet-body-5-rg,
+  .tablet-body-5-lt,
+  .tablet-body-5-md {
+    font-size: 0.875rem; /* 14px */
+    line-height: 1.125rem; /* 18px */
+  }
+
+  .tablet-body-6,
+  .tablet-body-6-sb,
+  .tablet-body-6-bd,
+  .tablet-body-6-rg,
+  .tablet-body-6-lt,
+  .tablet-body-6-md {
+    font-size: 0.75rem; /* 12px */
+    line-height: 1rem; /* 16px */
+  }
+
+  .tablet-body-7,
+  .tablet-body-7-sb,
+  .tablet-body-7-bd,
+  .tablet-body-7-rg,
+  .tablet-body-7-lt,
+  .tablet-body-7-md {
+    font-size: 0.625rem; /* 10px */
+    line-height: 0.875rem; /* 14px */
+  }
+
+  .tablet-interactive-1,
+  .tablet-interactive-1-sb,
+  .tablet-interactive-1-bd,
+  .tablet-interactive-1-rg,
+  .tablet-interactive-1-lt,
+  .tablet-interactive-1-md {
+    font-size: 1rem; /* 16px */
+    line-height: 1.5rem; /* 24px */
+  }
+
+  .tablet-interactive-2,
+  .tablet-interactive-2-sb,
+  .tablet-interactive-2-bd,
+  .tablet-interactive-2-rg,
+  .tablet-interactive-2-lt,
+  .tablet-interactive-2-md {
+    font-size: 0.875rem; /* 14px */
+    line-height: 1.125rem; /* 18px */
+  }
+}
+
+/* Desktop-prefixed rules. use them to set the styles only in desktop viewport */
+@media (width >= 1152px) {
+  .desktop-title-1,
+  .desktop-title-1-sb,
+  .desktop-title-1-bd,
+  .desktop-title-1-rg,
+  .desktop-title-1-lt,
+  .desktop-title-1-md {
+    font-size: 4.5rem; /* 72px */
+    line-height: 5rem; /* 80px */
+  }
+
+  .desktop-title-2,
+  .desktop-title-2-sb,
+  .desktop-title-2-bd,
+  .desktop-title-2-rg,
+  .desktop-title-2-lt,
+  .desktop-title-2-md {
+    font-size: 3rem; /* 48px */
+    line-height: 3.25rem; /* 52px */
+  }
+
+  .desktop-title-3,
+  .desktop-title-3-sb,
+  .desktop-title-3-bd,
+  .desktop-title-3-rg,
+  .desktop-title-3-lt,
+  .desktop-title-3-md {
+    font-size: 2rem; /* 32px */
+    line-height: 2.75rem; /* 44px */
+  }
+
+  .desktop-title-4,
+  .desktop-title-4-sb,
+  .desktop-title-4-bd,
+  .desktop-title-4-rg,
+  .desktop-title-4-lt,
+  .desktop-title-4-md {
+    font-size: 1.75rem; /* 28px */
+    line-height: 2rem; /* 32px */
+  }
+
+  .desktop-title-5,
+  .desktop-title-5-sb,
+  .desktop-title-5-bd,
+  .desktop-title-5-rg,
+  .desktop-title-5-lt,
+  .desktop-title-5-md {
+    font-size: 1.5rem; /* 24px */
+    line-height: 1.75rem; /* 28px */
+  }
+
+  .desktop-title-6,
+  .desktop-title-6-sb,
+  .desktop-title-6-bd,
+  .desktop-title-6-rg,
+  .desktop-title-6-lt,
+  .desktop-title-6-md {
+    font-size: 1.25rem; /* 20px */
+    line-height: 1.75rem; /* 28px */
+  }
+
+  .desktop-heading-1,
+  .desktop-heading-1-sb,
+  .desktop-heading-1-bd,
+  .desktop-heading-1-rg,
+  .desktop-heading-1-lt,
+  .desktop-heading-1-md {
+    font-size: 2rem; /* 32px */
+    line-height: 2.75rem; /* 44px */
+  }
+
+  .desktop-heading-2,
+  .desktop-heading-2-sb,
+  .desktop-heading-2-bd,
+  .desktop-heading-2-rg,
+  .desktop-heading-2-lt,
+  .desktop-heading-2-md {
+    font-size: 1.75rem; /* 28px */
+    line-height: 2rem; /* 32px */
+  }
+
+  .desktop-heading-3,
+  .desktop-heading-3-sb,
+  .desktop-heading-3-bd,
+  .desktop-heading-3-rg,
+  .desktop-heading-3-lt,
+  .desktop-heading-3-md {
+    font-size: 1.5rem; /* 24px */
+    line-height: 1.75rem; /* 28px */
+  }
+
+  .desktop-heading-4,
+  .desktop-heading-4-sb,
+  .desktop-heading-4-bd,
+  .desktop-heading-4-rg,
+  .desktop-heading-4-lt,
+  .desktop-heading-4-md {
+    font-size: 1.125rem; /* 18px */
+    line-height: 1.375rem; /* 22px */
+  }
+
+  .desktop-body-1,
+  .desktop-body-1-sb,
+  .desktop-body-1-bd,
+  .desktop-body-1-rg,
+  .desktop-body-1-lt,
+  .desktop-body-1-md {
+    font-size: 1.5rem; /* 24px */
+    line-height: 2rem; /* 32px */
+  }
+
+  .desktop-body-2,
+  .desktop-body-2-sb,
+  .desktop-body-2-bd,
+  .desktop-body-2-rg,
+  .desktop-body-2-lt,
+  .desktop-body-2-md {
+    font-size: 1.25rem; /* 20px */
+    line-height: 1.75rem; /* 28px */
+  }
+
+  .desktop-body-3,
+  .desktop-body-3-sb,
+  .desktop-body-3-bd,
+  .desktop-body-3-rg,
+  .desktop-body-3-lt,
+  .desktop-body-3-md {
+    font-size: 1.125rem; /* 18px */
+    line-height: 1.5rem; /* 24px */
+  }
+
+  .desktop-body-4,
+  .desktop-body-4-sb,
+  .desktop-body-4-bd,
+  .desktop-body-4-rg,
+  .desktop-body-4-lt,
+  .desktop-body-4-md {
+    font-size: 1rem; /* 16px */
+    line-height: 1.5rem; /* 24px */
+  }
+
+  .desktop-body-5,
+  .desktop-body-5-sb,
+  .desktop-body-5-bd,
+  .desktop-body-5-rg,
+  .desktop-body-5-lt,
+  .desktop-body-5-md {
+    font-size: 0.875rem; /* 14px */
+    line-height: 1.125rem; /* 18px */
+  }
+
+  .desktop-body-6,
+  .desktop-body-6-sb,
+  .desktop-body-6-bd,
+  .desktop-body-6-rg,
+  .desktop-body-6-lt,
+  .desktop-body-6-md {
+    font-size: 0.75rem; /* 12px */
+    line-height: 1rem; /* 16px */
+  }
+
+  .desktop-body-7,
+  .desktop-body-7-sb,
+  .desktop-body-7-bd,
+  .desktop-body-7-rg,
+  .desktop-body-7-lt,
+  .desktop-body-7-md {
+    font-size: 0.625rem; /* 10px */
+    line-height: 0.875rem; /* 14px */
+  }
+
+  .desktop-interactive-1,
+  .desktop-interactive-1-sb,
+  .desktop-interactive-1-bd,
+  .desktop-interactive-1-rg,
+  .desktop-interactive-1-lt,
+  .desktop-interactive-1-md {
+    font-size: 1rem; /* 16px */
+    line-height: 1.5rem; /* 24px */
+  }
+
+  .desktop-interactive-2,
+  .desktop-interactive-2-sb,
+  .desktop-interactive-2-bd,
+  .desktop-interactive-2-rg,
+  .desktop-interactive-2-lt,
+  .desktop-interactive-2-md {
+    font-size: 0.875rem; /* 14px */
+    line-height: 1.125rem; /* 18px */
+  }
+}
+
+z-button.zanit-button {
+  --color-primary01: var(--red500);
+  --color-hover-primary: var(--red800);
+  --color-pressed-primary: var(--red400);
+  --color-button-secondary: transparent;
+  --color-primary02: transparent;
+  --color-primary03: transparent;
+}
+
+z-button.zanit-button-dark {
+  --color-primary01: var(--gray950);
+  --color-hover-primary: #000;
+  --color-pressed-primary: var(--gray950);
+  --color-button-secondary: transparent;
+  --color-primary02: transparent;
+  --color-primary03: transparent;
+}
+
+
+:root {
+  --zanit-accent-color: #ffe74c;
+
+  /* albe overrides */
+  --shadow-focus-primary: 0 0 0 2px #fff, 0 0 2px 5px var(--gray950);
+}
+
+.zanit-link,
+.zanit-link-inverse {
+  color: currentcolor;
+  font-family: inherit;
+  text-decoration: underline solid 12% var(--red500);
+  text-underline-offset: 28%;
+}
+
+.zanit-link-inverse {
+  color: var(--color-text-inverse);
+  text-decoration-color: var(--color-text-inverse);
+}