html{ scroll-behavior: smooth; font-size:62.5%;} html { font-size: 62.5%; } html.cf-theme-dark { color-scheme: dark; } .btn { display: flex; align-items: center; justify-content: center; gap: var(--space-3xs); padding: var(--space-xs) var(--space-s); background: var(--primary); color: #fff; font-size: var(--text-m); font-weight: 600; border-radius: var(--radius-m); border: 1px solid var(--primary-d-1); box-shadow: var(--shadow-m); transition: all 0.25s ease-in-out; outline: 0; cursor: pointer; } .btn:hover { background: var(--primary-d-1); transform: translateY(-0.1rem); } .btn.small { font-size: var(--text-s); padding: var(--space-xs) var(--space-s); } .btn.large { font-size: var(--text-l); padding: var(--space-s) var(--space-m); } .btn.tertiary { background: var(--tertiary); border-color: var(--tertiary-d-1); } .btn.ghost { color: var(--dark-80); background: transparent; border-color: transparent; box-shadow: none; } .btn.slight { color: var(--dark-80); background: var(--bg-surface); border-color: var(--border-primary); box-shadow: var(--shadow-s); } .btn.secondary { background: var(--secondary); border-color: var(--secondary-d-1); } .btn.ghost:hover { background: var(--dark-10); } .btn.slight:hover { background: var(--dark-5); } .btn.tertiary:hover { background: var(--tertiary-d-1); } .btn.secondary:hover { background: var(--secondary-d-1); } .btn:focus { outline: 4px solid var(--primary-l-3); outline-offset: 2px; } .btn.no-bg { color: var(--dark-80); background: transparent; box-shadow: none; border-color: transparent; } .btn.no-bg:hover { color: var(--dark); } .badge { display: flex; align-items: center; justify-content: center; gap: var(--space-4xs); padding: var(--space-2xs) var(--space-s); background: var(--dark-10); color: var(--primary); font-size: var(--text-s); font-weight: 500; border-radius: var(--radius-full); border: 0; outline: 0; } .badge.secondary { color: var(--secondary); } .link { color: var(--primary); font-size: var(--text-m); font-weight: 600; letter-spacing: 0.05rem; box-shadow: 0 2px 0 var(--primary-20); -webkit-text-decoration: none; text-decoration: none; transition: all 0.15s ease-in-out; } .link:hover { box-shadow: 0 2px 0 var(--primary-40); } .link:focus { background: var(--primary-10); } .link.secondary { color: var(--secondary); border-color: var(--secondary-20); } .link.tertiary { color: var(--tertiary); border-color: var(--tertiary-20); } .input { padding: var(--space-xs) var(--space-s); background: var(--dark-5); color: var(--text-title); font-size: var(--text-m); font-weight: 500; border-radius: var(--radius-m); border: 1px solid var(--border-primary); box-shadow: var(--shadow-xs); transition: all 0.25s ease-in-out; appearance: none; outline: 0; } .input:focus { background: var(--primary-20); border-color: var(--primary); box-shadow: var(--shadow-l); } .input:hover { border-color: var(--primary); background: transparent; box-shadow: var(--shadow-l); } .input::placeholder { color: var(--dark-40); } .input:invalid { border-color: var(--error); background: var(--error-10); } .input:disabled { cursor: not-allowed; opacity: .75; box-shadow: none; background: var(--dark-10); } .select { padding: var(--space-xs) var(--space-s); background: var(--dark-5); color: var(--text-body); font-size: var(--text-m); font-weight: 500; border-radius: var(--radius-m); border: 1px solid var(--border-primary); box-shadow: var(--shadow-xs); transition: all 0.25s ease-in-out; outline: 0; } .select:focus { background: var(--primary-20); border-color: var(--primary); } .select:hover { border-color: var(--primary); } .select::placeholder { color: var(--dark-40); } .select:invalid { border-color: var(--error); background: var(--error-10); } .select:disabled { cursor: not-allowed; opacity: .75; box-shadow: none; background: var(--dark-10); } .card { display: grid; gap: var(--space-xs); padding: var(--space-m); font-size: var(--text-m); color: var(--text-body); background: var(--bg-surface); line-height: 1.3; border-radius: var(--radius-m); box-shadow: var(--shadow-m); } .card.secondary { background: var(--secondary); color: #fff; } .card.primary { background: var(--primary); color: #fff; } .icon { color: var(--primary); width: var(--space-2xl); height: auto; font-size: var(--space-2xl); } .icon.large { width: var(--space-3xl); font-size: var(--space-3xl); } .icon.secondary { color: var(--secondary); } .icon.tertiary { color: var(--tertiary); } .icon.outline { padding: 0.5em; border: 1px solid var(--border-primary); border-radius: 100%; box-sizing: content-box; } .icon.filled { padding: 0.5em; border-radius: 100%; box-sizing: content-box; background: var(--dark-10); } .icon.small { width: var(--space-l); font-size: var(--space-l); } .avatar { width: var(--space-2xl); height: var(--space-2xl); border-radius: 100%; box-shadow: var(--shadow-m); object-fit: cover; } .avatar.small { width: var(--space-l); height: var(--space-l); } .avatar.large { width: var(--space-4xl); height: var(--space-4xl); } .divider { min-width: 100%; width: 100%; max-width: 100%; min-height: 1px; height: 1px; max-height: 1px; background: var(--border-primary); margin: var(--space-m) 0; border: 0; } .divider.vertical { min-width: 1px; width: 1px; max-width: 1px; min-height: 100%; height: 100%; max-height: 100%; } .checkbox { appearance: none; display: grid; place-content: center; border: 2px solid var(--dark-40); border-radius: var(--radius-s); width: clamp(1.8rem, calc(-0.51vw + 2.36rem), 2.2rem); height: clamp(1.8rem, calc(-0.51vw + 2.36rem), 2.2rem); } .checkbox:checked:before { transform: scale(1); } .checkbox::before { content: ""; width: 1em; height: 1em; box-shadow: inset 1em 1em #fff; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transition: transform 0.2s; } .checkbox:hover { border-color: var(--primary); } .checkbox:focus { outline: 3px solid var(--primary-l-3); outline-offset: 2px; } .checkbox:checked { background: var(--primary); border-color: var(--primary); } .radio { appearance: none; display: grid; place-content: center; border: 2px solid var(--dark-40); border-radius: var(--radius-full); width: clamp(1.8rem, calc(-0.51vw + 2.36rem), 2.2rem); height: clamp(1.8rem, calc(-0.51vw + 2.36rem), 2.2rem); } .radio:checked:before { transform: scale(1); } .radio::before { content: ""; width: 1em; height: 1em; border-radius: 100%; transform: scale(0); transition: transform 0.2s; background: var(--primary); } .radio:hover { border-color: var(--primary); } .radio:focus { outline: 3px solid var(--primary-l-3); outline-offset: 2px; } .radio:checked { border-color: var(--primary); } .bg-primary { background-color: var(--primary); } .bg-primary-5 { background-color: var(--primary-5); } .bg-primary-10 { background-color: var(--primary-10); } .bg-primary-20 { background-color: var(--primary-20); } .bg-primary-30 { background-color: var(--primary-30); } .bg-primary-40 { background-color: var(--primary-40); } .bg-primary-50 { background-color: var(--primary-50); } .bg-primary-60 { background-color: var(--primary-60); } .bg-primary-70 { background-color: var(--primary-70); } .bg-primary-80 { background-color: var(--primary-80); } .bg-primary-90 { background-color: var(--primary-90); } .bg-primary-d-1 { background-color: var(--primary-d-1); } .bg-primary-d-2 { background-color: var(--primary-d-2); } .bg-primary-d-3 { background-color: var(--primary-d-3); } .bg-primary-d-4 { background-color: var(--primary-d-4); } .bg-primary-l-1 { background-color: var(--primary-l-1); } .bg-primary-l-2 { background-color: var(--primary-l-2); } .bg-primary-l-3 { background-color: var(--primary-l-3); } .bg-primary-l-4 { background-color: var(--primary-l-4); } .text-primary { color: var(--primary); } .text-primary-5 { color: var(--primary-5); } .text-primary-10 { color: var(--primary-10); } .text-primary-20 { color: var(--primary-20); } .text-primary-30 { color: var(--primary-30); } .text-primary-40 { color: var(--primary-40); } .text-primary-50 { color: var(--primary-50); } .text-primary-60 { color: var(--primary-60); } .text-primary-70 { color: var(--primary-70); } .text-primary-80 { color: var(--primary-80); } .text-primary-90 { color: var(--primary-90); } .text-primary-d-1 { color: var(--primary-d-1); } .text-primary-d-2 { color: var(--primary-d-2); } .text-primary-d-3 { color: var(--primary-d-3); } .text-primary-d-4 { color: var(--primary-d-4); } .text-primary-l-1 { color: var(--primary-l-1); } .text-primary-l-2 { color: var(--primary-l-2); } .text-primary-l-3 { color: var(--primary-l-3); } .text-primary-l-4 { color: var(--primary-l-4); } .border-primary { border-color: var(--primary); border-color: var(--border-primary); } .border-primary-5 { border-color: var(--primary-5); } .border-primary-10 { border-color: var(--primary-10); } .border-primary-20 { border-color: var(--primary-20); } .border-primary-30 { border-color: var(--primary-30); } .border-primary-40 { border-color: var(--primary-40); } .border-primary-50 { border-color: var(--primary-50); } .border-primary-60 { border-color: var(--primary-60); } .border-primary-70 { border-color: var(--primary-70); } .border-primary-80 { border-color: var(--primary-80); } .border-primary-90 { border-color: var(--primary-90); } .border-primary-d-1 { border-color: var(--primary-d-1); } .border-primary-d-2 { border-color: var(--primary-d-2); } .border-primary-d-3 { border-color: var(--primary-d-3); } .border-primary-d-4 { border-color: var(--primary-d-4); } .border-primary-l-1 { border-color: var(--primary-l-1); } .border-primary-l-2 { border-color: var(--primary-l-2); } .border-primary-l-3 { border-color: var(--primary-l-3); } .border-primary-l-4 { border-color: var(--primary-l-4); } .bg-secondary { background-color: var(--secondary); } .bg-secondary-5 { background-color: var(--secondary-5); } .bg-secondary-10 { background-color: var(--secondary-10); } .bg-secondary-20 { background-color: var(--secondary-20); } .bg-secondary-30 { background-color: var(--secondary-30); } .bg-secondary-40 { background-color: var(--secondary-40); } .bg-secondary-50 { background-color: var(--secondary-50); } .bg-secondary-60 { background-color: var(--secondary-60); } .bg-secondary-70 { background-color: var(--secondary-70); } .bg-secondary-80 { background-color: var(--secondary-80); } .bg-secondary-90 { background-color: var(--secondary-90); } .bg-secondary-d-1 { background-color: var(--secondary-d-1); } .bg-secondary-d-2 { background-color: var(--secondary-d-2); } .bg-secondary-d-3 { background-color: var(--secondary-d-3); } .bg-secondary-d-4 { background-color: var(--secondary-d-4); } .bg-secondary-l-1 { background-color: var(--secondary-l-1); } .bg-secondary-l-2 { background-color: var(--secondary-l-2); } .bg-secondary-l-3 { background-color: var(--secondary-l-3); } .bg-secondary-l-4 { background-color: var(--secondary-l-4); } .text-secondary { color: var(--secondary); } .text-secondary-5 { color: var(--secondary-5); } .text-secondary-10 { color: var(--secondary-10); } .text-secondary-20 { color: var(--secondary-20); } .text-secondary-30 { color: var(--secondary-30); } .text-secondary-40 { color: var(--secondary-40); } .text-secondary-50 { color: var(--secondary-50); } .text-secondary-60 { color: var(--secondary-60); } .text-secondary-70 { color: var(--secondary-70); } .text-secondary-80 { color: var(--secondary-80); } .text-secondary-90 { color: var(--secondary-90); } .text-secondary-d-1 { color: var(--secondary-d-1); } .text-secondary-d-2 { color: var(--secondary-d-2); } .text-secondary-d-3 { color: var(--secondary-d-3); } .text-secondary-d-4 { color: var(--secondary-d-4); } .text-secondary-l-1 { color: var(--secondary-l-1); } .text-secondary-l-2 { color: var(--secondary-l-2); } .text-secondary-l-3 { color: var(--secondary-l-3); } .text-secondary-l-4 { color: var(--secondary-l-4); } .border-secondary { border-color: var(--secondary); } .border-secondary-5 { border-color: var(--secondary-5); } .border-secondary-10 { border-color: var(--secondary-10); } .border-secondary-20 { border-color: var(--secondary-20); } .border-secondary-30 { border-color: var(--secondary-30); } .border-secondary-40 { border-color: var(--secondary-40); } .border-secondary-50 { border-color: var(--secondary-50); } .border-secondary-60 { border-color: var(--secondary-60); } .border-secondary-70 { border-color: var(--secondary-70); } .border-secondary-80 { border-color: var(--secondary-80); } .border-secondary-90 { border-color: var(--secondary-90); } .border-secondary-d-1 { border-color: var(--secondary-d-1); } .border-secondary-d-2 { border-color: var(--secondary-d-2); } .border-secondary-d-3 { border-color: var(--secondary-d-3); } .border-secondary-d-4 { border-color: var(--secondary-d-4); } .border-secondary-l-1 { border-color: var(--secondary-l-1); } .border-secondary-l-2 { border-color: var(--secondary-l-2); } .border-secondary-l-3 { border-color: var(--secondary-l-3); } .border-secondary-l-4 { border-color: var(--secondary-l-4); } .bg-tertiary { background-color: var(--tertiary); } .bg-tertiary-5 { background-color: var(--tertiary-5); } .bg-tertiary-10 { background-color: var(--tertiary-10); } .bg-tertiary-20 { background-color: var(--tertiary-20); } .bg-tertiary-30 { background-color: var(--tertiary-30); } .bg-tertiary-40 { background-color: var(--tertiary-40); } .bg-tertiary-50 { background-color: var(--tertiary-50); } .bg-tertiary-60 { background-color: var(--tertiary-60); } .bg-tertiary-70 { background-color: var(--tertiary-70); } .bg-tertiary-80 { background-color: var(--tertiary-80); } .bg-tertiary-90 { background-color: var(--tertiary-90); } .bg-tertiary-d-1 { background-color: var(--tertiary-d-1); } .bg-tertiary-d-2 { background-color: var(--tertiary-d-2); } .bg-tertiary-d-3 { background-color: var(--tertiary-d-3); } .bg-tertiary-d-4 { background-color: var(--tertiary-d-4); } .bg-tertiary-l-1 { background-color: var(--tertiary-l-1); } .bg-tertiary-l-2 { background-color: var(--tertiary-l-2); } .bg-tertiary-l-3 { background-color: var(--tertiary-l-3); } .bg-tertiary-l-4 { background-color: var(--tertiary-l-4); } .text-tertiary { color: var(--tertiary); } .text-tertiary-5 { color: var(--tertiary-5); } .text-tertiary-10 { color: var(--tertiary-10); } .text-tertiary-20 { color: var(--tertiary-20); } .text-tertiary-30 { color: var(--tertiary-30); } .text-tertiary-40 { color: var(--tertiary-40); } .text-tertiary-50 { color: var(--tertiary-50); } .text-tertiary-60 { color: var(--tertiary-60); } .text-tertiary-70 { color: var(--tertiary-70); } .text-tertiary-80 { color: var(--tertiary-80); } .text-tertiary-90 { color: var(--tertiary-90); } .text-tertiary-d-1 { color: var(--tertiary-d-1); } .text-tertiary-d-2 { color: var(--tertiary-d-2); } .text-tertiary-d-3 { color: var(--tertiary-d-3); } .text-tertiary-d-4 { color: var(--tertiary-d-4); } .text-tertiary-l-1 { color: var(--tertiary-l-1); } .text-tertiary-l-2 { color: var(--tertiary-l-2); } .text-tertiary-l-3 { color: var(--tertiary-l-3); } .text-tertiary-l-4 { color: var(--tertiary-l-4); } .border-tertiary { border-color: var(--tertiary); } .border-tertiary-5 { border-color: var(--tertiary-5); } .border-tertiary-10 { border-color: var(--tertiary-10); } .border-tertiary-20 { border-color: var(--tertiary-20); } .border-tertiary-30 { border-color: var(--tertiary-30); } .border-tertiary-40 { border-color: var(--tertiary-40); } .border-tertiary-50 { border-color: var(--tertiary-50); } .border-tertiary-60 { border-color: var(--tertiary-60); } .border-tertiary-70 { border-color: var(--tertiary-70); } .border-tertiary-80 { border-color: var(--tertiary-80); } .border-tertiary-90 { border-color: var(--tertiary-90); } .border-tertiary-d-1 { border-color: var(--tertiary-d-1); } .border-tertiary-d-2 { border-color: var(--tertiary-d-2); } .border-tertiary-d-3 { border-color: var(--tertiary-d-3); } .border-tertiary-d-4 { border-color: var(--tertiary-d-4); } .border-tertiary-l-1 { border-color: var(--tertiary-l-1); } .border-tertiary-l-2 { border-color: var(--tertiary-l-2); } .border-tertiary-l-3 { border-color: var(--tertiary-l-3); } .border-tertiary-l-4 { border-color: var(--tertiary-l-4); } .bg-body { background-color: var(--bg-body); } .bg-surface { background-color: var(--bg-surface); } .text-body { color: var(--text-body); } .text-title { color: var(--text-title); } .bg-light { background-color: var(--light); } .bg-light-5 { background-color: var(--light-5); } .bg-light-10 { background-color: var(--light-10); } .bg-light-20 { background-color: var(--light-20); } .bg-light-30 { background-color: var(--light-30); } .bg-light-40 { background-color: var(--light-40); } .bg-light-50 { background-color: var(--light-50); } .bg-light-60 { background-color: var(--light-60); } .bg-light-70 { background-color: var(--light-70); } .bg-light-80 { background-color: var(--light-80); } .bg-light-90 { background-color: var(--light-90); } .text-light { color: var(--light); } .text-light-5 { color: var(--light-5); } .text-light-10 { color: var(--light-10); } .text-light-20 { color: var(--light-20); } .text-light-30 { color: var(--light-30); } .text-light-40 { color: var(--light-40); } .text-light-50 { color: var(--light-50); } .text-light-60 { color: var(--light-60); } .text-light-70 { color: var(--light-70); } .text-light-80 { color: var(--light-80); } .text-light-90 { color: var(--light-90); } .border-light { border-color: var(--light); } .border-light-5 { border-color: var(--light-5); } .border-light-10 { border-color: var(--light-10); } .border-light-20 { border-color: var(--light-20); } .border-light-30 { border-color: var(--light-30); } .border-light-40 { border-color: var(--light-40); } .border-light-50 { border-color: var(--light-50); } .border-light-60 { border-color: var(--light-60); } .border-light-70 { border-color: var(--light-70); } .border-light-80 { border-color: var(--light-80); } .border-light-90 { border-color: var(--light-90); } .bg-dark { background-color: var(--dark); } .bg-dark-5 { background-color: var(--dark-5); } .bg-dark-10 { background-color: var(--dark-10); } .bg-dark-20 { background-color: var(--dark-20); } .bg-dark-30 { background-color: var(--dark-30); } .bg-dark-40 { background-color: var(--dark-40); } .bg-dark-50 { background-color: var(--dark-50); } .bg-dark-60 { background-color: var(--dark-60); } .bg-dark-70 { background-color: var(--dark-70); } .bg-dark-80 { background-color: var(--dark-80); } .bg-dark-90 { background-color: var(--dark-90); } .text-dark { color: var(--dark); } .text-dark-5 { color: var(--dark-5); } .text-dark-10 { color: var(--dark-10); } .text-dark-20 { color: var(--dark-20); } .text-dark-30 { color: var(--dark-30); } .text-dark-40 { color: var(--dark-40); } .text-dark-50 { color: var(--dark-50); } .text-dark-60 { color: var(--dark-60); } .text-dark-70 { color: var(--dark-70); } .text-dark-80 { color: var(--dark-80); } .text-dark-90 { color: var(--dark-90); } .border-dark { border-color: var(--dark); } .border-dark-5 { border-color: var(--dark-5); } .border-dark-10 { border-color: var(--dark-10); } .border-dark-20 { border-color: var(--dark-20); } .border-dark-30 { border-color: var(--dark-30); } .border-dark-40 { border-color: var(--dark-40); } .border-dark-50 { border-color: var(--dark-50); } .border-dark-60 { border-color: var(--dark-60); } .border-dark-70 { border-color: var(--dark-70); } .border-dark-80 { border-color: var(--dark-80); } .border-dark-90 { border-color: var(--dark-90); } .bg-success { background-color: var(--success); } .bg-success-5 { background-color: var(--success-5); } .bg-success-10 { background-color: var(--success-10); } .bg-success-20 { background-color: var(--success-20); } .bg-success-30 { background-color: var(--success-30); } .bg-success-40 { background-color: var(--success-40); } .bg-success-50 { background-color: var(--success-50); } .bg-success-60 { background-color: var(--success-60); } .bg-success-70 { background-color: var(--success-70); } .bg-success-80 { background-color: var(--success-80); } .bg-success-90 { background-color: var(--success-90); } .text-success { color: var(--success); } .text-success-5 { color: var(--success-5); } .text-success-10 { color: var(--success-10); } .text-success-20 { color: var(--success-20); } .text-success-30 { color: var(--success-30); } .text-success-40 { color: var(--success-40); } .text-success-50 { color: var(--success-50); } .text-success-60 { color: var(--success-60); } .text-success-70 { color: var(--success-70); } .text-success-80 { color: var(--success-80); } .text-success-90 { color: var(--success-90); } .border-success { border-color: var(--success); } .border-success-5 { border-color: var(--success-5); } .border-success-10 { border-color: var(--success-10); } .border-success-20 { border-color: var(--success-20); } .border-success-30 { border-color: var(--success-30); } .border-success-40 { border-color: var(--success-40); } .border-success-50 { border-color: var(--success-50); } .border-success-60 { border-color: var(--success-60); } .border-success-70 { border-color: var(--success-70); } .border-success-80 { border-color: var(--success-80); } .border-success-90 { border-color: var(--success-90); } .bg-error { background-color: var(--error); } .bg-error-5 { background-color: var(--error-5); } .bg-error-10 { background-color: var(--error-10); } .bg-error-20 { background-color: var(--error-20); } .bg-error-30 { background-color: var(--error-30); } .bg-error-40 { background-color: var(--error-40); } .bg-error-50 { background-color: var(--error-50); } .bg-error-60 { background-color: var(--error-60); } .bg-error-70 { background-color: var(--error-70); } .bg-error-80 { background-color: var(--error-80); } .bg-error-90 { background-color: var(--error-90); } .text-error { color: var(--error); } .text-error-5 { color: var(--error-5); } .text-error-10 { color: var(--error-10); } .text-error-20 { color: var(--error-20); } .text-error-30 { color: var(--error-30); } .text-error-40 { color: var(--error-40); } .text-error-50 { color: var(--error-50); } .text-error-60 { color: var(--error-60); } .text-error-70 { color: var(--error-70); } .text-error-80 { color: var(--error-80); } .text-error-90 { color: var(--error-90); } .border-error { border-color: var(--error); } .border-error-5 { border-color: var(--error-5); } .border-error-10 { border-color: var(--error-10); } .border-error-20 { border-color: var(--error-20); } .border-error-30 { border-color: var(--error-30); } .border-error-40 { border-color: var(--error-40); } .border-error-50 { border-color: var(--error-50); } .border-error-60 { border-color: var(--error-60); } .border-error-70 { border-color: var(--error-70); } .border-error-80 { border-color: var(--error-80); } .border-error-90 { border-color: var(--error-90); } .padding-4xs { padding: var(--space-4xs); } .padding-3xs { padding: var(--space-3xs); } .padding-2xs { padding: var(--space-2xs); } .padding-xs { padding: var(--space-xs); } .padding-s { padding: var(--space-s); } .padding-m { padding: var(--space-m); } .padding-l { padding: var(--space-l); } .padding-xl { padding: var(--space-xl); } .padding-2xl { padding: var(--space-2xl); } .padding-3xl { padding: var(--space-3xl); } .padding-4xl { padding: var(--space-4xl); } .padding-left-4xs { padding-left: var(--space-4xs); } .padding-left-3xs { padding-left: var(--space-3xs); } .padding-left-2xs { padding-left: var(--space-2xs); } .padding-left-xs { padding-left: var(--space-xs); } .padding-left-s { padding-left: var(--space-s); } .padding-left-m { padding-left: var(--space-m); } .padding-left-l { padding-left: var(--space-l); } .padding-left-xl { padding-left: var(--space-xl); } .padding-left-2xl { padding-left: var(--space-2xl); } .padding-left-3xl { padding-left: var(--space-3xl); } .padding-left-4xl { padding-left: var(--space-4xl); } .padding-right-4xs { padding-right: var(--space-4xs); } .padding-right-3xs { padding-right: var(--space-3xs); } .padding-right-2xs { padding-right: var(--space-2xs); } .padding-right-xs { padding-right: var(--space-xs); } .padding-right-s { padding-right: var(--space-s); } .padding-right-m { padding-right: var(--space-m); } .padding-right-l { padding-right: var(--space-l); } .padding-right-xl { padding-right: var(--space-xl); } .padding-right-2xl { padding-right: var(--space-2xl); } .padding-right-3xl { padding-right: var(--space-3xl); } .padding-right-4xl { padding-right: var(--space-4xl); } .padding-top-4xs { padding-top: var(--space-4xs); } .padding-top-3xs { padding-top: var(--space-3xs); } .padding-top-2xs { padding-top: var(--space-2xs); } .padding-top-xs { padding-top: var(--space-xs); } .padding-top-s { padding-top: var(--space-s); } .padding-top-m { padding-top: var(--space-m); } .padding-top-l { padding-top: var(--space-l); } .padding-top-xl { padding-top: var(--space-xl); } .padding-top-2xl { padding-top: var(--space-2xl); } .padding-top-3xl { padding-top: var(--space-3xl); } .padding-top-4xl { padding-top: var(--space-4xl); } .padding-bottom-4xs { padding-bottom: var(--space-4xs); } .padding-bottom-3xs { padding-bottom: var(--space-3xs); } .padding-bottom-2xs { padding-bottom: var(--space-2xs); } .padding-bottom-xs { padding-bottom: var(--space-xs); } .padding-bottom-s { padding-bottom: var(--space-s); } .padding-bottom-m { padding-bottom: var(--space-m); } .padding-bottom-l { padding-bottom: var(--space-l); } .padding-bottom-xl { padding-bottom: var(--space-xl); } .padding-bottom-2xl { padding-bottom: var(--space-2xl); } .padding-bottom-3xl { padding-bottom: var(--space-3xl); } .padding-bottom-4xl { padding-bottom: var(--space-4xl); } .padding-horizontal-4xs { padding-left: var(--space-4xs); padding-right: var(--space-4xs); } .padding-horizontal-3xs { padding-left: var(--space-3xs); padding-right: var(--space-3xs); } .padding-horizontal-2xs { padding-left: var(--space-2xs); padding-right: var(--space-2xs); } .padding-horizontal-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); } .padding-horizontal-s { padding-left: var(--space-s); padding-right: var(--space-s); } .padding-horizontal-m { padding-left: var(--space-m); padding-right: var(--space-m); } .padding-horizontal-l { padding-left: var(--space-l); padding-right: var(--space-l); } .padding-horizontal-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); } .padding-horizontal-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl); } .padding-horizontal-3xl { padding-left: var(--space-3xl); padding-right: var(--space-3xl); } .padding-horizontal-4xl { padding-left: var(--space-4xl); padding-right: var(--space-4xl); } .padding-vertical-4xs { padding-top: var(--space-4xs); padding-bottom: var(--space-4xs); } .padding-vertical-3xs { padding-top: var(--space-3xs); padding-bottom: var(--space-3xs); } .padding-vertical-2xs { padding-top: var(--space-2xs); padding-bottom: var(--space-2xs); } .padding-vertical-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); } .padding-vertical-s { padding-top: var(--space-s); padding-bottom: var(--space-s); } .padding-vertical-m { padding-top: var(--space-m); padding-bottom: var(--space-m); } .padding-vertical-l { padding-top: var(--space-l); padding-bottom: var(--space-l); } .padding-vertical-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); } .padding-vertical-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); } .padding-vertical-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); } .padding-vertical-4xl { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); } .margin-4xs { margin: var(--space-4xs); } .margin-3xs { margin: var(--space-3xs); } .margin-2xs { margin: var(--space-2xs); } .margin-xs { margin: var(--space-xs); } .margin-s { margin: var(--space-s); } .margin-m { margin: var(--space-m); } .margin-l { margin: var(--space-l); } .margin-xl { margin: var(--space-xl); } .margin-2xl { margin: var(--space-2xl); } .margin-3xl { margin: var(--space-3xl); } .margin-4xl { margin: var(--space-4xl); } .margin-left-4xs { margin-left: var(--space-4xs); } .margin-left-3xs { margin-left: var(--space-3xs); } .margin-left-2xs { margin-left: var(--space-2xs); } .margin-left-xs { margin-left: var(--space-xs); } .margin-left-s { margin-left: var(--space-s); } .margin-left-m { margin-left: var(--space-m); } .margin-left-l { margin-left: var(--space-l); } .margin-left-xl { margin-left: var(--space-xl); } .margin-left-2xl { margin-left: var(--space-2xl); } .margin-left-3xl { margin-left: var(--space-3xl); } .margin-left-4xl { margin-left: var(--space-4xl); } .margin-right-4xs { margin-right: var(--space-4xs); } .margin-right-3xs { margin-right: var(--space-3xs); } .margin-right-2xs { margin-right: var(--space-2xs); } .margin-right-xs { margin-right: var(--space-xs); } .margin-right-s { margin-right: var(--space-s); } .margin-right-m { margin-right: var(--space-m); } .margin-right-l { margin-right: var(--space-l); } .margin-right-xl { margin-right: var(--space-xl); } .margin-right-2xl { margin-right: var(--space-2xl); } .margin-right-3xl { margin-right: var(--space-3xl); } .margin-right-4xl { margin-right: var(--space-4xl); } .margin-top-4xs { margin-top: var(--space-4xs); } .margin-top-3xs { margin-top: var(--space-3xs); } .margin-top-2xs { margin-top: var(--space-2xs); } .margin-top-xs { margin-top: var(--space-xs); } .margin-top-s { margin-top: var(--space-s); } .margin-top-m { margin-top: var(--space-m); } .margin-top-l { margin-top: var(--space-l); } .margin-top-xl { margin-top: var(--space-xl); } .margin-top-2xl { margin-top: var(--space-2xl); } .margin-top-3xl { margin-top: var(--space-3xl); } .margin-top-4xl { margin-top: var(--space-4xl); } .margin-bottom-4xs { margin-bottom: var(--space-4xs); } .margin-bottom-3xs { margin-bottom: var(--space-3xs); } .margin-bottom-2xs { margin-bottom: var(--space-2xs); } .margin-bottom-xs { margin-bottom: var(--space-xs); } .margin-bottom-s { margin-bottom: var(--space-s); } .margin-bottom-m { margin-bottom: var(--space-m); } .margin-bottom-l { margin-bottom: var(--space-l); } .margin-bottom-xl { margin-bottom: var(--space-xl); } .margin-bottom-2xl { margin-bottom: var(--space-2xl); } .margin-bottom-3xl { margin-bottom: var(--space-3xl); } .margin-bottom-4xl { margin-bottom: var(--space-4xl); } .margin-horizontal-4xs { margin-left: var(--space-4xs); margin-right: var(--space-4xs); } .margin-horizontal-3xs { margin-left: var(--space-3xs); margin-right: var(--space-3xs); } .margin-horizontal-2xs { margin-left: var(--space-2xs); margin-right: var(--space-2xs); } .margin-horizontal-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); } .margin-horizontal-s { margin-left: var(--space-s); margin-right: var(--space-s); } .margin-horizontal-m { margin-left: var(--space-m); margin-right: var(--space-m); } .margin-horizontal-l { margin-left: var(--space-l); margin-right: var(--space-l); } .margin-horizontal-xl { margin-left: var(--space-xl); margin-right: var(--space-xl); } .margin-horizontal-2xl { margin-left: var(--space-2xl); margin-right: var(--space-2xl); } .margin-horizontal-3xl { margin-left: var(--space-3xl); margin-right: var(--space-3xl); } .margin-horizontal-4xl { margin-left: var(--space-4xl); margin-right: var(--space-4xl); } .margin-vertical-4xs { margin-top: var(--space-4xs); margin-bottom: var(--space-4xs); } .margin-vertical-3xs { margin-top: var(--space-3xs); margin-bottom: var(--space-3xs); } .margin-vertical-2xs { margin-top: var(--space-2xs); margin-bottom: var(--space-2xs); } .margin-vertical-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); } .margin-vertical-s { margin-top: var(--space-s); margin-bottom: var(--space-s); } .margin-vertical-m { margin-top: var(--space-m); margin-bottom: var(--space-m); } .margin-vertical-l { margin-top: var(--space-l); margin-bottom: var(--space-l); } .margin-vertical-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); } .margin-vertical-2xl { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl); } .margin-vertical-3xl { margin-top: var(--space-3xl); margin-bottom: var(--space-3xl); } .margin-vertical-4xl { margin-top: var(--space-4xl); margin-bottom: var(--space-4xl); } .gap-4xs { gap: var(--space-4xs); } .gap-3xs { gap: var(--space-3xs); } .gap-2xs { gap: var(--space-2xs); } .gap-xs { gap: var(--space-xs); } .gap-s { gap: var(--space-s); } .gap-m { gap: var(--space-m); } .gap-l { gap: var(--space-l); } .gap-xl { gap: var(--space-xl); } .gap-2xl { gap: var(--space-2xl); } .gap-3xl { gap: var(--space-3xl); } .gap-4xl { gap: var(--space-4xl); } .text-xs { font-size: var(--text-xs); } .text-s { font-size: var(--text-s); } .text-m { font-size: var(--text-m); } .text-l { font-size: var(--text-l); } .text-xl { font-size: var(--text-xl); } .text-2xl { font-size: var(--text-2xl); } .text-3xl { font-size: var(--text-3xl); } .text-4xl { font-size: var(--text-4xl); } H1 { font-size: var(--text-3xl); line-height: 1.1; } H2 { font-size: var(--text-2xl); line-height: 1.2; } H3 { font-size: var(--text-xl); line-height: 1.3; } H4 { font-size: var(--text-l); line-height: 1.3; } H5 { font-size: var(--text-m); line-height: 1.3; } H6 { font-size: var(--text-s); line-height: 1.4; } .line-height-xs { line-height: 1; } .line-height-s { line-height: 1.2; } .line-height-m { line-height: 1.3; } .line-height-l { line-height: 1.4; } .line-height-xl { line-height: 1.5; } .italic { font-style: italic; } .bold { font-weight: bold; } .lowercase { text-transform: lowercase; } .uppercase { text-transform: uppercase; } .underline { -webkit-text-decoration: underline; text-decoration: underline; } .font-100 { font-weight: 100; } .font-200 { font-weight: 200; } .font-300 { font-weight: 300; } .font-400 { font-weight: 400; } .font-500 { font-weight: 500; } .font-600 { font-weight: 600; } .font-700 { font-weight: 700; } .font-800 { font-weight: 800; } .font-900 { font-weight: 900; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .row { display: grid; grid-auto-flow: column; justify-content: start; } .column { display: grid; grid-auto-flow: row; justify-items: start; align-content: start; } .columns-2 { display: grid; grid-template-columns: var(--columns-2); } .columns-3 { display: grid; grid-template-columns: var(--columns-3); } .columns-4 { display: grid; grid-template-columns: var(--columns-4); } .columns-5 { display: grid; grid-template-columns: var(--columns-5); } .columns-6 { display: grid; grid-template-columns: var(--columns-6); } .columns-7 { display: grid; grid-template-columns: var(--columns-7); } .columns-8 { display: grid; grid-template-columns: var(--columns-8); } .columns-min-5 { display: grid; grid-template-columns: repeat(auto-fit,minmax(5rem, 1fr)); } .columns-min-10 { display: grid; grid-template-columns: repeat(auto-fit,minmax(10rem, 1fr)); } .columns-min-20 { display: grid; grid-template-columns: repeat(auto-fit,minmax(20rem, 1fr)); } .columns-min-30 { display: grid; grid-template-columns: repeat(auto-fit,minmax(30rem, 1fr)); } .columns-min-40 { display: grid; grid-template-columns: repeat(auto-fit,minmax(40rem, 1fr)); } .columns-min-50 { display: grid; grid-template-columns: repeat(auto-fit,minmax(50rem, 1fr)); } .columns-min-60 { display: grid; grid-template-columns: repeat(auto-fit,minmax(60rem, 1fr)); } .columns-min-70 { display: grid; grid-template-columns: repeat(auto-fit,minmax(70rem, 1fr)); } .flex-row { display: flex; flex-direction: row; } .flex-column { display: flex; flex-direction: column; } .flex-1 { flex: 1; } .flex-2 { flex: 2; } .flex-3 { flex: 3; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .col-span-2 { grid-column: auto / span 2; } .col-span-3 { grid-column: auto / span 3; } .col-span-4 { grid-column: auto / span 4; } .col-span-5 { grid-column: auto / span 5; } .col-span-6 { grid-column: auto / span 6; } .col-span-7 { grid-column: auto / span 7; } .col-span-8 { grid-column: auto / span 8; } .col-start-1 { grid-column-start: 1; } .col-start-2 { grid-column-start: 2; } .col-start-3 { grid-column-start: 3; } .col-start-4 { grid-column-start: 4; } .col-start-5 { grid-column-start: 5; } .col-start-6 { grid-column-start: 6; } .col-start-7 { grid-column-start: 7; } .col-start-8 { grid-column-start: 8; } .row-span-2 { grid-row: auto / span 2; } .row-span-3 { grid-row: auto / span 3; } .row-span-4 { grid-row: auto / span 4; } .row-span-5 { grid-row: auto / span 5; } .row-span-6 { grid-row: auto / span 6; } .row-span-7 { grid-row: auto / span 7; } .row-span-8 { grid-row: auto / span 8; } .row-start-1 { grid-row-start: 1; } .row-start-2 { grid-row-start: 2; } .row-start-3 { grid-row-start: 3; } .row-start-4 { grid-row-start: 4; } .row-start-5 { grid-row-start: 5; } .row-start-6 { grid-row-start: 6; } .row-start-7 { grid-row-start: 7; } .row-start-8 { grid-row-start: 8; } .items-left { justify-items: start; } .content-left { justify-content: start; } .items-center { justify-items: center; } .content-center { justify-content: center; } .items-right { justify-items: end; } .content-right { justify-content: end; } .items-top { align-items: start; } .content-top { align-content: start; } .items-middle { align-items: center; } .content-middle { align-content: center; } .items-bottom { align-items: end; } .content-bottom { align-content: end; } .items-stretch { align-items: stretch; } .content-stretch { justify-content: stretch; } .space-between { justify-content: space-between; } .space-around { justify-content: space-around; } .self-left { margin-right: auto; place-self: start; } .self-center { margin-inline: auto; place-self: center; } .self-right { margin-left: auto; place-self: end; } .self-top { margin-bottom: auto; align-self: start; } .self-middle { margin-block: auto; align-self: center; } .self-bottom { margin-top: auto; align-self: end; } .self-stretch { align-self: stretch; } .full-width { width: 100%; } .full-height { height: 100%; } .screen-width { width: 100vw; } .screen-height { height: 100vh; } .auto-width { width: auto; } .auto-height { height: auto; } .width-90 { width: 90%; } .width-80 { width: 80%; } .width-70 { width: 70%; } .width-60 { width: 60%; } .width-50 { width: 50%; } .width-40 { width: 40%; } .width-30 { width: 30%; } .width-20 { width: 20%; } .width-10 { width: 10%; } .max-site-width { max-width: var(--max-screen-width); width: 100%; } .max-width-140 { max-width: 140rem; } .max-width-130 { max-width: 130rem; } .max-width-120 { max-width: 120rem; } .max-width-110 { max-width: 110rem; } .max-width-100 { max-width: 100rem; } .max-width-90 { max-width: 90rem; } .max-width-80 { max-width: 80rem; } .max-width-70 { max-width: 70rem; } .max-width-60 { max-width: 60rem; } .max-width-50 { max-width: 50rem; } .max-width-40 { max-width: 40rem; } .max-width-30 { max-width: 30rem; } .max-width-20 { max-width: 20rem; } .max-width-10 { max-width: 10rem; } .radius-xs { border-radius: var(--radius-xs); } .radius-s { border-radius: var(--radius-s); } .radius-m { border-radius: var(--radius-m); } .radius-l { border-radius: var(--radius-l); } .radius-xl { border-radius: var(--radius-xl); } .radius-full { border-radius: var(--radius-full); } .border { border-width: 1px; border-style: solid; } .border-left { border-left-width: 1px; border-left-style: solid; } .border-right { border-right-width: 1px; border-right-style: solid; } .border-top { border-top-width: 1px; border-top-style: solid; } .border-bottom { border-bottom-width: 1px; border-bottom-style: solid; } .shadow-xs { box-shadow: var(--shadow-xs); } .shadow-s { box-shadow: var(--shadow-s); } .shadow-m { box-shadow: var(--shadow-m); } .shadow-l { box-shadow: var(--shadow-l); } .shadow-xl { box-shadow: var(--shadow-xl); } .opacity-0 { opacity: 0; } .opacity-10 { opacity: 0.1; } .opacity-20 { opacity: 0.2; } .opacity-30 { opacity: 0.3; } .opacity-40 { opacity: 0.4; } .opacity-50 { opacity: 0.5; } .opacity-60 { opacity: 0.6; } .opacity-70 { opacity: 0.7; } .opacity-80 { opacity: 0.8; } .opacity-90 { opacity: 0.9; } .opacity-100 { opacity: 1; } .aspect-1 { aspect-ratio: 1; } .aspect-4-3 { aspect-ratio: 4 / 3; } .aspect-3-4 { aspect-ratio: 3 / 4; } .aspect-3-2 { aspect-ratio: 3 / 2; } .aspect-2-3 { aspect-ratio: 2 / 3; } .aspect-16-9 { aspect-ratio: 16 / 9; } .aspect-9-16 { aspect-ratio: 9 / 16; } .fit-contain { object-fit: contain; } .fit-cover { object-fit: cover; } .fit-fill { object-fit: fill; } .bg-blur-xs { backdrop-filter: blur(2px); } .bg-blur-s { backdrop-filter: blur(4px); } .bg-blur-m { backdrop-filter: blur(8px); } .bg-blur-l { backdrop-filter: blur(16px); } .bg-blur-xl { backdrop-filter: blur(32px); } .grayscale { filter: grayscale(1); } .rotate-90 { transform: rotate(90deg); } .rotate-180 { transform: rotate(180deg); } .display-none { display: none; } .visible { visibility: visible; } .hidden { visibility: hidden; } .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } .overflow-x-hidden { overflow-x: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-y-hidden { overflow-y: hidden; } .overflow-y-auto { overflow-y: auto; } .list-none { list-style-type: none; } .white-space-nowrap { white-space: nowrap; } .transition-global { transition: all 0.3s; } .relative { position: relative; } .absolute { position: absolute; } .sticky { position: sticky; } .fixed { position: fixed; } .inset-0 { inset: 0; } .bottom-0 { bottom: 0; } .top-0 { top: 0; } .left-0 { left: 0; } .right-0 { right: 0; } .pointer { cursor: pointer; } .not-allowed { cursor: not-allowed; } .cursor-auto { cursor: auto; } .no-pointer-events { pointer-events: none; } .z--1 { z-index: -1; } .z-0 { z-index: 0; } .z-1 { z-index: 1; } .z-10 { z-index: 10; } .z-100 { z-index: 100; } .z-1000 { z-index: 1000; } .z-10000 { z-index: 10000; } @media (max-width: 1400px) { .column--on-xl { grid-template-columns: 1fr; grid-auto-flow: row; } .row--on-xl { grid-template-columns: unset; grid-auto-flow: column; } .columns-2--on-xl { grid-template-columns: repeat(2, 1fr); } .columns-3--on-xl { grid-template-columns: repeat(3, 1fr); } .columns-4--on-xl { grid-template-columns: repeat(4, 1fr); } .columns-5--on-xl { grid-template-columns: repeat(5, 1fr); } .columns-6--on-xl { grid-template-columns: repeat(6, 1fr); } .col-span-1--on-xl { grid-column: auto / span 1; } .col-span-2--on-xl { grid-column: auto / span 2; } .col-span-3--on-xl { grid-column: auto / span 3; } .col-span-4--on-xl { grid-column: auto / span 4; } .col-span-5--on-xl { grid-column: auto / span 5; } .col-span-6--on-xl { grid-column: auto / span 6; } .col-start-1--on-xl { grid-column-start: 1; } .col-start-2--on-xl { grid-column-start: 2; } .col-start-3--on-xl { grid-column-start: 3; } .col-start-4--on-xl { grid-column-start: 4; } .col-start-5--on-xl { grid-column-start: 5; } .col-start-6--on-xl { grid-column-start: 6; } .row-span-1--on-xl { grid-row: auto / span 1; } .row-span-2--on-xl { grid-row: auto / span 2; } .row-span-3--on-xl { grid-row: auto / span 3; } .row-span-4--on-xl { grid-row: auto / span 4; } .row-span-5--on-xl { grid-row: auto / span 5; } .row-span-6--on-xl { grid-row: auto / span 6; } .row-start-1--on-xl { grid-row-start: 1; } .row-start-2--on-xl { grid-row-start: 2; } .row-start-3--on-xl { grid-row-start: 3; } .row-start-4--on-xl { grid-row-start: 4; } .row-start-5--on-xl { grid-row-start: 5; } .row-start-6--on-xl { grid-row-start: 6; } } @media (max-width: 992px) { .column--on-l { grid-template-columns: 1fr; grid-auto-flow: row; } .row--on-l { grid-template-columns: unset; grid-auto-flow: column; } .columns-2--on-l { grid-template-columns: repeat(2, 1fr); } .columns-3--on-l { grid-template-columns: repeat(3, 1fr); } .columns-4--on-l { grid-template-columns: repeat(4, 1fr); } .columns-5--on-l { grid-template-columns: repeat(5, 1fr); } .columns-6--on-l { grid-template-columns: repeat(6, 1fr); } .col-span-1--on-l { grid-column: auto / span 1; } .col-span-2--on-l { grid-column: auto / span 2; } .col-span-3--on-l { grid-column: auto / span 3; } .col-span-4--on-l { grid-column: auto / span 4; } .col-span-5--on-l { grid-column: auto / span 5; } .col-span-6--on-l { grid-column: auto / span 6; } .col-start-1--on-l { grid-column-start: 1; } .col-start-2--on-l { grid-column-start: 2; } .col-start-3--on-l { grid-column-start: 3; } .col-start-4--on-l { grid-column-start: 4; } .col-start-5--on-l { grid-column-start: 5; } .col-start-6--on-l { grid-column-start: 6; } .row-span-1--on-l { grid-row: auto / span 1; } .row-span-2--on-l { grid-row: auto / span 2; } .row-span-3--on-l { grid-row: auto / span 3; } .row-span-4--on-l { grid-row: auto / span 4; } .row-span-5--on-l { grid-row: auto / span 5; } .row-span-6--on-l { grid-row: auto / span 6; } .row-start-1--on-l { grid-row-start: 1; } .row-start-2--on-l { grid-row-start: 2; } .row-start-3--on-l { grid-row-start: 3; } .row-start-4--on-l { grid-row-start: 4; } .row-start-5--on-l { grid-row-start: 5; } .row-start-6--on-l { grid-row-start: 6; } } @media (max-width: 768px) { .column--on-m { grid-template-columns: 1fr; grid-auto-flow: row; } .row--on-m { grid-template-columns: unset; grid-auto-flow: column; } .columns-2--on-m { grid-template-columns: repeat(2, 1fr); } .columns-3--on-m { grid-template-columns: repeat(3, 1fr); } .columns-4--on-m { grid-template-columns: repeat(4, 1fr); } .columns-5--on-m { grid-template-columns: repeat(5, 1fr); } .columns-6--on-m { grid-template-columns: repeat(6, 1fr); } .col-span-1--on-m { grid-column: auto / span 1; } .col-span-2--on-m { grid-column: auto / span 2; } .col-span-3--on-m { grid-column: auto / span 3; } .col-span-4--on-m { grid-column: auto / span 4; } .col-span-5--on-m { grid-column: auto / span 5; } .col-span-6--on-m { grid-column: auto / span 6; } .col-start-1--on-m { grid-column: 1; } .col-start-2--on-m { grid-column: 2; } .col-start-3--on-m { grid-column: 3; } .col-start-4--on-m { grid-column: 4; } .col-start-5--on-m { grid-column: 5; } .col-start-6--on-m { grid-column: 6; } .row-span-1--on-m { grid-row: auto / span 1; } .row-span-2--on-m { grid-row: auto / span 2; } .row-span-3--on-m { grid-row: auto / span 3; } .row-span-4--on-m { grid-row: auto / span 4; } .row-span-5--on-m { grid-row: auto / span 5; } .row-span-6--on-m { grid-row: auto / span 6; } .row-start-1--on-m { grid-row-start: 1; } .row-start-2--on-m { grid-row-start: 2; } .row-start-3--on-m { grid-row-start: 3; } .row-start-4--on-m { grid-row-start: 4; } .row-start-5--on-m { grid-row-start: 5; } .row-start-6--on-m { grid-row-start: 6; } } @media (max-width: 480px) { .column--on-s { grid-template-columns: 1fr; grid-auto-flow: row; } .row--on-s { grid-template-columns: 1fr; grid-auto-flow: column; } .columns-2--on-s { grid-template-columns: repeat(2, 1fr); } .columns-3--on-s { grid-template-columns: repeat(3, 1fr); } .columns-4--on-s { grid-template-columns: repeat(4, 1fr); } .columns-5--on-s { grid-template-columns: repeat(5, 1fr); } .columns-6--on-s { grid-template-columns: repeat(6, 1fr); } .col-span-1--on-s { grid-column: auto / span 1; } .col-span-2--on-s { grid-column: auto / span 2; } .col-span-3--on-s { grid-column: auto / span 3; } .col-span-4--on-s { grid-column: auto / span 4; } .col-span-5--on-s { grid-column: auto / span 5; } .col-span-6--on-s { grid-column: auto / span 6; } .col-start-1--on-s { grid-column-start: 1; } .col-start-2--on-s { grid-column-start: 2; } .col-start-3--on-s { grid-column-start: 3; } .col-start-4--on-s { grid-column-start: 4; } .col-start-5--on-s { grid-column-start: 5; } .col-start-6--on-s { grid-column-start: 6; } .row-span-1--on-s { grid-row: auto / span 1; } .row-span-2--on-s { grid-row: auto / span 2; } .row-span-3--on-s { grid-row: auto / span 3; } .row-span-4--on-s { grid-row: auto / span 4; } .row-span-5--on-s { grid-row: auto / span 5; } .row-span-6--on-s { grid-row: auto / span 6; } .row-start-1--on-s { grid-row-start: 1; } .row-start-2--on-s { grid-row-start: 2; } .row-start-3--on-s { grid-row-start: 3; } .row-start-4--on-s { grid-row-start: 4; } .row-start-5--on-s { grid-row-start: 5; } .row-start-6--on-s { grid-row-start: 6; } }