/****************************************************************
* Flex
*****************************************************************/
.flex {
    display: flex;
}
.flex-col {
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.inline-flex {
    display: inline-flex;
}

.justify-start {
    justify-content: start;
}
.justify-center {
    justify-content: center;
}
.justify-end {
    justify-content: end;
}
.justify-between {
    justify-content: space-between;
}

.items-start {
    align-items: start;
}
.items-end {
    align-items: end;
}
.items-center {
    align-items: center;
}

.grow {
    flex-grow: 1;
}
.grow-0 {
    flex-grow: 0;
}

.shrink {
    flex-shrink: 1;
}
.shrink-0 {
    flex-shrink: 0;
}

.self-start {
    align-self: start;
}
.self-end {
    align-self: end;
}
.self-center {
    align-self: center;
}

.gap {
    column-gap: var(--column-gap, 0.5rem);
    row-gap: var(--row-gap, 1rem);
}
.gap-half {
    column-gap: 0.5rem;
    row-gap: 0.5rem;
}
.gap-1 {
    column-gap: 1rem;
    row-gap: 1rem;
}
.gap-2 {
    column-gap: 2rem;
    row-gap: 2rem;
}
.gap-3 {
    column-gap: 3rem;
    row-gap: 3rem;
}
.gap-4 {
    column-gap: 4rem;
    row-gap: 4rem;
}

/****************************************************************
* Text
*****************************************************************/
.font-normal {
    font-weight: var(--font-normal);
}
.font-medium {
    font-weight: var(--font-medium);
}
.font-semibold {
    font-weight: var(--font-semibold);
}
.font-bold {
    font-weight: var(--font-bold);
}

.underline {
    text-decoration: underline;
}
.no-underline {
    text-decoration: none;
}

.uppercase {
    text-transform: uppercase;
}
.normal-case {
    text-transform: none;
}

.whitespace-nowrap {
    white-space: nowrap;
}
.whitespace-normal {
    white-space: normal;
}

.break-words {
    overflow-wrap: break-word;
}
.break-all {
    word-break: break-all;
}

.overflow-clip {
    text-overflow: clip;
    white-space: nowrap;
    overflow: hidden;
}
.overflow-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.opacity-75 {
    opacity: var(--opacity-75);
}
.opacity-50 {
    opacity: var(--opacity-50);
}

.leading-none {
    line-height: var(--leading-none);
}
.leading-tight {
    line-height: var(--leading-tight);
}
.leading-normal {
    line-height: var(--leading-normal);
}

.text-start {
    text-align: start;
}
.text-end {
    text-align: end;
}
.text-center {
    text-align: center;
}

.text-primary {
    color: var(--color-text);
}
.text-reversed {
    color: var(--color-text-reversed);
}
.text-negative {
    color: var(--color-negative);
}
.text-positive {
    color: var(--color-positive);
}
.text-subtle {
    color: var(--color-text-subtle);
}

.text-xs {
    font-size: var(--text-xs);
}
.text-sm {
    font-size: var(--text-sm);
}
.text-base {
    font-size: var(--text-base);
}
.text-lg {
    font-size: var(--text-lg);
}
.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);
}
.text-5xl {
    font-size: var(--text-5xl);
}

.text-fluid-xs {
    font-size: var(--text-fluid-xs);
}
.text-fluid-sm {
    font-size: var(--text-fluid-sm);
}
.text-fluid-base {
    font-size: var(--text-fluid-base);
}
.text-fluid-lg {
    font-size: var(--text-fluid-lg);
}
.text-fluid-xl {
    font-size: var(--text-fluid-xl);
}
.text-fluid-2xl {
    font-size: var(--text-fluid-2xl);
}
.text-fluid-3xl {
    font-size: var(--text-fluid-3xl);
}

/****************************************************************
* Background
*****************************************************************/
.bg-main {
    background-color: var(--color-bg);
}
.bg-black {
    background-color: var(--color-text);
}
.bg-white {
    background-color: var(--color-text-reversed);
}
.bg-shade {
    background-color: var(--color-border-light);
}
.bg-transparent {
    background-color: transparent;
}

/****************************************************************
* SVG colors
*****************************************************************/
.colorize-black {
    filter: var(--color-filter-text);
}
.colorize-white {
    filter: var(--color-filter-text-reversed);
}
.colorize-negative {
    filter: var(--color-filter-negative);
}
.colorize-positive {
    filter: var(--color-filter-positive);
}

/****************************************************************
* Border
*****************************************************************/
.border-0 {
    border-width: 0;
}
.border {
    border-width: var(--border-size, 1px);
}

.border-b {
    border-block-width: var(--border-size, 1px);
}
.border-bs {
    border-block-start-width: var(--border-size, 1px);
}
.border-be {
    border-block-end-width: var(--border-size, 1px);
}

.border-i {
    border-inline-width: var(--border-size, 1px);
}
.border-is {
    border-inline-start-width: var(--border-size, 1px);
}
.border-ie {
    border-inline-end-width: var(--border-size, 1px);
}

.border-main {
    border-color: var(--color-border);
}
.border-dark {
    border-color: var(--color-border-dark);
}

.rounded-none {
    border-radius: 0;
}
.rounded-xs {
    border-radius: var(--rounded-xs);
}
.rounded-sm {
    border-radius: var(--rounded-sm);
}
.rounded-md {
    border-radius: var(--rounded-md);
}
.rounded-lg {
    border-radius: var(--rounded-lg);
}
.rounded-full {
    border-radius: var(--rounded-full);
}

/****************************************************************
* Shadow
*****************************************************************/
.shadow-none {
    box-shadow: none;
}
.shadow-xs {
    box-shadow: var(--shadow-xs);
}
.shadow-sm {
    box-shadow: var(--shadow-sm);
}
.shadow-md {
    box-shadow: var(--shadow-md);
}
.shadow-lg {
    box-shadow: var(--shadow-lg);
}

/****************************************************************
* Layout
*****************************************************************/
.block {
    display: block;
}
.inline {
    display: inline;
}
.inline-block {
    display: inline-block;
}

.relative {
    position: relative;
}
.sticky {
    position: sticky;
}

.min-i-0 {
    min-inline-size: 0;
}
.max-i-full {
    max-inline-size: 100%;
}

.b-full {
    block-size: 100%;
}
.i-full {
    inline-size: 100%;
}
.i-min {
    inline-size: min-content;
}

.overflow-x-auto {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}
.overflow-y-auto {
    overflow-y: auto;
    scroll-snap-type: y mandatory;
}
.overflow-hidden {
    overflow: hidden;
}

.object-contain {
    object-fit: contain;
}
.object-cover {
    object-fit: cover;
}

.aspect-square {
    aspect-ratio: 1;
}
.aspect-widescreen {
    aspect-ratio: 16 / 9;
}

/****************************************************************
* Margin
*****************************************************************/
.m-0 {
    margin: 0;
}
.m-1 {
    margin: var(--size-1);
}
.m-2 {
    margin: var(--size-2);
}
.m-3 {
    margin: var(--size-3);
}
.m-4 {
    margin: var(--size-4);
}
.m-5 {
    margin: var(--size-5);
}
.m-6 {
    margin: var(--size-6);
}
.m-8 {
    margin: var(--size-8);
}
.m-10 {
    margin: var(--size-10);
}
.m-auto {
    margin: auto;
}

.mb-0 {
    margin-block: 0;
}
.mb-1 {
    margin-block: var(--size-1);
}
.mb-2 {
    margin-block: var(--size-2);
}
.mb-3 {
    margin-block: var(--size-3);
}
.mb-4 {
    margin-block: var(--size-4);
}
.mb-5 {
    margin-block: var(--size-5);
}
.mb-6 {
    margin-block: var(--size-6);
}
.mb-8 {
    margin-block: var(--size-8);
}
.mb-10 {
    margin-block: var(--size-10);
}
.mb-auto {
    margin-block: auto;
}

.mbs-0 {
    margin-block-start: 0;
}
.mbs-1 {
    margin-block-start: var(--size-1);
}
.mbs-2 {
    margin-block-start: var(--size-2);
}
.mbs-3 {
    margin-block-start: var(--size-3);
}
.mbs-4 {
    margin-block-start: var(--size-4);
}
.mbs-5 {
    margin-block-start: var(--size-5);
}
.mbs-6 {
    margin-block-start: var(--size-6);
}
.mbs-8 {
    margin-block-start: var(--size-8);
}
.mbs-10 {
    margin-block-start: var(--size-10);
}
.mbs-auto {
    margin-block-start: auto;
}

.mbe-0 {
    margin-block-end: 0;
}
.mbe-1 {
    margin-block-end: var(--size-1);
}
.mbe-2 {
    margin-block-end: var(--size-2);
}
.mbe-3 {
    margin-block-end: var(--size-3);
}
.mbe-4 {
    margin-block-end: var(--size-4);
}
.mbe-5 {
    margin-block-end: var(--size-5);
}
.mbe-6 {
    margin-block-end: var(--size-6);
}
.mbe-8 {
    margin-block-end: var(--size-8);
}
.mbe-10 {
    margin-block-end: var(--size-10);
}
.mbe-auto {
    margin-block-end: auto;
}

.mi-0 {
    margin-inline: 0;
}
.mi-1 {
    margin-inline: var(--size-1);
}
.mi-2 {
    margin-inline: var(--size-2);
}
.mi-3 {
    margin-inline: var(--size-3);
}
.mi-4 {
    margin-inline: var(--size-4);
}
.mi-5 {
    margin-inline: var(--size-5);
}
.mi-6 {
    margin-inline: var(--size-6);
}
.mi-8 {
    margin-inline: var(--size-8);
}
.mi-10 {
    margin-inline: var(--size-10);
}
.mi-auto {
    margin-inline: auto;
}

.mis-0 {
    margin-inline-start: 0;
}
.mis-1 {
    margin-inline-start: var(--size-1);
}
.mis-2 {
    margin-inline-start: var(--size-2);
}
.mis-3 {
    margin-inline-start: var(--size-3);
}
.mis-4 {
    margin-inline-start: var(--size-4);
}
.mis-5 {
    margin-inline-start: var(--size-5);
}
.mis-6 {
    margin-inline-start: var(--size-6);
}
.mis-8 {
    margin-inline-start: var(--size-8);
}
.mis-10 {
    margin-inline-start: var(--size-10);
}
.mis-auto {
    margin-inline-start: auto;
}

.mie-0 {
    margin-inline-end: 0;
}
.mie-1 {
    margin-inline-end: var(--size-1);
}
.mie-2 {
    margin-inline-end: var(--size-2);
}
.mie-3 {
    margin-inline-end: var(--size-3);
}
.mie-4 {
    margin-inline-end: var(--size-4);
}
.mie-5 {
    margin-inline-end: var(--size-5);
}
.mie-6 {
    margin-inline-end: var(--size-6);
}
.mie-8 {
    margin-inline-end: var(--size-8);
}
.mie-10 {
    margin-inline-end: var(--size-10);
}
.mie-auto {
    margin-inline-end: auto;
}

/****************************************************************
* Padding
*****************************************************************/
.p-0 {
    padding: 0;
}
.p-1 {
    padding: var(--size-1);
}
.p-2 {
    padding: var(--size-2);
}
.p-3 {
    padding: var(--size-3);
}
.p-4 {
    padding: var(--size-4);
}
.p-5 {
    padding: var(--size-5);
}
.p-6 {
    padding: var(--size-6);
}
.p-8 {
    padding: var(--size-8);
}
.p-10 {
    padding: var(--size-10);
}

.pb-0 {
    padding-block: 0;
}
.pb-1 {
    padding-block: var(--size-1);
}
.pb-2 {
    padding-block: var(--size-2);
}
.pb-3 {
    padding-block: var(--size-3);
}
.pb-4 {
    padding-block: var(--size-4);
}
.pb-5 {
    padding-block: var(--size-5);
}
.pb-6 {
    padding-block: var(--size-6);
}
.pb-8 {
    padding-block: var(--size-8);
}
.pb-10 {
    padding-block: var(--size-10);
}

.pbs-0 {
    padding-block-start: 0;
}
.pbs-1 {
    padding-block-start: var(--size-1);
}
.pbs-2 {
    padding-block-start: var(--size-2);
}
.pbs-3 {
    padding-block-start: var(--size-3);
}
.pbs-4 {
    padding-block-start: var(--size-4);
}
.pbs-5 {
    padding-block-start: var(--size-5);
}
.pbs-6 {
    padding-block-start: var(--size-6);
}
.pbs-8 {
    padding-block-start: var(--size-8);
}
.pbs-10 {
    padding-block-start: var(--size-10);
}

.pbe-0 {
    padding-block-end: 0;
}
.pbe-1 {
    padding-block-end: var(--size-1);
}
.pbe-2 {
    padding-block-end: var(--size-2);
}
.pbe-3 {
    padding-block-end: var(--size-3);
}
.pbe-4 {
    padding-block-end: var(--size-4);
}
.pbe-5 {
    padding-block-end: var(--size-5);
}
.pbe-6 {
    padding-block-end: var(--size-6);
}
.pbe-8 {
    padding-block-end: var(--size-8);
}
.pbe-10 {
    padding-block-end: var(--size-10);
}

.pi-0 {
    padding-inline: 0;
}
.pi-1 {
    padding-inline: var(--size-1);
}
.pi-2 {
    padding-inline: var(--size-2);
}
.pi-3 {
    padding-inline: var(--size-3);
}
.pi-4 {
    padding-inline: var(--size-4);
}
.pi-5 {
    padding-inline: var(--size-5);
}
.pi-6 {
    padding-inline: var(--size-6);
}
.pi-8 {
    padding-inline: var(--size-8);
}
.pi-10 {
    padding-inline: var(--size-10);
}

.pis-0 {
    padding-inline-start: 0;
}
.pis-1 {
    padding-inline-start: var(--size-1);
}
.pis-2 {
    padding-inline-start: var(--size-2);
}
.pis-3 {
    padding-inline-start: var(--size-3);
}
.pis-4 {
    padding-inline-start: var(--size-4);
}
.pis-5 {
    padding-inline-start: var(--size-5);
}
.pis-6 {
    padding-inline-start: var(--size-6);
}
.pis-8 {
    padding-inline-start: var(--size-8);
}
.pis-10 {
    padding-inline-start: var(--size-10);
}

.pie-0 {
    padding-inline-end: 0;
}
.pie-1 {
    padding-inline-end: var(--size-1);
}
.pie-2 {
    padding-inline-end: var(--size-2);
}
.pie-3 {
    padding-inline-end: var(--size-3);
}
.pie-4 {
    padding-inline-end: var(--size-4);
}
.pie-5 {
    padding-inline-end: var(--size-5);
}
.pie-6 {
    padding-inline-end: var(--size-6);
}
.pie-8 {
    padding-inline-end: var(--size-8);
}
.pie-10 {
    padding-inline-end: var(--size-10);
}

/****************************************************************
* Hiding/Showing
*****************************************************************/
.show\@sm,
.show\@md,
.show\@lg {
    display: none;
}

.show\@sm {
    @media (width >= 40rem) {
        display: flex;
    }
}
.show\@md {
    @media (width >= 48rem) {
        display: flex;
    }
}
.show\@lg {
    @media (width >= 64rem) {
        display: flex;
    }
}

.hide\@sm {
    @media (width >= 40rem) {
        display: none;
    }
}
.hide\@md {
    @media (width >= 48rem) {
        display: none;
    }
}
.hide\@lg {
    @media (width >= 64rem) {
        display: none;
    }
}

.hide\@pwa {
    @media (display-mode: standalone) {
        display: none;
    }
}
.hide\@browser {
    @media (display-mode: browser) {
        display: none;
    }
}

.hide\@print {
    @media print {
        display: none;
    }
}

/****************************************************************
* Accessibility
*****************************************************************/
.sr-only {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}

/****************************************************************
* Width
*****************************************************************/
.w-0 {
    width: 0;
}
.w-1 {
    width: var(--size-1);
}
.w-2 {
    width: var(--size-2);
}
.w-3 {
    width: var(--size-3);
}
.w-4 {
    width: var(--size-4);
}
.w-5 {
    width: var(--size-5);
}
.w-6 {
    width: var(--size-6);
}
.w-8 {
    width: var(--size-8);
}
.w-10 {
    width: var(--size-10);
}
.w-20 {
    width: var(--size-20);
}
.w-half {
    width: 50%;
}

.w-full {
    width: 100%;
}
.max-w-xl {
    max-inline-size: 25rem;
}
.max-w-2xl {
    max-inline-size: 42rem;
}
.max-w-3xl {
    max-inline-size: 48rem;
}
.max-w-4xl {
    max-inline-size: 56rem;
}
.max-w-5xl {
    max-inline-size: 64rem;
}
.max-w-6xl {
    max-inline-size: 72rem;
}
.max-w-full {
    max-inline-size: 100%;
}
.min-w-0 {
    min-width: 0;
}
.min-w-full {
    min-width: 100%;
}
.min-w-half {
    min-width: 50%;
}
.min-w-10 {
    min-width: 10rem;
}
.min-w-20 {
    min-width: 20rem;
}
.min-w-30 {
    min-width: 30rem;
}
.min-w-40 {
    min-width: 40rem;
}
.mx-auto {
    margin-inline-start: auto;
    margin-inline-end: auto;
}

/****************************************************************
* height
*****************************************************************/
.h-0 {
    block-size: 0;
}
.h-1 {
    block-size: var(--size-1);
}
.h-2 {
    block-size: var(--size-2);
}
.h-3 {
    block-size: var(--size-3);
}
.h-4 {
    block-size: var(--size-4);
}
.h-5 {
    block-size: var(--size-5);
}
.h-6 {
    block-size: var(--size-6);
}
.h-8 {
    block-size: var(--size-8);
}
.h-10 {
    block-size: var(--size-10);
}
.h-full {
    block-size: 100%;
}
.h-screen {
    block-size: 100vh;
}

/****************************************************************
* Display
*****************************************************************/

.hidden {
    display: none;
}
.block {
    display: block;
}
.inline {
    display: inline;
}
.inline-block {
    display: inline-block;
}