Editor View
View Settings
Colors
html {
scroll-behavior: smooth;
overflow-wrap: break-word;
}
body {
-webkit-font-smoothing: antialiased;
line-height: 1.8;
}
*,
::after,
::before {
box-sizing: border-box;
margin: 0;
}
ol,
ul {
padding-inline-start: 2rem;
line-height: 1.75;
}
.unlist {
padding-inline-start: 0;
list-style: none;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
img {
width: 100%;
height: auto;
background: var(--gray-100);
object-position: var(--focus);
object-fit: cover;
transition: opacity 1.5s, filter 1s;
}
.ic {
background-size: cover;
background-repeat: no-repeat;
background-color: var(--gray-200);
background-image: var(--placeholder);
overflow: hidden;
width: 100%;
position: relative;
}
.ic img {
opacity: 0;
}
.ic.loaded img {
opacity: 1;
filter: blur(0);
width: 100%;
}
/* Visually hidden */
.no-display {
display: none;
}
.non-visible {
visibility: hidden;
}
.pos-r {
position: relative;
}
.pos-a {
position: absolute;
}
.h-full {
height: 100%;
}
.block-link a::after {
content: '';
display: block;
position: absolute;
inset: 0;
}
.block-link a {
color: inherit;
text-decoration: none;
}
.order-first {
order: -1;
}
input,
textarea,
select {
font: inherit;
width: 100%;
padding: 0.5rem;
border: var(--b-width, 1px) var(--b-style, solid) var(--b-color, currentColor);
background: unset;
color: currentColor;
}
input[type="checkbox"] {
width: fit-content;
}
input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
background-color: #fff;
margin: 0;
font: inherit;
color: currentColor;
width: 1.5em;
height: 1.5em;
border: var(--b-width, 1px) var(--b-style, solid) var(--b-color, currentColor);
border-radius: 0;
transform: translateY(-0.075em);
display: grid;
place-content: center;
}
input[type="checkbox"]::before {
content: "";
width: 0.65em;
height: 0.65em;
transform: scale(0);
transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em hotpink;
transform-origin: bottom left;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
input[type="checkbox"]:focus {
outline: max(2px, 0.15em) solid currentColor;
outline-offset: max(2px, 0.15em);
}
input[type="checkbox"]:checked::before {
transform: scale(1);
}
button {
padding: 0;
cursor: pointer;
border: none;
font: inherit;
}
:root {
}
--body-font: sans-serif;
--heading-font: sans-serif;
font-family: var(--body-font);
--s-xs: calc(clamp(0.875rem, 0.3rem + 2vh + 2vw, 2.25rem) * 0.75);
--s-sm: clamp(0.875rem, 0.3rem + 2vh + 2vw, 2.25rem);
--s-md: calc(clamp(0.875rem, 0.3rem + 2vh + 2vw, 2.25rem) * 1.5);
--s-lg: calc(clamp(0.875rem, 0.3rem + 2vh + 2vw, 2.25rem) * 2);
--s-c1: clamp(3.5rem, 2vh + 6vw, 6.5rem);
--s-1: 0.25rem;
--s-2: 0.375rem;
--s-3: 0.5rem;
--s-4: 0.625rem;
--s-5: 0.75rem;
--s-6: 0.875rem;
--s-7: 1rem;
--s-8: 1.25rem;
--s-9: 1.5rem;
--s-10: 1.75rem;
--s-11: 2rem;
--s-12: 2.25rem;
--s-13: 2.5rem;
--s-14: 2.75rem;
--s-15: 3rem;
--s-16: 3.5rem;
--s-17: 4rem;
--c-g-1: #020203;
--c-g-2: #121016;
--c-g-3: #221f29;
--c-g-4: #322e3b;
--c-g-5: #433e4c;
--c-g-6: #534f5c;
--c-g-7: #64606c;
--c-g-8: #7d7986;
--c-g-9: #8f8b98;
--c-g-10: #a19cab;
--c-g-11: #b3aebc;
--c-g-12: #c5c0ce;
--c-g-13: #d7d3de;
--c-g-14: #eae7ee;
--c-g-15: #fcfcfd;
--w-content: min(calc(100% - 2.5rem), 90%);
--w-full: 100%;
--mw-sm: 40rem;
--mw-md: 48rem;
--mw-lg: 60rem;
--mw-xl: 72rem;
--mw-2xl: 80rem;
--fs-s-0: 0.75rem;
--fs-s-1: 0.875rem;
--fs-s-2: 1.125rem;
--fs-s-3: 1.25rem;
--fs-s-4: 1.5rem;
--fs-s-5: 1.875rem;
--fs-s-6: 2.25rem;
--fs-s-7: 3rem;
--fs-s-8: 3.75rem;
--fs-s-9: 4.5rem;
--fs-s-10: 6rem;
--fs-f-1: clamp(.75rem, 1.5vw, 1rem);
--fs-f-2: clamp(.875rem, 1.75vw, 1.25rem);
--fs-f-3: clamp(1rem, 2vw, 1.5rem);
--fs-f-4: clamp(1.125rem, 2.5vw, 2rem);
--fs-f-5: clamp(1.25rem, 2.75vw, 2.25rem);
--fs-f-6: clamp(1.5rem, 3vw, 2.5rem);
--fs-f-7: clamp(1.75rem, 3.5vw, 3rem);
--fs-f-8: clamp(2rem, 4vw, 3.5rem);
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--body-font);
line-height: 1.3;
font-weight: 400;
}
.fs-s-00 {
font-size: var(--fs-s-00);
}
.fs-s-0 {
font-size: var(--fs-s-0);
}
.fs-s-1 {
font-size: var(--fs-s-1);
}
.fs-s-2 {
font-size: var(--fs-s-2);
}
.fs-s-3 {
font-size: var(--fs-s-3);
}
.fs-s-4 {
font-size: var(--fs-s-4);
}
.fs-s-5 {
font-size: var(--fs-s-5);
}
.fs-s-6 {
font-size: var(--fs-s-6);
}
.fs-s-7 {
font-size: var(--fs-s-7);
}
.fs-s-8 {
font-size: var(--fs-s-8);
}
.fs-s-9 {
font-size: var(--fs-s-9);
}
.fs-s-10 {
font-size: var(--fs-s-10);
}
.fs-f-1,
h6 {
font-size: var(--fs-f-1);
}
.fs-f-2,
h5 {
font-size: var(--fs-f-2);
}
.fs-f-3,
h4 {
font-size: var(--fs-f-3);
}
.fs-f-4,
h3 {
font-size: var(--fs-f-4);
}
.fs-f-5 {
font-size: var(--fs-f-5);
}
.fs-f-6,
h2 {
font-size: var(--fs-f-6);
}
.fs-f-7,
h1 {
font-size: var(--fs-f-7);
}
.fs-f-8 {
font-size: var(--fs-f-8);
}
.tt-u {
text-transform: uppercase;
}
.tt-c {
text-transform:capitalize;
}
.tt-l {
text-transform: lowercase;
}
.ta-l {
text-align: left;
}
.ta-c {
text-align: center;
}
.ta-r {
text-align: right;
}
.fw-1 {
font-weight: 100;
}
.fw-2 {
font-weight: 200;
}
.fw-3 {
font-weight: 300;
}
.fw-4 {
font-weight: 400;
}
.fw-5 {
font-weight: 500;
}
.fw-6 {
font-weight: 600;
}
.fw-7 {
font-weight: 700;
}
.fw-8 {
font-weight: 800;
}
.fw-9 {
font-weight: 900;
}
.lh-1 {
line-height: 1;
}
.lh-1-1 {
line-height: 1.1;
}
.lh-1-2 {
line-height: 1.2;
}
.lh-1-3 {
line-height: 1.3;
}
.lh-1-4 {
line-height: 1.4;
}
.lh-1-5 {
line-height: 1.5;
}
.lh-1-6 {
line-height: 1.6;
}
.lh-1-7 {
line-height: 1.7;
}
.lh-1-8 {
line-height: 1.8;
}
.lh-1-9 {
line-height: 1.9;
}
.lh-2 {
line-height: 2;
}
.ls-none { letter-spacing: 0; } .ls-xs { letter-spacing: 0.05em; } .ls-sm { letter-spacing: 0.1em; } .ls-md { letter-spacing: 0.15em; } .ls-lg { letter-spacing: 0.2em; } .ls-xl { letter-spacing: 0.25em; } .ls-2xl { letter-spacing: 0.3em; }
.body-font { font-family: var(--body-font);}
.heading-font { font-family: var(--heading-font);}
.ac-w>* {
width: var(--auto-child-width, var(--w-content));
}
.ac-mw>* {
max-width: var(--auto-child-max-width, 48rem);
}
.ac-mx-auto>* {
margin-inline: auto;
}
.flow>*+* {margin-block-start: 2rem;}
.flex-flow {display: flex;flex-direction: column;gap: var(--flow, 2rem);}
.flow-xs>*+* {margin-block-start: var(--s-xs);}
.flow-sm>*+* {margin-block-start: var(--s-sm);}
.flow-md>*+* {margin-block-start: var(--s-md);}
.flow-lg>*+* {margin-block-start: var(--s-lg);}
.flow-c1>*+* {margin-block-start: var(--s-c1);}
.flow-1>*+* {margin-block-start: var(--s-1);}
.flow-2>*+* {margin-block-start: var(--s-2);}
.flow-3>*+* {margin-block-start: var(--s-3);}
.flow-4>*+* {margin-block-start: var(--s-4);}
.flow-5>*+* {margin-block-start: var(--s-5);}
.flow-6>*+* {margin-block-start: var(--s-6);}
.flow-7>*+* {margin-block-start: var(--s-7);}
.flow-8>*+* {margin-block-start: var(--s-8);}
.flow-9>*+* {margin-block-start: var(--s-9);}
.flow-10>*+* {margin-block-start: var(--s-10);}
.flow-11>*+* {margin-block-start: var(--s-11);}
.flow-12>*+* {margin-block-start: var(--s-12);}
.flow-13>*+* {margin-block-start: var(--s-13);}
.flow-14>*+* {margin-block-start: var(--s-14);}
.flow-15>*+* {margin-block-start: var(--s-15);}
.flow-16>*+* {margin-block-start: var(--s-16);}
.flow-17>*+* {margin-block-start: var(--s-17);}
.m-none { margin: 0; }
.m-xs {margin: var(--s-xs);}
.m-sm {margin: var(--s-sm);}
.m-md {margin: var(--s-md);}
.m-lg {margin: var(--s-lg);}
.m-c1 {margin: var(--s-c1);}
.m-1 {margin: var(--s-1);}
.m-2 {margin: var(--s-2);}
.m-3 {margin: var(--s-3);}
.m-4 {margin: var(--s-4);}
.m-5 {margin: var(--s-5);}
.m-6 {margin: var(--s-6);}
.m-7 {margin: var(--s-7);}
.m-8 {margin: var(--s-8);}
.m-9 {margin: var(--s-9);}
.m-10 {margin: var(--s-10);}
.m-11 {margin: var(--s-11);}
.m-12 {margin: var(--s-12);}
.m-13 {margin: var(--s-13);}
.m-14 {margin: var(--s-14);}
.m-15 {margin: var(--s-15);}
.m-16 {margin: var(--s-16);}
.m-17 {margin: var(--s-17);}
.my-xs {margin-block: var(--s-xs);}
.my-sm {margin-block: var(--s-sm);}
.my-md {margin-block: var(--s-md);}
.my-lg {margin-block: var(--s-lg);}
.my-c1 {margin-block: var(--s-c1);}
.my-1 {margin-block: var(--s-1);}
.my-2 {margin-block: var(--s-2);}
.my-3 {margin-block: var(--s-3);}
.my-4 {margin-block: var(--s-4);}
.my-5 {margin-block: var(--s-5);}
.my-6 {margin-block: var(--s-6);}
.my-7 {margin-block: var(--s-7);}
.my-8 {margin-block: var(--s-8);}
.my-9 {margin-block: var(--s-9);}
.my-10 {margin-block: var(--s-10);}
.my-11 {margin-block: var(--s-11);}
.my-12 {margin-block: var(--s-12);}
.my-13 {margin-block: var(--s-13);}
.my-14 {margin-block: var(--s-14);}
.my-15 {margin-block: var(--s-15);}
.my-16 {margin-block: var(--s-16);}
.my-17 {margin-block: var(--s-17);}
.my-none { margin-block: 0 ;}
.mx-xs {margin-inline: var(--s-xs);}
.mx-sm {margin-inline: var(--s-sm);}
.mx-md {margin-inline: var(--s-md);}
.mx-lg {margin-inline: var(--s-lg);}
.mx-c1 {margin-inline: var(--s-c1);}
.mx-1 {margin-inline: var(--s-1);}
.mx-2 {margin-inline: var(--s-2);}
.mx-3 {margin-inline: var(--s-3);}
.mx-4 {margin-inline: var(--s-4);}
.mx-5 {margin-inline: var(--s-5);}
.mx-6 {margin-inline: var(--s-6);}
.mx-7 {margin-inline: var(--s-7);}
.mx-8 {margin-inline: var(--s-8);}
.mx-9 {margin-inline: var(--s-9);}
.mx-10 {margin-inline: var(--s-10);}
.mx-11 {margin-inline: var(--s-11);}
.mx-12 {margin-inline: var(--s-12);}
.mx-13 {margin-inline: var(--s-13);}
.mx-14 {margin-inline: var(--s-14);}
.mx-15 {margin-inline: var(--s-15);}
.mx-16 {margin-inline: var(--s-16);}
.mx-17 {margin-inline: var(--s-17);}
.mx-auto { margin-inline: auto ;}
.mx-none { margin-inline: 0 ;}
.mt-xs {margin-block-start: var(--s-xs);}
.mt-sm {margin-block-start: var(--s-sm);}
.mt-md {margin-block-start: var(--s-md);}
.mt-lg {margin-block-start: var(--s-lg);}
.mt-c1 {margin-block-start: var(--s-c1);}
.mt-1 {margin-block-start: var(--s-1);}
.mt-2 {margin-block-start: var(--s-2);}
.mt-3 {margin-block-start: var(--s-3);}
.mt-4 {margin-block-start: var(--s-4);}
.mt-5 {margin-block-start: var(--s-5);}
.mt-6 {margin-block-start: var(--s-6);}
.mt-7 {margin-block-start: var(--s-7);}
.mt-8 {margin-block-start: var(--s-8);}
.mt-9 {margin-block-start: var(--s-9);}
.mt-10 {margin-block-start: var(--s-10);}
.mt-11 {margin-block-start: var(--s-11);}
.mt-12 {margin-block-start: var(--s-12);}
.mt-13 {margin-block-start: var(--s-13);}
.mt-14 {margin-block-start: var(--s-14);}
.mt-15 {margin-block-start: var(--s-15);}
.mt-16 {margin-block-start: var(--s-16);}
.mt-17 {margin-block-start: var(--s-17);}
.mt-none { margin-block-start: 0 ;}
.mb-xs {margin-block-end: var(--s-xs);}
.mb-sm {margin-block-end: var(--s-sm);}
.mb-md {margin-block-end: var(--s-md);}
.mb-lg {margin-block-end: var(--s-lg);}
.mb-c1 {margin-block-end: var(--s-c1);}
.mb-1 {margin-block-end: var(--s-1);}
.mb-2 {margin-block-end: var(--s-2);}
.mb-3 {margin-block-end: var(--s-3);}
.mb-4 {margin-block-end: var(--s-4);}
.mb-5 {margin-block-end: var(--s-5);}
.mb-6 {margin-block-end: var(--s-6);}
.mb-7 {margin-block-end: var(--s-7);}
.mb-8 {margin-block-end: var(--s-8);}
.mb-9 {margin-block-end: var(--s-9);}
.mb-10 {margin-block-end: var(--s-10);}
.mb-11 {margin-block-end: var(--s-11);}
.mb-12 {margin-block-end: var(--s-12);}
.mb-13 {margin-block-end: var(--s-13);}
.mb-14 {margin-block-end: var(--s-14);}
.mb-15 {margin-block-end: var(--s-15);}
.mb-16 {margin-block-end: var(--s-16);}
.mb-17 {margin-block-end: var(--s-17);}
.mb-none { margin-block-end: 0 ;}
.ml-xs {margin-inline-start: var(--s-xs);}
.ml-sm {margin-inline-start: var(--s-sm);}
.ml-md {margin-inline-start: var(--s-md);}
.ml-lg {margin-inline-start: var(--s-lg);}
.ml-c1 {margin-inline-start: var(--s-c1);}
.ml-1 {margin-inline-start: var(--s-1);}
.ml-2 {margin-inline-start: var(--s-2);}
.ml-3 {margin-inline-start: var(--s-3);}
.ml-4 {margin-inline-start: var(--s-4);}
.ml-5 {margin-inline-start: var(--s-5);}
.ml-6 {margin-inline-start: var(--s-6);}
.ml-7 {margin-inline-start: var(--s-7);}
.ml-8 {margin-inline-start: var(--s-8);}
.ml-9 {margin-inline-start: var(--s-9);}
.ml-10 {margin-inline-start: var(--s-10);}
.ml-11 {margin-inline-start: var(--s-11);}
.ml-12 {margin-inline-start: var(--s-12);}
.ml-13 {margin-inline-start: var(--s-13);}
.ml-14 {margin-inline-start: var(--s-14);}
.ml-15 {margin-inline-start: var(--s-15);}
.ml-16 {margin-inline-start: var(--s-16);}
.ml-17 {margin-inline-start: var(--s-17);}
.ml-none { margin-inline-start: 0 ;}
.mr-xs {margin-inline-end: var(--s-xs);}
.mr-sm {margin-inline-end: var(--s-sm);}
.mr-md {margin-inline-end: var(--s-md);}
.mr-lg {margin-inline-end: var(--s-lg);}
.mr-c1 {margin-inline-end: var(--s-c1);}
.mr-1 {margin-inline-end: var(--s-1);}
.mr-2 {margin-inline-end: var(--s-2);}
.mr-3 {margin-inline-end: var(--s-3);}
.mr-4 {margin-inline-end: var(--s-4);}
.mr-5 {margin-inline-end: var(--s-5);}
.mr-6 {margin-inline-end: var(--s-6);}
.mr-7 {margin-inline-end: var(--s-7);}
.mr-8 {margin-inline-end: var(--s-8);}
.mr-9 {margin-inline-end: var(--s-9);}
.mr-10 {margin-inline-end: var(--s-10);}
.mr-11 {margin-inline-end: var(--s-11);}
.mr-12 {margin-inline-end: var(--s-12);}
.mr-13 {margin-inline-end: var(--s-13);}
.mr-14 {margin-inline-end: var(--s-14);}
.mr-15 {margin-inline-end: var(--s-15);}
.mr-16 {margin-inline-end: var(--s-16);}
.mr-17 {margin-inline-end: var(--s-17);}
.mr-none { margin-inline-end: 0 ;}
.p-none { padding: 0; }
.p-xs {padding: var(--s-xs);}
.p-sm {padding: var(--s-sm);}
.p-md {padding: var(--s-md);}
.p-lg {padding: var(--s-lg);}
.p-c1 {padding: var(--s-c1);}
.p-1 {padding: var(--s-1);}
.p-2 {padding: var(--s-2);}
.p-3 {padding: var(--s-3);}
.p-4 {padding: var(--s-4);}
.p-5 {padding: var(--s-5);}
.p-6 {padding: var(--s-6);}
.p-7 {padding: var(--s-7);}
.p-8 {padding: var(--s-8);}
.p-9 {padding: var(--s-9);}
.p-10 {padding: var(--s-10);}
.p-11 {padding: var(--s-11);}
.p-12 {padding: var(--s-12);}
.p-13 {padding: var(--s-13);}
.p-14 {padding: var(--s-14);}
.p-15 {padding: var(--s-15);}
.p-16 {padding: var(--s-16);}
.p-17 {padding: var(--s-17);}
.py-xs {padding-block: var(--s-xs);}
.py-sm {padding-block: var(--s-sm);}
.py-md {padding-block: var(--s-md);}
.py-lg {padding-block: var(--s-lg);}
.py-c1 {padding-block: var(--s-c1);}
.py-1 {padding-block: var(--s-1);}
.py-2 {padding-block: var(--s-2);}
.py-3 {padding-block: var(--s-3);}
.py-4 {padding-block: var(--s-4);}
.py-5 {padding-block: var(--s-5);}
.py-6 {padding-block: var(--s-6);}
.py-7 {padding-block: var(--s-7);}
.py-8 {padding-block: var(--s-8);}
.py-9 {padding-block: var(--s-9);}
.py-10 {padding-block: var(--s-10);}
.py-11 {padding-block: var(--s-11);}
.py-12 {padding-block: var(--s-12);}
.py-13 {padding-block: var(--s-13);}
.py-14 {padding-block: var(--s-14);}
.py-15 {padding-block: var(--s-15);}
.py-16 {padding-block: var(--s-16);}
.py-17 {padding-block: var(--s-17);}
.py-none { padding-block: 0; }
.px-xs {padding-inline: var(--s-xs);}
.px-sm {padding-inline: var(--s-sm);}
.px-md {padding-inline: var(--s-md);}
.px-lg {padding-inline: var(--s-lg);}
.px-c1 {padding-inline: var(--s-c1);}
.px-1 {padding-inline: var(--s-1);}
.px-2 {padding-inline: var(--s-2);}
.px-3 {padding-inline: var(--s-3);}
.px-4 {padding-inline: var(--s-4);}
.px-5 {padding-inline: var(--s-5);}
.px-6 {padding-inline: var(--s-6);}
.px-7 {padding-inline: var(--s-7);}
.px-8 {padding-inline: var(--s-8);}
.px-9 {padding-inline: var(--s-9);}
.px-10 {padding-inline: var(--s-10);}
.px-11 {padding-inline: var(--s-11);}
.px-12 {padding-inline: var(--s-12);}
.px-13 {padding-inline: var(--s-13);}
.px-14 {padding-inline: var(--s-14);}
.px-15 {padding-inline: var(--s-15);}
.px-16 {padding-inline: var(--s-16);}
.px-17 {padding-inline: var(--s-17);}
.px-none { padding-inline: 0 ;}
.pt-xs {padding-block-start: var(--s-xs);}
.pt-sm {padding-block-start: var(--s-sm);}
.pt-md {padding-block-start: var(--s-md);}
.pt-lg {padding-block-start: var(--s-lg);}
.pt-c1 {padding-block-start: var(--s-c1);}
.pt-1 {padding-block-start: var(--s-1);}
.pt-2 {padding-block-start: var(--s-2);}
.pt-3 {padding-block-start: var(--s-3);}
.pt-4 {padding-block-start: var(--s-4);}
.pt-5 {padding-block-start: var(--s-5);}
.pt-6 {padding-block-start: var(--s-6);}
.pt-7 {padding-block-start: var(--s-7);}
.pt-8 {padding-block-start: var(--s-8);}
.pt-9 {padding-block-start: var(--s-9);}
.pt-10 {padding-block-start: var(--s-10);}
.pt-11 {padding-block-start: var(--s-11);}
.pt-12 {padding-block-start: var(--s-12);}
.pt-13 {padding-block-start: var(--s-13);}
.pt-14 {padding-block-start: var(--s-14);}
.pt-15 {padding-block-start: var(--s-15);}
.pt-16 {padding-block-start: var(--s-16);}
.pt-17 {padding-block-start: var(--s-17);}
.pt-none { padding-block-start: 0 ;}
.pb-xs {padding-block-end: var(--s-xs);}
.pb-sm {padding-block-end: var(--s-sm);}
.pb-md {padding-block-end: var(--s-md);}
.pb-lg {padding-block-end: var(--s-lg);}
.pb-c1 {padding-block-end: var(--s-c1);}
.pb-1 {padding-block-end: var(--s-1);}
.pb-2 {padding-block-end: var(--s-2);}
.pb-3 {padding-block-end: var(--s-3);}
.pb-4 {padding-block-end: var(--s-4);}
.pb-5 {padding-block-end: var(--s-5);}
.pb-6 {padding-block-end: var(--s-6);}
.pb-7 {padding-block-end: var(--s-7);}
.pb-8 {padding-block-end: var(--s-8);}
.pb-9 {padding-block-end: var(--s-9);}
.pb-10 {padding-block-end: var(--s-10);}
.pb-11 {padding-block-end: var(--s-11);}
.pb-12 {padding-block-end: var(--s-12);}
.pb-13 {padding-block-end: var(--s-13);}
.pb-14 {padding-block-end: var(--s-14);}
.pb-15 {padding-block-end: var(--s-15);}
.pb-16 {padding-block-end: var(--s-16);}
.pb-17 {padding-block-end: var(--s-17);}
.pb-none { padding-block-end: 0 ;}
.pl-xs {padding-inline-start: var(--s-xs);}
.pl-sm {padding-inline-start: var(--s-sm);}
.pl-md {padding-inline-start: var(--s-md);}
.pl-lg {padding-inline-start: var(--s-lg);}
.pl-c1 {padding-inline-start: var(--s-c1);}
.pl-1 {padding-inline-start: var(--s-1);}
.pl-2 {padding-inline-start: var(--s-2);}
.pl-3 {padding-inline-start: var(--s-3);}
.pl-4 {padding-inline-start: var(--s-4);}
.pl-5 {padding-inline-start: var(--s-5);}
.pl-6 {padding-inline-start: var(--s-6);}
.pl-7 {padding-inline-start: var(--s-7);}
.pl-8 {padding-inline-start: var(--s-8);}
.pl-9 {padding-inline-start: var(--s-9);}
.pl-10 {padding-inline-start: var(--s-10);}
.pl-11 {padding-inline-start: var(--s-11);}
.pl-12 {padding-inline-start: var(--s-12);}
.pl-13 {padding-inline-start: var(--s-13);}
.pl-14 {padding-inline-start: var(--s-14);}
.pl-15 {padding-inline-start: var(--s-15);}
.pl-16 {padding-inline-start: var(--s-16);}
.pl-17 {padding-inline-start: var(--s-17);}
.pl-none { padding-inline-start: 0 ;}
.pr-xs {padding-inline-end: var(--s-xs);}
.pr-sm {padding-inline-end: var(--s-sm);}
.pr-md {padding-inline-end: var(--s-md);}
.pr-lg {padding-inline-end: var(--s-lg);}
.pr-c1 {padding-inline-end: var(--s-c1);}
.pr-1 {padding-inline-end: var(--s-1);}
.pr-2 {padding-inline-end: var(--s-2);}
.pr-3 {padding-inline-end: var(--s-3);}
.pr-4 {padding-inline-end: var(--s-4);}
.pr-5 {padding-inline-end: var(--s-5);}
.pr-6 {padding-inline-end: var(--s-6);}
.pr-7 {padding-inline-end: var(--s-7);}
.pr-8 {padding-inline-end: var(--s-8);}
.pr-9 {padding-inline-end: var(--s-9);}
.pr-10 {padding-inline-end: var(--s-10);}
.pr-11 {padding-inline-end: var(--s-11);}
.pr-12 {padding-inline-end: var(--s-12);}
.pr-13 {padding-inline-end: var(--s-13);}
.pr-14 {padding-inline-end: var(--s-14);}
.pr-15 {padding-inline-end: var(--s-15);}
.pr-16 {padding-inline-end: var(--s-16);}
.pr-17 {padding-inline-end: var(--s-17);}
.pr-none { padding-inline-end: 0 ;}
.mw-sm {max-width: var(--mw-sm);}
.mw-md {max-width: var(--mw-md);}
.mw-lg {max-width: var(--mw-lg);}
.mw-xl {max-width: var(--mw-xl);}
.mw-2xl {max-width: var(--mw-2xl);}
.mw-full { max-width: 100%; }
.w-content {width: var(--w-content);}
.w-full {width: var(--w-full);}
.ac-mw-sm {--auto-child-max-width: var(--mw-sm);}
.ac-mw-md {--auto-child-max-width: var(--mw-md);}
.ac-mw-lg {--auto-child-max-width: var(--mw-lg);}
.ac-mw-xl {--auto-child-max-width: var(--mw-xl);}
.ac-mw-2xl {--auto-child-max-width: var(--mw-2xl);}
.ac-w-content {--auto-child-width: var(--w-content);}
.ac-w-full {--auto-child-width: var(--w-full);}
.stack {
display: grid;
grid-template-areas: "stack";
position: relative;
}
.stack>* {
grid-area: stack;
position: relative;
}
.stack>.ic>img {
position: absolute;
object-fit: cover;
height: 100%;
}
.stack>.overlay {
width: 100%;
height: 100%;
background: var(--overlay, rgba(0, 0, 0, 0.5));
}
.cols-layout {
columns: var(--maxCols, 4) var(--colBase, 10rem);
gap: var(--gap, 1rem);
}
.cols-layout>*+* {
margin-block-start: var(--row-gap, var(--gap, 1rem));
}
.cols-layout>div {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
.grid-layout {
display: grid;
grid-template-columns: repeat(var(--col-fill, auto-fill), minmax(min(var(--lmw, 18rem), 100%), 1fr));
gap: var(--gap, 2rem);
row-gap: var(--row-gap, var(--gap, 2rem));
align-items: var(--align);
justify-content: var(--justify);
}
.albatross {
--maxCols: 3;
--gap: 1rem;
--lmw: 18rem;
--breakpoint: calc((var(--maxCols,3) * var(--lmw)) + (var(--gap) * (var(--maxCols,3) - 1)));
display: flex;
flex-wrap: wrap;
gap: var(--gap);
}
.albatross>* {
flex: calc((var(--breakpoint) - 100%) * 999) var(--flex-grow, 1) 1;
min-width: calc((100% / var(--maxCols,3)) - (var(--gap) * (var(--maxCols,3) - 1)));
}
.flex-layout {
display: flex;
flex-wrap: wrap;
gap: var(--gap, 2rem);
row-gap: var(--row-gap, var(--gap, 2rem));
justify-content: var(--justify);
align-items: var(--align);
}
.flex-layout>* {
flex: var(--lmw, 18rem) var(--flex-grow, 1) var(--flex-shrink, 1);
max-width: var(--flex-child-max-width, 100%);
min-width: var(--flex-child-min-width, unset);
}
.lmw-2 { --lmw: 2rem;}
.lmw-4 { --lmw: 4rem;}
.lmw-6 { --lmw: 6rem;}
.lmw-8 { --lmw: 8rem;}
.lmw-10 { --lmw: 10rem;}
.lmw-12 { --lmw: 12rem;}
.lmw-14 { --lmw: 14rem;}
.lmw-16 { --lmw: 16rem;}
.lmw-18 { --lmw: 18rem;}
.lmw-20 { --lmw: 20rem;}
.lmw-22 { --lmw: 22rem;}
.lmw-24 { --lmw: 24rem;}
.lmw-26 { --lmw: 26rem;}
.lmw-28 { --lmw: 28rem;}
.lmw-30 { --lmw: 30rem;}
.lmw-32 { --lmw: 32rem;}
.lmw-34 { --lmw: 34rem;}
.lmw-36 { --lmw: 36rem;}
.lmw-38 { --lmw: 38rem;}
.lmw-40 { --lmw: 40rem;}
.gap-none { --gap: 0; }.gap-hairline { --gap:0.0001px; }
.gap-xs { --gap: var(--s-xs); }
.gap-sm { --gap: var(--s-sm); }
.gap-md { --gap: var(--s-md); }
.gap-lg { --gap: var(--s-lg); }
.gap-c1 { --gap: var(--s-c1); }
.gap-1 { --gap: var(--s-1); }
.gap-2 { --gap: var(--s-2); }
.gap-3 { --gap: var(--s-3); }
.gap-4 { --gap: var(--s-4); }
.gap-5 { --gap: var(--s-5); }
.gap-6 { --gap: var(--s-6); }
.gap-7 { --gap: var(--s-7); }
.gap-8 { --gap: var(--s-8); }
.gap-9 { --gap: var(--s-9); }
.gap-10 { --gap: var(--s-10); }
.gap-11 { --gap: var(--s-11); }
.gap-12 { --gap: var(--s-12); }
.gap-13 { --gap: var(--s-13); }
.gap-14 { --gap: var(--s-14); }
.gap-15 { --gap: var(--s-15); }
.gap-16 { --gap: var(--s-16); }
.gap-17 { --gap: var(--s-17); }
.row-gap-none { --row-gap: 0; }
.row-gap-xs { --row-gap: var(--s-xs); }
.row-gap-sm { --row-gap: var(--s-sm); }
.row-gap-md { --row-gap: var(--s-md); }
.row-gap-lg { --row-gap: var(--s-lg); }
.row-gap-c1 { --row-gap: var(--s-c1); }
.row-gap-1 { --row-gap: var(--s-1); }
.row-gap-2 { --row-gap: var(--s-2); }
.row-gap-3 { --row-gap: var(--s-3); }
.row-gap-4 { --row-gap: var(--s-4); }
.row-gap-5 { --row-gap: var(--s-5); }
.row-gap-6 { --row-gap: var(--s-6); }
.row-gap-7 { --row-gap: var(--s-7); }
.row-gap-8 { --row-gap: var(--s-8); }
.row-gap-9 { --row-gap: var(--s-9); }
.row-gap-10 { --row-gap: var(--s-10); }
.row-gap-11 { --row-gap: var(--s-11); }
.row-gap-12 { --row-gap: var(--s-12); }
.row-gap-13 { --row-gap: var(--s-13); }
.row-gap-14 { --row-gap: var(--s-14); }
.row-gap-15 { --row-gap: var(--s-15); }
.row-gap-16 { --row-gap: var(--s-16); }
.row-gap-17 { --row-gap: var(--s-17); }
.justify-start {
--justify: start;
}
.justify-center {
--justify: center;
}
.justify-end {
--justify: end;
}
.justify-around {
--justify: space-around;
}
.justify-between {
--justify: space-between;
}
.align-start {
--align: start;
}
.align-center {
--align: center;
}
.align-end {
--align: end;
}
.align-around {
--align: space-around;
}
.align-between {
--align: space-between;
}
.align-stretch {
--align: stretch;
}
.as-start {
align-self: start;
}
.as-center {
align-self: center;
}
.as-end {
align-self: end;
}
.as-stretch {
align-self: stretch;
}
.js-start {
justify-self: start;
}
.js-center {
justify-self: center;
}
.js-end {
justify-self: end;
}
.col-fit {
--col-fill: auto-fit;
}
.cols-2 {
--maxCols: 2;
}
.cols-3 {
--maxCols: 3;
}
.cols-4 {
--maxCols: 4;
}
.cols-5 {
--maxCols: 5;
}
.cols-6 {
--maxCols: 6;
}
.fg-2 {
--flex-grow: 2;
}
.fg-3 {
--flex-grow: 3;
}
.fg-4 {
--flex-grow: 4;
}
.fg-10 {
--flex-grow: 10;
}
.fg-20 {
--flex-grow: 20;
}
.fg-666 {
--flex-grow: 666;
}
.btn-group {
display: flex;
flex-wrap: wrap;
gap: var(--gap, 0.5rem);
justify-content: var(--justify);
align-items: var(--align);
}
.col-g-1 { color: var(--c-g-1);}
.bgc-g-1 { background: var(--c-g-1);}
.bc-g-1 { --b-color: var(--c-g-1);}
.col-g-2 { color: var(--c-g-2);}
.bgc-g-2 { background: var(--c-g-2);}
.bc-g-2 { --b-color: var(--c-g-2);}
.col-g-3 { color: var(--c-g-3);}
.bgc-g-3 { background: var(--c-g-3);}
.bc-g-3 { --b-color: var(--c-g-3);}
.col-g-4 { color: var(--c-g-4);}
.bgc-g-4 { background: var(--c-g-4);}
.bc-g-4 { --b-color: var(--c-g-4);}
.col-g-5 { color: var(--c-g-5);}
.bgc-g-5 { background: var(--c-g-5);}
.bc-g-5 { --b-color: var(--c-g-5);}
.col-g-6 { color: var(--c-g-6);}
.bgc-g-6 { background: var(--c-g-6);}
.bc-g-6 { --b-color: var(--c-g-6);}
.col-g-7 { color: var(--c-g-7);}
.bgc-g-7 { background: var(--c-g-7);}
.bc-g-7 { --b-color: var(--c-g-7);}
.col-g-8 { color: var(--c-g-8);}
.bgc-g-8 { background: var(--c-g-8);}
.bc-g-8 { --b-color: var(--c-g-8);}
.col-g-9 { color: var(--c-g-9);}
.bgc-g-9 { background: var(--c-g-9);}
.bc-g-9 { --b-color: var(--c-g-9);}
.col-g-10 { color: var(--c-g-10);}
.bgc-g-10 { background: var(--c-g-10);}
.bc-g-10 { --b-color: var(--c-g-10);}
.col-g-11 { color: var(--c-g-11);}
.bgc-g-11 { background: var(--c-g-11);}
.bc-g-11 { --b-color: var(--c-g-11);}
.col-g-12 { color: var(--c-g-12);}
.bgc-g-12 { background: var(--c-g-12);}
.bc-g-12 { --b-color: var(--c-g-12);}
.col-g-13 { color: var(--c-g-13);}
.bgc-g-13 { background: var(--c-g-13);}
.bc-g-13 { --b-color: var(--c-g-13);}
.col-g-14 { color: var(--c-g-14);}
.bgc-g-14 { background: var(--c-g-14);}
.bc-g-14 { --b-color: var(--c-g-14);}
.col-g-15 { color: var(--c-g-15);}
.bgc-g-15 { background: var(--c-g-15);}
.bc-g-15 { --b-color: var(--c-g-15);}
.b {
border: var(--b-width, 1px) var(--b-style, solid) var(--b-color, currentColor);
}
.b-y {
border-block: var(--b-width, 1px) var(--b-style, solid) var(--b-color, currentColor);
}
.b-t {
border-block-start: var(--b-width, 1px) var(--b-style, solid) var(--b-color, currentColor);
}
.b-b {
border-block-end: var(--b-width, 1px) var(--b-style, solid) var(--b-color, currentColor);
}
.b-x {
border-block-start: var(--b-width, 1px) var(--b-style, solid) var(--b-color, currentColor);
}
.b-l {
border-inline-start: var(--b-width, 1px) var(--b-style, solid) var(--b-color, currentColor);
}
.b-r {
border-inline-end: var(--b-width, 1px) var(--b-style, solid) var(--b-color, currentColor);
}
.bw-1 { --b-width: 1px }.bw-2 { --b-width: 2px }.bw-3 { --b-width: 3px }.bw-4 { --b-width: 4px }.bw-5 { --b-width: 5px }.bw-6 { --b-width: 6px }
.br-xs { border-radius: var(--s-xs); }
.br-sm { border-radius: var(--s-sm); }
.br-md { border-radius: var(--s-md); }
.br-lg { border-radius: var(--s-lg); }
.br-c1 { border-radius: var(--s-c1); }
.br-1 { border-radius: var(--s-1); }
.br-2 { border-radius: var(--s-2); }
.br-3 { border-radius: var(--s-3); }
.br-4 { border-radius: var(--s-4); }
.br-5 { border-radius: var(--s-5); }
.br-6 { border-radius: var(--s-6); }
.br-7 { border-radius: var(--s-7); }
.br-8 { border-radius: var(--s-8); }
.br-9 { border-radius: var(--s-9); }
.br-10 { border-radius: var(--s-10); }
.br-11 { border-radius: var(--s-11); }
.br-12 { border-radius: var(--s-12); }
.br-13 { border-radius: var(--s-13); }
.br-14 { border-radius: var(--s-14); }
.br-15 { border-radius: var(--s-15); }
.br-16 { border-radius: var(--s-16); }
.br-17 { border-radius: var(--s-17); }
.br-full { border-radius: 9999px; }