:root { --bricks-color-grey-100: #f5f5f5; --bricks-color-grey-300: #e0e0e0; --bricks-color-grey-500: #9e9e9e; --bricks-color-grey-700: #616161; --bricks-color-grey-800: #424242; --bricks-color-grey-900: #212121; --bricks-color-yellow: #ffeb3b; --bricks-color-amber: #ffc107; --bricks-color-orange: #ff9800; --bricks-color-deep-orange: #ff5722; --bricks-color-red: #f44336; --bricks-color-purple: #9c27b0; --bricks-color-blue: #2196f3; --bricks-color-light-blue: #03a9f4; --bricks-color-sky-blue: #81D4FA; --bricks-color-green: #4caf50; --bricks-color-light-green: #8bc34a; --bricks-color-lime: #cddc39; --rams-1: #fdfcfe; --rams-2: #f9f8fb; --rams-3: #f2f0f4; --rams-4: #eae8ee; --rams-5: #e4e1e8; --rams-6: #dad8de; --rams-7: #c7c6cb; --rams-8: #b9b8be; --rams-9: #88888f; --rams-10: #7f7f87; --rams-11: #66676b; --rams-12: #54565c; --rams-13: #44454a; --rams-14: #34363b; --rams-15: #232529; --rams-16: #181b1f; --ui-1: var(--rams-1); --ui-2: var(--rams-2); --ui-3: var(--rams-3); --ui-4: var(--rams-4); --ui-5: var(--rams-5); --ui-6: var(--rams-6); --ui-7: var(--rams-7); --ui-8: var(--rams-8); --ui-9: var(--rams-9); --ui-10: var(--rams-10); --ui-11: var(--rams-11); --ui-12: var(--rams-12); --ui-13: var(--rams-13); --ui-14: var(--rams-14); --ui-16: var(--rams-16); --ui-15: var(--rams-15); --ui-white: hsl(0, 0%, 100%); --ui-white-t-1: hsla(0, 0%, 100%, 0); --ui-white-t-2: hsla(0, 0%, 100%, 0.15); --ui-white-t-3: hsla(0, 0%, 100%, 0.23); --ui-white-t-4: hsla(0, 0%, 100%, 0.31); --ui-white-t-5: hsla(0, 0%, 100%, 0.38); --ui-white-t-6: hsla(0, 0%, 100%, 0.46); --ui-white-t-7: hsla(0, 0%, 100%, 0.54); --ui-white-t-8: hsla(0, 0%, 100%, 0.62); --ui-white-t-9: hsla(0, 0%, 100%, 0.69); --ui-white-t-10: hsla(0, 0%, 100%, 0.77); --ui-white-t-11: hsla(0, 0%, 100%, 0.85); --ui-white-t-12: hsla(0, 0%, 100%, 0.92); --ui-black: hsl(0, 0%, 0%); --ui-black-t-1: hsla(0, 0%, 0%, 0); --ui-black-t-2: hsla(0, 0%, 0%, 0.15); --ui-black-t-3: hsla(0, 0%, 0%, 0.23); --ui-black-t-4: hsla(0, 0%, 0%, 0.31); --ui-black-t-5: hsla(0, 0%, 0%, 0.38); --ui-black-t-6: hsla(0, 0%, 0%, 0.46); --ui-black-t-7: hsla(0, 0%, 0%, 0.54); --ui-black-t-8: hsla(0, 0%, 0%, 0.62); --ui-black-t-9: hsla(0, 0%, 0%, 0.69); --ui-black-t-10: hsla(0, 0%, 0%, 0.77); --ui-black-t-11: hsla(0, 0%, 0%, 0.85); --ui-black-t-12: hsla(0, 0%, 0%, 0.92); --ui-transparent: hsla(0, 0%, 0%, 0); --primary: #3183b0; --secondary: #ffc53d; --secondary-l-1: #e2a336; --secondary-l-2: #e9c162; --secondary-l-3: #f3d673; --secondary-l-4: #fbe577; --secondary-l-5: #ffee9c; --secondary-l-6: #fff7c2; --secondary-l-7: #fefbe9; --secondary-l-8: #fefdfb; --secondary-d-1: #ffba18; --secondary-d-2: #ab6400; --secondary-d-3: #7c4b1f; --secondary-d-4: #4f3422; --secondary-d-5: #302008; --secondary-d-6: #1d180f; --secondary-d-7: #16120c; --primary-l-1: #6fb2cf; --primary-l-2: #98c8dd; --primary-l-3: #b2d8e9; --primary-l-4: #c6e5f1; --primary-l-5: #d7eef6; --primary-l-6: #e6f4f9; --primary-l-7: #f4fafc; --primary-l-8: #fbfdfe; --primary-d-1: #2878a3; --primary-d-2: #156891; --primary-d-3: #1c4f6d; --primary-d-4: #1b384b; --primary-d-5: #162f40; --primary-d-6: #0f1f2b; --primary-d-7: #070d14; --space-4xs: clamp(0.33rem, calc(-0.00044444444444444485 * (100vw - 22.5rem) + 0.33rem), 0.3rem); --space-3xs: clamp(0.41rem, calc(-0.00014814814814814747 * (100vw - 22.5rem) + 0.41rem), 0.4rem); --space-2xs: clamp(0.51rem, calc(0.00029629629629629656 * (100vw - 22.5rem) + 0.51rem), 0.53rem); --space-xs: clamp(0.64rem, calc(0.0008888888888888881 * (100vw - 22.5rem) + 0.64rem), 0.7rem); --space-s: clamp(0.8rem, calc(0.002074074074074073 * (100vw - 22.5rem) + 0.8rem), 0.94rem); --space-m: clamp(1rem, calc(0.003703703703703704 * (100vw - 22.5rem) + 1rem), 1.25rem); --space-l: clamp(1.25rem, calc(0.006222222222222221 * (100vw - 22.5rem) + 1.25rem), 1.67rem); --space-xl: clamp(1.56rem, calc(0.00977777777777778 * (100vw - 22.5rem) + 1.56rem), 2.22rem); --space-2xl: clamp(1.95rem, calc(0.014962962962962963 * (100vw - 22.5rem) + 1.95rem), 2.96rem); --space-3xl: clamp(2.44rem, calc(0.022370370370370374 * (100vw - 22.5rem) + 2.44rem), 3.95rem); --space-4xl: clamp(3.05rem, calc(0.03274074074074074 * (100vw - 22.5rem) + 3.05rem), 5.26rem); --space-5xl: clamp(3.81rem, calc(0.047407407407407405 * (100vw - 22.5rem) + 3.81rem), 7.01rem); --text-xs: clamp(0.63rem, calc(0 * (100vw - 22.5rem) + 0.63rem), 0.63rem); --text-s: clamp(0.75rem, calc(0.0008888888888888897 * (100vw - 22.5rem) + 0.75rem), 0.81rem); --text-m: clamp(0.94rem, calc(0.0008888888888888897 * (100vw - 22.5rem) + 0.94rem), 1rem); --text-l: clamp(1.17rem, calc(0.0023703703703703725 * (100vw - 22.5rem) + 1.17rem), 1.33rem); --text-xl: clamp(1.47rem, calc(0.004592592592592593 * (100vw - 22.5rem) + 1.47rem), 1.78rem); --text-2xl: clamp(1.83rem, calc(0.008 * (100vw - 22.5rem) + 1.83rem), 2.37rem); --text-3xl: clamp(2.29rem, calc(0.01288888888888889 * (100vw - 22.5rem) + 2.29rem), 3.16rem); --text-4xl: clamp(2.86rem, calc(0.02 * (100vw - 22.5rem) + 2.86rem), 4.21rem);}.bg-ui-1 { background-color: var(--ui-1); }.bg-ui-2 { background-color: var(--ui-2); }.bg-ui-3 { background-color: var(--ui-3); }.bg-ui-4 { background-color: var(--ui-4); }.bg-ui-5 { background-color: var(--ui-5); }.border-ui-6 { border-color: var(--ui-6); }.border-ui-7 { border-color: var(--ui-7); }.border-ui-8 { border-color: var(--ui-8); }.outline-ui-8 { outline-color: var(--ui-8); }.fill-ui-9 { fill: var(--ui-9); }.bg-ui-9 { background-color: var(--ui-9); }.fill-ui-10 { fill: var(--ui-10); }.bg-ui-10 { background-color: var(--ui-10); }.text-ui-11 { color: var(--ui-11); }.text-ui-12 { color: var(--ui-12); }.text-ui-16 { color: var(--ui-16); }