body {
    margin: 0;
    display: flex;
    flex-direction: column;
}

p {
    margin-top: 0;
    margin-bottom: 1lh;
    strong {
        font-weight: 600;
    }
}
p:last-child {
    margin-bottom: 0;
}
a, u {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.33em;
    text-decoration-thickness: 0.033em;
    text-decoration-color: currentColor;
    text-decoration-color: color-mix(in srgb, currentColor, transparent 25%);
}
a[href^="mailto:"] {
    word-break: break-all;
}

ul {
    padding-inline-start: 16px;
    &:is(li > ul) {
        padding-inline-start: 32px;
    }
}

li {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    &:not(ul > li) {
        list-style: none;
    }
}


/*headings*/
:is(h1, h2, h3, h4, h5, h6),
.wp-block-post-title
{
    margin-top: 0;
    margin-bottom: 0.55em;

    &:not(:first-child) {
        margin-top: 2rem;
    }
    &:last-child {
        margin-bottom: 0;
    }
    p {
        display: contents;
    }

}
:where(h1, h2, h3, h4, h5, h6, label) + :is(h1, h2, h3, h4, h5, h6)
{
    margin-top: 0 !important;
}
:where(h1, h2, h3, h4, h5, h6):has(+h1, +h2, +h3, +h4, +h5, +h6)
{
    margin-bottom: 0.5rem!important;
}
h1:has(+h1), h2:has(+h2), h3:has(+h3), h4:has(+h4), h5:has(+h5), h6:has(+h6)
{
    margin-bottom: 0 !important;
}

:is(h1, h2, h3, h4, h5, h6):has(a) {
    line-height: 1.5;
}
h1 {
    --defaultFontSize: 3rem;
}
h2 {
    --defaultFontSize: 2.5rem;
}
h3 {
    --defaultFontSize: 1.75rem;
}
h4 {
    --defaultFontSize: 1.5rem;
}
h5 {
    --defaultFontSize: 1.875rem;
}
h6 {
    --defaultFontSize: 1.175rem;
    & + * {
        margin-top: 0;
    }
}

img {
    display: block;
    height: auto;
    max-width: 100%;
}

input::-webkit-input-placeholder { color: #aaa; }
input::-moz-placeholder { color: #aaa; }
input::-ms-input-placeholder { color: #aaa; }
input::placeholder { color: #aaa; }



/**============================================================================
 * HELPER CLASSES & CONTENT MODIFIERS
 =============================================================================*/
.display\:hidden,
.display\:none
{
    display: none!important;
}
.\@desktop\:display\:hidden,
.\@desktop\:display\:none,
[id^="mobile"]
{
    @media (min-width: 769px) {
        display: none!important;
    }
}
.\@mobile\:display\:hidden,
.\@mobile\:display\:none,
[id^="desktop"]
{
    @media (max-width: 768px) {
        display: none!important;
    }
}

.text-direction\:vertical { writing-mode: vertical-rl; }
.text-transform\:uppercase { text-transform: uppercase; }
@media (max-width: 768px) {
    .\@mobile\:text-direction\:vertical { writing-mode: vertical-rl; }
    .\@mobile\:text-transform\:uppercase { text-transform: uppercase; }
}
@media (min-width: 769px) {
    .\@desktop\:text-direction\:vertical { writing-mode: vertical-rl; }
    .\@desktop\:text-transform\:uppercase { text-transform: uppercase; }
}


/**============================================================================
 * FONTS
 =============================================================================*/
:root {
    @media (max-width: 768px) {
        --fontSizeTiny: 10px;
        --fontSizeSmall: 13px;
        --fontSizeMedium: 16px;
        --fontSizeLarge: 20px;
        --fontSizeXLarge: 25px;
        --fontSizeHuge: 30px;
    }
    @media (min-width: 769px) {
        --fontSizeTiny: 14px;
        --fontSizeSmall: 17px;
        --fontSizeMedium: 30px;
        --fontSizeLarge: 49px;
        --fontSizeXLarge: 60px;
        --fontSizeHuge: 90px;
    }
}
.font-size\:tiny { font-size: var(--fontSizeTiny)!important; }
.font-size\:small { font-size: var(--fontSizeSmall)!important; }
.font-size\:medium { font-size: var(--fontSizeMedium)!important; }
.font-size\:large { font-size: var(--fontSizeLarge)!important; }
.font-size\:xlarge { font-size: var(--fontSizeXLarge)!important; }
.font-size\:huge { font-size: var(--fontSizeHuge)!important; }
.font-size\:smaller { font-size: 0.6857em; }
.font-size\:larger { font-size: 1.142857em; }
@media (max-width: 768px) {
    .\@mobile\:font-size\:tiny { font-size: var(--fontSizeTiny)!important; }
    .\@mobile\:font-size\:small { font-size: var(--fontSizeSmall)!important; }
    .\@mobile\:font-size\:medium { font-size: var(--fontSizeMedium)!important; }
    .\@mobile\:font-size\:large { font-size: var(--fontSizeLarge)!important; }
    .\@mobile\:font-size\:xlarge { font-size: var(--fontSizeXLarge)!important; }
    .\@mobile\:font-size\:huge { font-size: var(--fontSizeHuge)!important; }
    .\@mobile\:font-size\:smaller { font-size: 0.6857em; }
    .\@mobile\:font-size\:larger { font-size: 1.142857em; }
}
@media (min-width: 769px) {
    .\@desktop\:font-size\:tiny { font-size: var(--fontSizeTiny)!important; }
    .\@desktop\:font-size\:small { font-size: var(--fontSizeSmall)!important; }
    .\@desktop\:font-size\:medium { font-size: var(--fontSizeMedium)!important; }
    .\@desktop\:font-size\:large { font-size: var(--fontSizeLarge)!important; }
    .\@desktop\:font-size\:xlarge { font-size: var(--fontSizeXLarge)!important; }
    .\@desktop\:font-size\:huge { font-size: var(--fontSizeHuge)!important; }
    .\@desktop\:font-size\:smaller { font-size: 0.6857em; }
    .\@desktop\:font-size\:larger { font-size: 1.142857em; }
}

.font-weight\:100, .font-weight\:thin { font-weight: 100; &:is(a), a { text-decoration-thickness: 0.011em; } }
.font-weight\:200, .font-weight\:extra-light { font-weight: 200; &:is(a), a { text-decoration-thickness: 0.022em; } }
.font-weight\:300, .font-weight\:light { font-weight: 300; &:is(a), a { text-decoration-thickness: 0.033em; } }
.font-weight\:400, .font-weight\:normal, .font-weight\:regular { font-weight: 400; &:is(a), a { text-decoration-thickness: 0.055em; } }
.font-weight\:500, .font-weight\:medium { font-weight: 500; &:is(a), a { text-decoration-thickness: 0.077em; } }
.font-weight\:600, .font-weight\:semi-bold, .font-weight\:demi-bold { font-weight: 600; &:is(a), a { text-decoration-thickness: 0.099em; } }
.font-weight\:700, .font-weight\:bold { font-weight: 700; &:is(a), a { text-decoration-thickness: 0.111em; } }
.font-weight\:800, .font-weight\:extra-bold { font-weight: 800; &:is(a), a { text-decoration-thickness: 0.133em; } }
.font-weight\:900, .font-weight\:black, .font-weight\:heavy { font-weight: 900; &:is(a), a { text-decoration-thickness: 0.155em; } }
.font-weight\:950, .font-weight\:extra-black { font-weight: 950; &:is(a), a { text-decoration-thickness: 0.177em; } }
.line-height\:none, .line-height\:0 { line-height: 0; }


/**============================================================================
 * ALIGN / PLACEMENT
 =============================================================================*/

.justify-self\:left { margin-right: auto !important; }
.justify-self\:right { margin-left: auto !important; }
.justify-self\:center { margin-left: auto !important; margin-right: auto !important; }
.align-self\:top { margin-bottom: auto !important; }
.align-self\:middle { margin-top: auto !important; margin-bottom: auto !important; }
.align-self\:bottom { margin-top: auto !important; }
.text-align\:left { text-align: left; p { text-align: inherit; } }
.text-align\:center { text-align: center; p { text-align: inherit; } }
.text-align\:right { text-align: right; p { text-align: inherit; } }

.text-align\:left { justify-items: start; justify-content: start; }
.text-align\:center { justify-items: center; justify-content: center; }
.text-align\:right { justify-items: end; justify-content: end; }

.display\:flex-column
{
    &.text-align\:left { align-items: start; align-content: start; }
    &.text-align\:center { align-items: center; align-content: center; }
    &.text-align\:right { align-items: end; align-content: end; }
}

.margin\:0, .margin\:none { margin: auto !important; }
.margin\:auto { margin: auto !important; }
.margin-block\:0, .margin-right\:y { margin-top: 0 !important; margin-bottom: 0 !important; }
.margin-block\:auto { margin-top: auto !important; margin-bottom: auto !important; }
.margin-inline\:0, .margin-right\:x { margin-left: 0 !important; margin-right: 0 !important; }
.margin-inline\:auto { margin-left: auto !important; margin-right: auto !important; }
.margin-top\:0, .margin-top\:none { margin-top: 0 !important; }
.margin-top\:auto { margin-top: auto !important; }
.margin-bottom\:0, .margin-bottom\:none { margin-bottom: 0 !important; }
.margin-bottom\:auto { margin-bottom: auto !important; }
.margin-left\:0, .margin-left\:none { margin-left: 0 !important; }
.margin-left\:auto { margin-left: auto !important; }
.margin-right\:0, .margin-right\:none { margin-right: 0 !important; }
.margin-right\:auto { margin-right: auto !important; }


@media (max-width: 768px) {

    .\@mobile\:justify-self\:left { margin-right: auto !important; }
    .\@mobile\:justify-self\:center { margin-left: auto !important; margin-right: auto !important; }
    .\@mobile\:justify-self\:right { margin-left: auto !important; }
    .\@mobile\:align-self\:top { margin-bottom: auto !important; }
    .\@mobile\:align-self\:middle { margin-top: auto !important; margin-bottom: auto !important; }
    .\@mobile\:align-self\:bottom { margin-top: auto !important; }
    .\@mobile\:text-align\:left { text-align: left; p { text-align: inherit; } }
    .\@mobile\:text-align\:center { text-align: center; p { text-align: inherit; } }
    .\@mobile\:text-align\:right { text-align: right; p { text-align: inherit; } }

    .\@mobile\:text-align\:left { justify-items: start; justify-content: start; }
    .\@mobile\:text-align\:center { justify-items: center; justify-content: center; }
    .\@mobile\:text-align\:right { justify-items: end; justify-content: end; }

    .\@mobile\:display\:flex-column
    {
        &.\@mobile\:text-align\:left { align-items: start; align-content: start; }
        &.\@mobile\:text-align\:center { align-items: center; align-content: center; }
        &.\@mobile\:text-align\:right { align-items: end; align-content: end; }
    }

    .\@mobile\:margin\:0, .margin\:none { margin: auto !important; }
    .\@mobile\:margin\:auto { margin: auto !important; }
    .\@mobile\:margin-block\:0, .margin-block\:none { margin-top: 0 !important; margin-bottom: 0 !important; }
    .\@mobile\:margin-block\:auto { margin-top: auto !important; margin-bottom: auto !important; }
    .\@mobile\:margin-inline\:0, .margin-inline\:none { margin-left: 0 !important; margin-right: 0 !important; }
    .\@mobile\:margin-inline\:auto { margin-left: auto !important; margin-right: auto !important; }
    .\@mobile\:margin-top\:0, .\@mobile\:margin-top\:none { margin-top: 0 !important; }
    .\@mobile\:margin-top\:auto { margin-top: auto !important; }
    .\@mobile\:margin-bottom\:0, .\@mobile\:margin-bottom\:none { margin-bottom: 0 !important; }
    .\@mobile\:margin-bottom\:auto { margin-bottom: auto !important; }
    .\@mobile\:margin-left\:0, .\@mobile\:margin-left\:none { margin-left: 0 !important; }
    .\@mobile\:margin-left\:auto { margin-left: auto !important; }
    .\@mobile\:margin-right\:0, .\@mobile\:margin-right\:none { margin-right: 0 !important; }
    .\@mobile\:margin-right\:auto { margin-right: auto !important; }
}

@media (min-width: 769px) {

    .\@desktop\:justify-self\:left { margin-right: auto !important; }
    .\@desktop\:justify-self\:center { margin-left: auto !important; margin-right: auto !important; }
    .\@desktop\:justify-self\:right { margin-left: auto !important; }
    .\@desktop\:align-self\:top { margin-bottom: auto !important; }
    .\@desktop\:align-self\:middle { margin-top: auto !important; margin-bottom: auto !important; }
    .\@desktop\:align-self\:bottom { margin-top: auto !important; }
    .\@desktop\:text-align\:left { text-align: left; p { text-align: inherit; } }
    .\@desktop\:text-align\:center { text-align: center; p { text-align: inherit; } }
    .\@desktop\:text-align\:right { text-align: right; p { text-align: inherit; } }

    .\@desktop\:text-align\:left { justify-items: start; justify-content: start; }
    .\@desktop\:text-align\:center { justify-items: center; justify-content: center; }
    .\@desktop\:text-align\:right { justify-items: end; justify-content: end; }

    .\@desktop\:display\:flex-column
    {
        &.\@desktop\:text-align\:left { align-items: start; align-content: start; }
        &.\@desktop\:text-align\:center { align-items: center; align-content: center; }
        &.\@desktop\:text-align\:right { align-items: end; align-content: end; }
    }

    .\@desktop\:margin\:0, .margin\:none { margin: auto !important; }
    .\@desktop\:margin\:auto { margin: auto !important; }
    .\@desktop\:margin-block\:0, .margin-block\:none { margin-top: 0 !important; margin-bottom: 0 !important; }
    .\@desktop\:margin-block\:auto { margin-top: auto !important; margin-bottom: auto !important; }
    .\@desktop\:margin-inline\:0, .margin-inline\:none { margin-left: 0 !important; margin-right: 0 !important; }
    .\@desktop\:margin-inline\:auto { margin-left: auto !important; margin-right: auto !important; }
    .\@desktop\:margin-top\:0, .\@desktop\:margin-top\:none { margin-top: 0 !important; }
    .\@desktop\:margin-top\:auto { margin-top: auto !important; }
    .\@desktop\:margin-bottom\:0, .\@desktop\:margin-bottom\:none { margin-bottom: 0 !important; }
    .\@desktop\:margin-bottom\:auto { margin-bottom: auto !important; }
    .\@desktop\:margin-left\:0, .\@desktop\:margin-left\:none { margin-left: 0 !important; }
    .\@desktop\:margin-left\:auto { margin-left: auto !important }
    .\@desktop\:margin-right\:0, .\@desktop\:margin-right\:none { margin-right: 0 !important; }
    .\@desktop\:margin-right\:auto { margin-right: auto !important; }
}


/**============================================================================
 * PADDING / MARGIN
 =============================================================================*/
:root {
    --paddingTiny: 6px;
    --paddingSmall: 12px;
    --paddingMedium: 24px;
    --paddingLarge: 48px;
    --paddingHuge: 96px;
}
@property --paddingLeft {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}
@property --paddingRight {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}
@property --paddingTop {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}
@property --paddingBottom {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}
[class*=" padding:"], [class^="padding:"] {
    padding-left: var(--paddingLeft);
    padding-right: var(--paddingRight);
    padding-top: var(--paddingTop);
    padding-bottom: var(--paddingBottom);
    box-sizing: border-box;
}
[class*=" padding-y:"], [class^="padding-y:"], [class*=" padding-block:"], [class^="padding-block:"] { padding-top: var(--paddingTop); padding-bottom: var(--paddingBottom); box-sizing: border-box; }
[class*=" padding-x:"], [class^="padding-x:"], [class*=" padding-inline:"], [class^="padding-inline:"] { padding-left: var(--paddingLeft); padding-right: var(--paddingRight); box-sizing: border-box; }
[class*=" padding-left:"], [class^="padding-left:"] { padding-left: var(--paddingLeft); box-sizing: border-box; }
[class*=" padding-right:"], [class^="padding-right:"] { padding-right: var(--paddingRight); box-sizing: border-box; }
[class*=" padding-top:"], [class^="padding-top:"] { padding-top: var(--paddingTop); box-sizing: border-box; }
[class*=" padding-bottom:"], [class^="padding-bottom:"] { padding-bottom: var(--paddingBottom); box-sizing: border-box; }

.padding\:tiny, .padding-y\:tiny, .padding-block\:tiny { --paddingTop: var(--paddingTiny); --paddingBottom: var(--paddingTiny); }
.padding\:small, .padding-y\:small, .padding-block\:small { --paddingTop: var(--paddingSmall); --paddingBottom: var(--paddingSmall); }
.padding\:medium, .padding-y\:medium, .padding-block\:medium { --paddingTop: var(--paddingMedium); --paddingBottom: var(--paddingMedium); }
.padding\:large, .padding-y\:large, .padding-block\:large { --paddingTop: var(--paddingLarge); --paddingBottom: var(--paddingLarge); }
.padding\:huge, .padding-y\:huge, .padding-block\:huge { --paddingTop: var(--paddingHuge); --paddingBottom: var(--paddingHuge); }

.padding\:tiny, .padding-x\:tiny, .padding-inline\:tiny { --paddingLeft: var(--paddingTiny); --paddingRight: var(--paddingTiny); }
.padding\:small, .padding-x\:small, .padding-inline\:small { --paddingLeft: var(--paddingSmall); --paddingRight: var(--paddingSmall); }
.padding\:medium, .padding-x\:medium, .padding-inline\:medium { --paddingLeft: var(--paddingMedium); --paddingRight: var(--paddingMedium); }
.padding\:large, .padding-x\:large, .padding-inline\:large { --paddingLeft: var(--paddingLarge); --paddingRight: var(--paddingLarge); }
.padding\:huge, .padding-x\:huge, .padding-inline\:huge { --paddingLeft: var(--paddingHuge); --paddingRight: var(--paddingHuge); }

.padding-left\:linked { --paddingLeft: inherit; }
.padding-left\:none { --paddingLeft: 0; }
.padding-left\:tiny { --paddingLeft: var(--paddingTiny); }
.padding-left\:small { --paddingLeft: var(--paddingSmall); }
.padding-left\:medium { --paddingLeft: var(--paddingMedium); }
.padding-left\:large { --paddingLeft: var(--paddingLarge); }
.padding-left\:huge { --paddingLeft: var(--paddingHuge); }

.padding-right\:linked { --paddingRight: var(--paddingLeft); }
.padding-right\:none { --paddingRight: 0; }
.padding-right\:tiny { --paddingRight: var(--paddingTiny); }
.padding-right\:small { --paddingRight: var(--paddingSmall); }
.padding-right\:medium { --paddingRight: var(--paddingMedium); }
.padding-right\:large { --paddingRight: var(--paddingLarge); }
.padding-right\:huge { --paddingRight: var(--paddingHuge); }

.padding-top\:linked { --paddingTop: var(--paddingLeft); }
.padding-top\:none { --paddingTop: 0; }
.padding-top\:tiny { --paddingTop: var(--paddingTiny); }
.padding-top\:small { --paddingTop: var(--paddingSmall); }
.padding-top\:medium { --paddingTop: var(--paddingMedium); }
.padding-top\:large { --paddingTop: var(--paddingLarge); }
.padding-top\:huge { --paddingTop: var(--paddingHuge); }

.padding-bottom\:linked { --paddingBottom: var(--paddingTop); }
.padding-bottom\:none { --paddingBottom: 0; }
.padding-bottom\:tiny { --paddingBottom: var(--paddingTiny); }
.padding-bottom\:small { --paddingBottom: var(--paddingSmall); }
.padding-bottom\:medium { --paddingBottom: var(--paddingMedium); }
.padding-bottom\:large { --paddingBottom: var(--paddingLarge); }
.padding-bottom\:huge { --paddingBottom: var(--paddingHuge); }

.column-gap\:linked { column-gap: var(--paddingTop); }
.column-gap\:none { column-gap: 0 !important; }
.column-gap\:tiny { column-gap: var(--paddingTiny); }
.column-gap\:small { column-gap: var(--paddingSmall); }
.column-gap\:medium { column-gap: var(--paddingMedium); }
.column-gap\:large { column-gap: var(--paddingLarge); }
.column-gap\:huge { column-gap: var(--paddingHuge); }

.row-gap\:linked { row-gap: var(--paddingTop); }
.row-gap\:inherit { row-gap: inherit; }
.row-gap\:none { row-gap: 0 !important; }
.row-gap\:tiny { row-gap: var(--paddingTiny); }
.row-gap\:small { row-gap: var(--paddingSmall); }
.row-gap\:medium { row-gap: var(--paddingMedium); }
.row-gap\:large { row-gap: var(--paddingLarge); }
.row-gap\:huge { row-gap: var(--paddingHuge); }

@media (max-width: 768px) {

    [class*="@mobile:padding:"] {
        padding-left: var(--paddingLeft);
        padding-right: var(--paddingRight);
        padding-top: var(--paddingTop);
        padding-bottom: var(--paddingBottom);
        box-sizing: border-box;
    }
    [class*="@mobile:padding-y:"], [class*="@mobile:padding-block:"] { padding-top: var(--paddingTop); padding-bottom: var(--paddingBottom); box-sizing: border-box; }
    [class*="@mobile:padding-x:"], [class*="@mobile:padding-inline:"] { padding-left: var(--paddingLeft); padding-right: var(--paddingRight); box-sizing: border-box; }
    [class*="@mobile:padding-left:"] { padding-left: var(--paddingLeft); box-sizing: border-box; }
    [class*="@mobile:padding-right:"] { padding-right: var(--paddingRight); box-sizing: border-box; }
    [class*="@mobile:padding-top:"] { padding-top: var(--paddingTop); box-sizing: border-box; }
    [class*="@mobile:padding-bottom:"] { padding-bottom: var(--paddingBottom); box-sizing: border-box; }

    .\@mobile\:padding\:tiny, .\@mobile\:padding-y\:tiny, .\@mobile\:padding-block\:tiny { --paddingTop: var(--paddingTiny); --paddingBottom: var(--paddingTiny); }
    .\@mobile\:padding\:small, .\@mobile\:padding-y\:small, .\@mobile\:padding-block\:small { --paddingTop: var(--paddingSmall); --paddingBottom: var(--paddingSmall); }
    .\@mobile\:padding\:medium, .\@mobile\:padding-y\:medium, .\@mobile\:padding-block\:medium { --paddingTop: var(--paddingMedium); --paddingBottom: var(--paddingMedium); }
    .\@mobile\:padding\:large, .\@mobile\:padding-y\:large, .\@mobile\:padding-block\:large { --paddingTop: var(--paddingLarge); --paddingBottom: var(--paddingLarge); }
    .\@mobile\:padding\:huge, .\@mobile\:padding-y\:huge, .\@mobile\:padding-block\:huge { --paddingTop: var(--paddingHuge); --paddingBottom: var(--paddingHuge); }

    .\@mobile\:padding\:tiny, .\@mobile\:padding-x\:tiny, .\@mobile\:padding-inline\:tiny { --paddingLeft: var(--paddingTiny); --paddingRight: var(--paddingTiny); }
    .\@mobile\:padding\:small, .\@mobile\:padding-x\:small, .\@mobile\:padding-inline\:small { --paddingLeft: var(--paddingSmall); --paddingRight: var(--paddingSmall); }
    .\@mobile\:padding\:medium, .\@mobile\:padding-x\:medium, .\@mobile\:padding-inline\:medium { --paddingLeft: var(--paddingMedium); --paddingRight: var(--paddingMedium); }
    .\@mobile\:padding\:large, .\@mobile\:padding-x\:large, .\@mobile\:padding-inline\:large { --paddingLeft: var(--paddingLarge); --paddingRight: var(--paddingLarge); }
    .\@mobile\:padding\:huge, .\@mobile\:padding-x\:huge, .\@mobile\:padding-inline\:huge { --paddingLeft: var(--paddingHuge); --paddingRight: var(--paddingHuge); }

    .\@mobile\:padding-left\:linked { --paddingLeft: inherit; }
    .\@mobile\:padding-left\:none { --paddingLeft: 0; }
    .\@mobile\:padding-left\:tiny { --paddingLeft: var(--paddingTiny); }
    .\@mobile\:padding-left\:small { --paddingLeft: var(--paddingSmall); }
    .\@mobile\:padding-left\:medium { --paddingLeft: var(--paddingMedium); }
    .\@mobile\:padding-left\:large { --paddingLeft: var(--paddingLarge); }
    .\@mobile\:padding-left\:huge { --paddingLeft: var(--paddingHuge); }

    .\@mobile\:padding-right\:linked { --paddingRight: var(--paddingLeft); }
    .\@mobile\:padding-right\:none { --paddingRight: 0; }
    .\@mobile\:padding-right\:tiny { --paddingRight: var(--paddingTiny); }
    .\@mobile\:padding-right\:small { --paddingRight: var(--paddingSmall); }
    .\@mobile\:padding-right\:medium { --paddingRight: var(--paddingMedium); }
    .\@mobile\:padding-right\:large { --paddingRight: var(--paddingLarge); }
    .\@mobile\:padding-right\:huge { --paddingRight: var(--paddingHuge); }

    .\@mobile\:padding-top\:linked { --paddingTop: var(--paddingLeft); }
    .\@mobile\:padding-top\:none { --paddingTop: 0; }
    .\@mobile\:padding-top\:tiny { --paddingTop: var(--paddingTiny); }
    .\@mobile\:padding-top\:small { --paddingTop: var(--paddingSmall); }
    .\@mobile\:padding-top\:medium { --paddingTop: var(--paddingMedium); }
    .\@mobile\:padding-top\:large { --paddingTop: var(--paddingLarge); }
    .\@mobile\:padding-top\:huge { --paddingTop: var(--paddingHuge); }

    .\@mobile\:padding-bottom\:linked { --paddingBottom: var(--paddingTop); }
    .\@mobile\:padding-bottom\:none { --paddingBottom: 0; }
    .\@mobile\:padding-bottom\:tiny { --paddingBottom: var(--paddingTiny); }
    .\@mobile\:padding-bottom\:small { --paddingBottom: var(--paddingSmall); }
    .\@mobile\:padding-bottom\:medium { --paddingBottom: var(--paddingMedium); }
    .\@mobile\:padding-bottom\:large { --paddingBottom: var(--paddingLarge); }
    .\@mobile\:padding-bottom\:huge { --paddingBottom: var(--paddingHuge); }

}

@media (min-width: 769px) {

    [class*="@desktop:padding:"] {
        padding-left: var(--paddingLeft);
        padding-right: var(--paddingRight);
        padding-top: var(--paddingTop);
        padding-bottom: var(--paddingBottom);
        box-sizing: border-box;
    }
    [class*="@desktop:padding-y:"], [class*="@desktop:padding-block:"] { padding-top: var(--paddingTop); padding-bottom: var(--paddingBottom); box-sizing: border-box; }
    [class*="@desktop:padding-x:"], [class*="@desktop:padding-inline:"] { padding-left: var(--paddingLeft); padding-right: var(--paddingRight); box-sizing: border-box; }
    [class*="@desktop:padding-left:"] { padding-left: var(--paddingLeft); box-sizing: border-box; }
    [class*="@desktop:padding-right:"] { padding-right: var(--paddingRight); box-sizing: border-box; }
    [class*="@desktop:padding-top:"] { padding-top: var(--paddingTop); box-sizing: border-box; }
    [class*="@desktop:padding-bottom:"] { padding-bottom: var(--paddingBottom); box-sizing: border-box; }

    .\@desktop\:padding\:tiny, .\@desktop\:padding-y\:tiny, .\@desktop\:padding-block\:tiny { --paddingTop: var(--paddingTiny); --paddingBottom: var(--paddingTiny); }
    .\@desktop\:padding\:small, .\@desktop\:padding-y\:small, .\@desktop\:padding-block\:small { --paddingTop: var(--paddingSmall); --paddingBottom: var(--paddingSmall); }
    .\@desktop\:padding\:medium, .\@desktop\:padding-y\:medium, .\@desktop\:padding-block\:medium { --paddingTop: var(--paddingMedium); --paddingBottom: var(--paddingMedium); }
    .\@desktop\:padding\:large, .\@desktop\:padding-y\:large, .\@desktop\:padding-block\:large { --paddingTop: var(--paddingLarge); --paddingBottom: var(--paddingLarge); }
    .\@desktop\:padding\:huge, .\@desktop\:padding-y\:huge, .\@desktop\:padding-block\:huge { --paddingTop: var(--paddingHuge); --paddingBottom: var(--paddingHuge); }

    .\@desktop\:padding\:tiny, .\@desktop\:padding-x\:tiny, .\@desktop\:padding-inline\:tiny { --paddingLeft: var(--paddingTiny); --paddingRight: var(--paddingTiny); }
    .\@desktop\:padding\:small, .\@desktop\:padding-x\:small, .\@desktop\:padding-inline\:small { --paddingLeft: var(--paddingSmall); --paddingRight: var(--paddingSmall); }
    .\@desktop\:padding\:medium, .\@desktop\:padding-x\:medium, .\@desktop\:padding-inline\:medium { --paddingLeft: var(--paddingMedium); --paddingRight: var(--paddingMedium); }
    .\@desktop\:padding\:large, .\@desktop\:padding-x\:large, .\@desktop\:padding-inline\:large { --paddingLeft: var(--paddingLarge); --paddingRight: var(--paddingLarge); }
    .\@desktop\:padding\:huge, .\@desktop\:padding-x\:huge, .\@desktop\:padding-inline\:huge { --paddingLeft: var(--paddingHuge); --paddingRight: var(--paddingHuge); }

    .\@desktop\:padding-left\:linked { --paddingLeft: inherit; }
    .\@desktop\:padding-left\:none { --paddingLeft: 0; }
    .\@desktop\:padding-left\:tiny { --paddingLeft: var(--paddingTiny); }
    .\@desktop\:padding-left\:small { --paddingLeft: var(--paddingSmall); }
    .\@desktop\:padding-left\:medium { --paddingLeft: var(--paddingMedium); }
    .\@desktop\:padding-left\:large { --paddingLeft: var(--paddingLarge); }
    .\@desktop\:padding-left\:huge { --paddingLeft: var(--paddingHuge); }

    .\@desktop\:padding-right\:linked { --paddingRight: var(--paddingLeft); }
    .\@desktop\:padding-right\:none { --paddingRight: 0; }
    .\@desktop\:padding-right\:tiny { --paddingRight: var(--paddingTiny); }
    .\@desktop\:padding-right\:small { --paddingRight: var(--paddingSmall); }
    .\@desktop\:padding-right\:medium { --paddingRight: var(--paddingMedium); }
    .\@desktop\:padding-right\:large { --paddingRight: var(--paddingLarge); }
    .\@desktop\:padding-right\:huge { --paddingRight: var(--paddingHuge); }

    .\@desktop\:padding-top\:linked { --paddingTop: var(--paddingLeft); }
    .\@desktop\:padding-top\:none { --paddingTop: 0; }
    .\@desktop\:padding-top\:tiny { --paddingTop: var(--paddingTiny); }
    .\@desktop\:padding-top\:small { --paddingTop: var(--paddingSmall); }
    .\@desktop\:padding-top\:medium { --paddingTop: var(--paddingMedium); }
    .\@desktop\:padding-top\:large { --paddingTop: var(--paddingLarge); }
    .\@desktop\:padding-top\:huge { --paddingTop: var(--paddingHuge); }

    .\@desktop\:padding-bottom\:linked { --paddingBottom: var(--paddingTop); }
    .\@desktop\:padding-bottom\:none { --paddingBottom: 0; }
    .\@desktop\:padding-bottom\:tiny { --paddingBottom: var(--paddingTiny); }
    .\@desktop\:padding-bottom\:small { --paddingBottom: var(--paddingSmall); }
    .\@desktop\:padding-bottom\:medium { --paddingBottom: var(--paddingMedium); }
    .\@desktop\:padding-bottom\:large { --paddingBottom: var(--paddingLarge); }
    .\@desktop\:padding-bottom\:huge { --paddingBottom: var(--paddingHuge); }

}


/**============================================================================
 * BOX-SIZING / ASPECT-RATIO
 =============================================================================*/
:root {
    --containerMaxWidth: 1280px;
}
 .width\:contain {
    flex-grow: 0;
}
.width\:expand,
.width\:stretch
{
    width: stretch;
}
.width\:fill,
.width\:flex
{
    flex-grow: 1;
}
:has(>.width\:contain) {
	container-type: inline-size;
}
@container ( width > 1280px ) {
    .width\:contain {
        width: stretch;
        padding-left: max(var(--paddingLeft), 50cqw - var(--containerMaxWidth)/2);
        padding-right: max(var(--paddingRight), 50cqw - var(--containerMaxWidth)/2);
    }
}
.height\:stretch {
    height: stretch;
}

.aspect-ratio\:auto { aspect-ratio: auto; }
.aspect-ratio\:1x1 { aspect-ratio: 1/1; }
.aspect-ratio\:4x3 { aspect-ratio: 4/3; }
.aspect-ratio\:3x2 { aspect-ratio: 3/2; }
.aspect-ratio\:16x9 { aspect-ratio: 16/9; }
.aspect-ratio\:21x9 { aspect-ratio: 21/9; }
.aspect-ratio\:4x5 { aspect-ratio: 4/5; }
.aspect-ratio\:3x4 { aspect-ratio: 3/4; }
.aspect-ratio\:2x3 { aspect-ratio: 2/3; }
.aspect-ratio\:9x16 { aspect-ratio: 9/16; }
.height\:50vh { height: 50dvh; }
.height\:67vh { height: 67dvh; }
.height\:100vh { height: 100dvh; }
@media (max-width: 768px) {
    .\@mobile\:aspect-ratio\:auto { aspect-ratio: auto; }
    .\@mobile\:aspect-ratio\:1x1 { aspect-ratio: 1/1; }
    .\@mobile\:aspect-ratio\:4x3 { aspect-ratio: 4/3; }
    .\@mobile\:aspect-ratio\:3x2 { aspect-ratio: 3/2; }
    .\@mobile\:aspect-ratio\:16x9 { aspect-ratio: 16/9; }
    .\@mobile\:aspect-ratio\:21x9 { aspect-ratio: 21/9; }
    .\@mobile\:aspect-ratio\:4x5 { aspect-ratio: 4/5; }
    .\@mobile\:aspect-ratio\:3x4 { aspect-ratio: 3/4; }
    .\@mobile\:aspect-ratio\:2x3 { aspect-ratio: 2/3; }
    .\@mobile\:aspect-ratio\:9x16 { aspect-ratio: 9/16; }
    .\@mobile\:height\:50vh { height: 50dvh; }
    .\@mobile\:height\:67vh { height: 67dvh; }
    .\@mobile\:height\:100vh { height: 100dvh; }
}
@media (min-width: 769px) {
    .\@desktop\:aspect-ratio\:auto { aspect-ratio: auto; }
    .\@desktop\:aspect-ratio\:1x1 { aspect-ratio: 1/1; }
    .\@desktop\:aspect-ratio\:4x3 { aspect-ratio: 4/3; }
    .\@desktop\:aspect-ratio\:3x2 { aspect-ratio: 3/2; }
    .\@desktop\:aspect-ratio\:16x9 { aspect-ratio: 16/9; }
    .\@desktop\:aspect-ratio\:21x9 { aspect-ratio: 21/9; }
    .\@desktop\:aspect-ratio\:4x5 { aspect-ratio: 4/5; }
    .\@desktop\:aspect-ratio\:3x4 { aspect-ratio: 3/4; }
    .\@desktop\:aspect-ratio\:2x3 { aspect-ratio: 2/3; }
    .\@desktop\:aspect-ratio\:9x16 { aspect-ratio: 9/16; }
    .\@desktop\:height\:50vh { height: 50dvh; }
    .\@desktop\:height\:67vh { height: 67dvh; }
    .\@desktop\:height\:100vh { height: 100dvh; }
}


/**============================================================================
 * DISPLAY LAYOUTS
 =============================================================================*/
.display\:grid { display: grid; }
.display\:flex-row { display: flex; }
.display\:flex-column { display: flex; flex-flow: column; }
.display\:flex-wrap { display: flex; flex-wrap: wrap }

@media (max-width: 768px) {
    .\@mobile\:display\:grid { display: grid; }
    .\@mobile\:display\:flex-row { display: flex; }
    .\@mobile\:display\:flex-column { display: flex; flex-flow: column; }
    .\@mobile\:display\:flex-wrap { display: flex; flex-wrap: wrap; }
}
@media (min-width: 769px) {
    .\@desktop\:display\:grid { display: grid; }
    .\@desktop\:display\:flex-row { display: flex; }
    .\@desktop\:display\:flex-column { display: flex; flex-flow: column; }
    .\@desktop\:display\:flex-wrap { display: flex; flex-wrap: wrap }
}


/* LAYOUT: STACK */
.display\:flex-column
{
    &.column-count\:2 { display: block; column-count: 2; }
    &.column-count\:3 { display: block; column-count: 3; }
    &.column-count\:4 { display: block; column-count: 4; }
    &.column-count\:2 > :only-child,
    &.column-count\:3 > :only-child,
    &.column-count\:4 > :only-child
    {
        display: contents;
    }
}
@media (max-width: 768px) {
    .\@mobile\:display\:flex-column
    {
        &.\@mobile\:column-count\:2 { display: block; column-count: 2; }
        &.\@mobile\:column-count\:3 { display: block; column-count: 3; }
        &.\@mobile\:column-count\:4 { display: block; column-count: 4; }
        &.\@mobile\:column-count\:2 > :only-child,
        &.\@mobile\:column-count\:3 > :only-child,
        &.\@mobile\:column-count\:4 > :only-child
        {
            display: contents;
        }
    }
}
@media (min-width: 769px) {
    .\@desktop\:display\:flex-column
    {
        &.\@desktop\:column-count\:2 { display: block; column-count: 2; }
        &.\@desktop\:column-count\:3 { display: block; column-count: 3; }
        &.\@desktop\:column-count\:4 { display: block; column-count: 4; }
        &.\@desktop\:column-count\:2 > :only-child,
        &.\@desktop\:column-count\:3 > :only-child,
        &.\@desktop\:column-count\:4 > :only-child
        {
            display: contents;
        }
    }
}


/* LAYOUT:GRID */
.display\:grid {
    display: grid;
    column-count: auto;

    &.column-count\:2 { grid-template-columns: repeat(2, 1fr); }
    &.column-count\:3 { grid-template-columns: repeat(3, 1fr); }
    &.column-count\:4 { grid-template-columns: repeat(4, 1fr); }
    &.column-count\:auto
    {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }
}

@media (min-width: 769px) {

    .\@desktop\:display\:grid
    {
        display: grid;
        column-count: auto;

        &.\@desktop\:column-count\:2 { grid-template-columns: repeat(2, 1fr); }
        &.\@desktop\:column-count\:3 { grid-template-columns: repeat(3, 1fr); }
        &.\@desktop\:column-count\:4 { grid-template-columns: repeat(4, 1fr); }
        &.\@desktop\:column-count\:auto
        {
            grid-template-columns: none;
            grid-auto-flow: column;
            grid-auto-columns: 1fr;
        }

    }

}


@media (max-width: 768px) {

    .\@mobile\:order\:minus3 { order: -3; }
    .\@mobile\:order\:minus2 { order: -2; }
    .\@mobile\:order\:minus1 { order: -1; }
    .\@mobile\:order\:auto { order: unset; }
    .\@mobile\:order\:plus1 { order: 1; }
    .\@mobile\:order\:plus2 { order: 2; }
    .\@mobile\:order\:plus3 { order: 3; }

}