/*
Theme Name: Lodha Partners V26.2
Author: Kingsview
Version: 26.2.build-2909
@layers root, defaults, theme, blocks, modifiers;
@container {}
*/

/**============================================================================
 * FONTS & TYPOGRAPHY
 =============================================================================*/
:root {
   
}
body {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
p {
    margin-top: 0;
}
a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.5em;
    transition: text-decoration-color 300ms;

    @media (max-width: 767px) {
        text-decoration-thickness: 0.55px;
    }
    @media (min-width: 768px) {
        text-decoration-thickness: 1px;
    }
}
a:hover {
    text-decoration-color: currentColor;
}
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: 16px;

    /*
    @media (max-width: 767px) {
        font-size: var(--mobile-font-size) !important;
    }
    @media (min-width: 768px) {
        font-size: var(--desktop-font-size) !important;
    }
        */

    &:last-child {
        margin-bottom: 0;
    }
    p {
        display: contents;
    }
    u {
        text-decoration: underline;
        text-decoration-color: currentColor;
        text-underline-offset: 0.5em;
        @media (max-width: 767px) {
            text-decoration-thickness: 0.5px;
        }
        @media (min-width: 768px) {
            text-decoration-thickness: 1.5px;
        }
    }
}

img {
    width: 100%;
    height: auto;
}


/**============================================================================
* GRID LAYOUTS
=============================================================================*/
:root {
    --vw: 100cqw;
    --vh: calc( 100vh - var(--headerHeight) );

    @media (max-width: 767px) {
        --headerHeight: 64px;
        --fontSizeTiny: 12px;
        --fontSizeSmall: 15px;
        --fontSizeNormal: 25px;
        --fontSizeLarge: 35px;
        --fontSizeHuge: 46px;
    }
    @media (min-width: 768px) {
        --headerHeight: 100px;
        --fontSizeTiny: 14px;
        --fontSizeSmall: 20px;
        --fontSizeNormal: 35px;
        --fontSizeLarge: 50px;
        --fontSizeHuge: 92px;
    }

    :where(.is-layout-flex) {
        gap: 16px;
        justify-content: center;
    }
}


/**============================================================================
 * TEMPLATE PARTS: HEADER / FOOTER / NAVIGATION
 =============================================================================*/

.wp-site-blocks {
    container-type: inline-size;
    --background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) calc(50% - 0.5px),
    #0E162D calc(50% - 0.5px),
    #0E162D calc(50% + 0.5px),
    rgba(255, 255, 255, 0) calc(50% + 0.5px),
    rgba(255, 255, 255, 0) 100%
    );
    
}

.page-id-72 .wp-site-blocks {
    position: relative;
    &::before {
        content: "";
        position: fixed;
        width: 1px;
        background-color: #0E162D;
        left: calc(50% - 0.5px);
        top: 25vh;
        bottom: 30vh;
    }
}

.wp-block-template-part:has(>.desktopHeader),
.wp-block-template-part:has(>.mobileHeader) {
    position: sticky;
    top: 0;
    z-index: 99;
    text-transform: uppercase;
}

html:has(.siteIntroSplashScreen.\:opened) {
    --overflow: hidden;
}
.siteIntroSplashScreen {
    position: fixed;
    inset: 0 0 0 0;
    z-index: 999999;
    
    background-color: #0E162D;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
    align-items: center;

    .__logo {
        grid-area: 1 / 1 / -1 / -1;
        max-width: 228px;
    }

    animation-duration: 800ms;
    animation-fill-mode: both;
    &.\:closed {
        display: none;
        opacity: 0;
    }
    &.\:closing {
        animation-name: fadeOutToNone;
    }
    &.\:opening {
    	animation-name: fadeInFromNone;
    }
    
}

:where(header.wp-block-template-part > .desktopHeader) {
    @media (max-width: 767px) {
        display: none!important;
    }
}
nav.desktopHeaderMenu {
    height: var(--headerHeight);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.desktopHeaderMenu .wp-block-navigation__container {
    display: grid!important;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    width: 100%;

    .wp-block-navigation-item {
        justify-content: start;
    }
    .wp-block-navigation-item:has(>.wp-block-site-logo),
    .wp-block-site-logo
    {
        justify-content: center;
        justify-self: center;
    }
    .wp-block-navigation-item:has(>.wp-block-site-logo) ~ .wp-block-navigation-item,
    .wp-block-site-logo ~ .wp-block-navigation-item
    {
        justify-content: end;
    }
}
.desktopHeaderLogo {
    width: 160px;
}


:where(header.wp-block-template-part > .mobileHeader) {
    @media (min-width: 768px) {
        display: none!important;
    }
}
.mobileHeader {
    height: var(--headerHeight);
    align-items: center;
}
.mobileHeaderLogo {
    width: 100px;
    justify-self: center;
}

.mobileMenu {
    .wp-block-navigation__responsive-container {
        top: 64px;
        padding-top: 0;
        padding-bottom: 64px;
        overflow: visible;
    }
    .wp-block-navigation__responsive-container-open {
        padding: 20px;
        align-self: start;
        svg {
            transform: scaleX(2);
        }
    }
    .wp-block-navigation__responsive-container-close {
        padding: 20px;
        top: -64px;
        svg {
            transform: scale(1.2);
        }
    }
    .wp-block-navigation__responsive-close,
    .wp-block-navigation__responsive-dialog,
    .wp-block-navigation__responsive-container-content
    {
        display: contents!important;
    }
    
    &.wp-block-navigation {
        display: inline-flex;
    }
    .wp-block-navigation-item:first-child {
        margin-top: auto;
    }
    .wp-block-navigation-item:last-child {
        margin-bottom: auto;
    }
}

.siteFooter {
    width: 100cqw;
    box-sizing: border-box;
    
    @media (max-width: 767px) {
        padding-top: 25px;
        padding-bottom: 35px;
        padding-left: min(3.9vmin, 21px);
        padding-right: min(3.9vmin, 21px);
        text-align: center;
        display: grid;
        gap: 45px;
        
        .wp-block-columns {
            gap: 45px;
        }

    }
    @media (min-width: 768px) {
        padding: 48px 5vmin 24px;
    }

    p:only-child,
    .wp-block-columns
    {
        margin-bottom: 0;
    }

}
.footerLogo {
    width: 120px;
    @media (max-width: 767px) {
        width: 100px;
        margin: auto;
    }
}


/**============================================================================
 * PAGE CONTENT
 =============================================================================*/

 .frontpageVideo {
    /*
    grid-column: 1/-1;
    width: 100%;
    height: 100vh;
    */
    display: grid;
    grid-template-rows: 1fr;
}
.frontpageVideo .wp-block-video,
.frontpageVideo .__bgnd
{
    position: relative;
    grid-area: 1 / 1 / -1 / -1;
    /*
    opacity: 0.5;
    filter: blur(1px);
    */
    margin: 0;
}
.frontpageVideo video {
    display: block;
    aspect-ratio: auto;
    object-fit: cover;
}
.frontpageVideo video,
.frontpageVideo .wp-block-video,
.frontpageVideo .wp-block-video > *
{
    width: 100%;
    max-width: 100vw;
    height: var(--vh);
}
.frontpageVideo .__text {

    grid-area: 1 / 1 / -1 / -1;
    position: relative;
    height: max-content;
    width: max-content;
    max-width: min(1360px, 100vw);
    box-sizing: border-box;
    padding-left: 30px;
    padding-right: 30px;
    align-self: end;
    justify-self: center;
    text-align: center;

    &::after {
        content: "";
        display: inline-block;
        width: 1px;
        background-color: #fff;
        height: 100px;
        margin-top: 50px;
        margin-bottom: 50px;
        transform-origin: top;
        transform: scaleY(1);
        animation-name: vertical-line;
        animation-iteration-count: infinite;
        animation-duration: 7.5s;
        animation-timing-function: cubic-bezier(0.4, 0, 0, 0.98);
    }

}
/*-------------------------------------------*/

.pageTitleBanner {

    width: 100%;
    max-width: 100vw;
    height: var(--vh);
    display: grid;
    grid-template-rows: 1fr 100px;
    box-sizing: border-box;
    align-items: center;
    justify-items: center;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;

}
.pageTitleBanner > :is(*) {

    grid-area: 1 / 1 / span 1 / -1;
    position: relative;
    height: max-content;
    width: max-content;
    max-width: min(1360px, 100vw);

}
.pageTitleBanner::after {

    content: "";
    display: inline-block;
    width: 1px;
    background-color: #fff;
    height: 100px;
    align-self: start;
    transform-origin: top;
    transform: scaleY(1);
    animation-name: vertical-line;
    animation-iteration-count: infinite;
    animation-duration: 7.5s;
    animation-timing-function: cubic-bezier(0.4, 0, 0, 0.98);
}

@keyframes vertical-line {
    0% { transform: scaleY(0); }
    10% { transform: scaleY(1); }
    20% { transform: scaleY(0); }
    30% { transform: scaleY(1); }
    90% { transform: scaleY(1); }
    100% { transform: scaleY(0); }
}

/*-------------------------------------------*/

.textSlideshow {

    display: grid;
    grid-template-rows: 1fr;
    width: 100%;
    max-width: 100vw;
    height: var(--vh);
    align-items: center;
    justify-content: center;

    & > :is(*) {
        position: relative;
        grid-area: 1 / 1 / -1 / -1;
        max-width: min(1390px, 100vw);
        box-sizing: border-box;
        padding-left: 30px;
        padding-right: 30px;
        align-self: center;
        justify-self: center;
        text-align: center;
        transform: translateY(25vh);
        opacity: 0;
        animation-fill-mode: both;

        &.\:closing {
            animation-duration: 400ms;
            animation-timing-function: ease-in;
            animation-name: text-slide-out;
        }
        &.\:closed {
            transform: translateY(-15vh);
            opacity: 0;
        }
        &.\:opening {
            animation-duration: 650ms;
            animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
            animation-name: text-slide-in;
        }
        &.\:opened {
            transform: translateY(0);
            opacity: 1;
        }

    }

}
@keyframes text-slide-in {
    0% { transform: translateY(25vh); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes text-slide-out {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-15vh); opacity: 0; }
}


/*-------------------------------------------*/

.teamSection {
    
}
.teamGrid {
    max-width: 1440px;
    margin-left: auto !important;
    margin-right: auto !important;

    display: grid;
    @media (max-width: 768px) {
        grid-template-columns: 1fr 1fr !important;
        gap: min(9.25vmin, 50px) min(6.5vmin, 35px);
        padding-left: min(3.9vmin, 21px);
        padding-right: min(3.9vmin, 21px);
    }
    @media (min-width: 769px) {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 70px;
        padding-left: 100px;
    }

}
.teamMember {

    .wp-block-image {
        @media (max-width: 768px) {
            margin-bottom: min(5.555vmin, 30px);
        }
        @media (min-width: 769px) {
            padding-right: 100px;
            margin-bottom: 35px;
        }
    }
    .wp-block-heading {
        font-weight: 600;
        line-height: 1.1;
        margin-bottom: 0;
    }
    h2 {
        @media (max-width: 768px) {
            font-size: 32px;
            font-size: clamp(18px, 6vmin, 32px);
        }
        @media (min-width: 769px) {
            font-size: 40px;
        }
    }
    h4 {
        @media (max-width: 768px) {
            font-size: 25px;
            font-size: clamp(16px, 4.63vmin, 25px);
        }
        @media (min-width: 769px) {
            font-size: 32px;
        }
    }
    p {
        @media (max-width: 768px) {
            font-size: 17px;
            font-size: clamp(12px, 3.2vmin, 17px);
            line-height: 1.47;
            font-weight: 300;
        }
        @media (min-width: 769px) {
            font-size: 18px;
            line-height: 30px;
            font-weight: 300;
        }
    }
    p:first-of-type {
        @media (max-width: 768px) {
            margin-top: min(4.63vmin, 25px);
        }
        @media (min-width: 769px) {
            margin-top: 32px;
        }
    }

}
/*-------------------------------------------*/

:has(>.servicesGrid) {
    container-type: inline-size;
}
@media (max-width: 768px) {
    .servicesGrid p:nth-child(3-n) { grid-row-start: 1; }
    .servicesGrid p:nth-child(6-n):nth-child(n+4) { grid-row-start: 2; }
    .servicesGrid p:nth-child(9-n):nth-child(n+7) { grid-row-start: 3; }
    .servicesGrid p:nth-child(12-n):nth-child(n+10) { grid-row-start: 4; }
    .servicesGrid p:nth-child(15-n):nth-child(n+13) { grid-row-start: 5; }
    .servicesGrid p:nth-child(18-n):nth-child(n+16) { grid-row-start: 6; }
    .servicesGrid p:nth-child(21-n):nth-child(n+19) { grid-row-start: 7; }
    .servicesGrid p:nth-child(24-n):nth-child(n+22) { grid-row-start: 8; }
    .servicesGrid p:nth-child(27-n):nth-child(n+25) { grid-row-start: 9; }
    /*columns*/
    .servicesGrid p:nth-child(3n+1) { grid-column-start: 1; }
    .servicesGrid p:nth-child(3n+2) { grid-column-start: 2; }
    .servicesGrid p:nth-child(3n+3) { grid-column-start: 3; }
}
.servicesGrid {

    display: grid;
    gap: 3cqw;
    font-weight: normal;
    width: 100%;
    position: relative;

    
    @media (max-width: 576px) {

    }
    @media (max-width: 768px) {
        --pw-half: calc(100%/6 - 6cqw/6);
        --pw: 50%;
        --ph: calc(90px + 4cqw);
        font-size: 20px;
        line-height: 22.5px;
        grid-template-columns: repeat(3, 1fr);

        &::after {
            grid-area: 1 / 1 / span 9 / span 5;
            background: linear-gradient(90deg,
                rgba(255, 255, 255, 0) 0%,

                rgba(255, 255, 255, 0) calc(50% - 0.5px),
                #0E162D calc(50% - 0.5px),
                #0E162D calc(50% + 0.5px),
                rgba(255, 255, 255, 0) calc(50% + 0.5px),
                
                rgba(255, 255, 255, 0) 100%
            ), 
            linear-gradient(180deg,
                rgba(255, 255, 255, 0) 0%,

                rgba(255, 255, 255, 0) calc(1*var(--ph) - 0.5px),
                #0E162D calc(1*var(--ph) - 0.5px),
                #0E162D calc(1*var(--ph) + 0.5px),
                rgba(255, 255, 255, 0) calc(1*var(--ph) + 0.5px),

                rgba(255, 255, 255, 0) calc(2*var(--ph) - 0.5px),
                #0E162D calc(2*var(--ph) - 0.5px),
                #0E162D calc(2*var(--ph) + 0.5px),
                rgba(255, 255, 255, 0) calc(2*var(--ph) + 0.5px),

                rgba(255, 255, 255, 0) calc(3*var(--ph) - 0.5px),
                #0E162D calc(3*var(--ph) - 0.5px),
                #0E162D calc(3*var(--ph) + 0.5px),
                rgba(255, 255, 255, 0) calc(3*var(--ph) + 0.5px),

                rgba(255, 255, 255, 0) calc(4*var(--ph) - 0.5px),
                #0E162D calc(4*var(--ph) - 0.5px),
                #0E162D calc(4*var(--ph) + 0.5px),
                rgba(255, 255, 255, 0) calc(4*var(--ph) + 0.5px),

                rgba(255, 255, 255, 0) calc(5*var(--ph) - 0.5px),
                #0E162D calc(5*var(--ph) - 0.5px),
                #0E162D calc(5*var(--ph) + 0.5px),
                rgba(255, 255, 255, 0) calc(5*var(--ph) + 0.5px),

                rgba(255, 255, 255, 0) calc(6*var(--ph) - 0.5px),
                #0E162D calc(6*var(--ph) - 0.5px),
                #0E162D calc(6*var(--ph) + 0.5px),
                rgba(255, 255, 255, 0) calc(6*var(--ph) + 0.5px),

                rgba(255, 255, 255, 0) calc(7*var(--ph) - 0.5px),
                #0E162D calc(7*var(--ph) - 0.5px),
                #0E162D calc(7*var(--ph) + 0.5px),
                rgba(255, 255, 255, 0) calc(7*var(--ph) + 0.5px),
                
                rgba(255, 255, 255, 0) 100%
            );
        }
    }
    @media (min-width: 769px) {
        --pw-half: calc(10% - 1.2cqw);
        --pw: 25%;
        --ph: calc(90px + 3cqw);
        font-size: 25px;
        line-height: 30px;
        grid-template-columns: repeat(5, 1fr);

        /*rows*/
        p:nth-child(5-n) { grid-row-start: 1; }
        p:nth-child(10-n):nth-child(n+6) { grid-row-start: 2; }
        p:nth-child(15-n):nth-child(n+11) { grid-row-start: 3; }
        p:nth-child(20-n):nth-child(n+16) { grid-row-start: 4; }
        p:nth-child(25-n):nth-child(n+21) { grid-row-start: 5; }
        /*columns*/
        p:nth-child(5n+1) { grid-column-start: 1; }
        p:nth-child(5n+2) { grid-column-start: 2; }
        p:nth-child(5n+3) { grid-column-start: 3; }
        p:nth-child(5n+4) { grid-column-start: 4; }
        p:nth-child(5n+5) { grid-column-start: 5; }

        &::after {
            grid-area: 1 / 1 / span 5 / span 5;
            background: linear-gradient(90deg,
                rgba(255, 255, 255, 0) 0%,

                rgba(255, 255, 255, 0) calc(1*var(--pw) - 0.5px),
                #0E162D calc(1*var(--pw) - 0.5px),
                #0E162D calc(1*var(--pw) + 0.5px),
                rgba(255, 255, 255, 0) calc(1*var(--pw) + 0.5px),

                rgba(255, 255, 255, 0) calc(2*var(--pw) - 0.5px),
                #0E162D calc(2*var(--pw) - 0.5px),
                #0E162D calc(2*var(--pw) + 0.5px),
                rgba(255, 255, 255, 0) calc(1*var(--pw) + 0.5px),
                
                rgba(255, 255, 255, 0) calc(3*var(--pw) - 0.5px),
                #0E162D calc(3*var(--pw) - 0.5px),
                #0E162D calc(3*var(--pw) + 0.5px),
                rgba(255, 255, 255, 0) calc(3*var(--pw) + 0.5px),
                
                rgba(255, 255, 255, 0) 100%
            ), 
            linear-gradient(0deg,
                rgba(255, 255, 255, 0) 0%,

                rgba(255, 255, 255, 0) calc(1*var(--ph) - 0.5px),
                #0E162D calc(1*var(--ph) - 0.5px),
                #0E162D calc(1*var(--ph) + 0.5px),
                rgba(255, 255, 255, 0) calc(1*var(--ph) + 0.5px),

                rgba(255, 255, 255, 0) calc(2*var(--ph) - 0.5px),
                #0E162D calc(2*var(--ph) - 0.5px),
                #0E162D calc(2*var(--ph) + 0.5px),
                rgba(255, 255, 255, 0) calc(1*var(--ph) + 0.5px),
                
                rgba(255, 255, 255, 0) calc(3*var(--ph) - 0.5px),
                #0E162D calc(3*var(--ph) - 0.5px),
                #0E162D calc(3*var(--ph) + 0.5px),
                rgba(255, 255, 255, 0) calc(3*var(--ph) + 0.5px),
                
                rgba(255, 255, 255, 0) 100%
            );
        }
    }

    p {
        height: 92px;
        color: #fff;
        background-color: #0A1F45;
        border: 1px solid #0A1F45;
        text-align: center;
        justify-content: center;
        align-content: center;
        position: relative;
        z-index: 3;
        &:hover {
            color: #0A1F45;
            background-color: #e8e5e2;
        }
    }

    &::after {
        content: "";
        position: absolute;
        z-index: 0;
        top: 47px;
        bottom: 47px;
        left: var(--pw-half);
        right: var(--pw-half);
        box-sizing: border-box;
        border: 1px solid #0E162D;
    }

}


.contactForm {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    font-size: 18px;
    color: #707070;

    fieldset {
        all: unset;
        display: block;
        padding: 3vmin;
    }
    input,
    textarea
    {
        font-size: 18px;
        line-height: 25px;
        padding: 12px 0;
        font-family: inherit;
        background-color: transparent;
        border: none;
        outline: none;
    }
    input::-webkit-input-placeholder { color: #aaa; }
    input::-moz-placeholder { color: #aaa; }
    input::-ms-input-placeholder { color: #aaa; }
    input::placeholder { color: #aaa; }
    textarea::-webkit-input-placeholder { color: #aaa; }
    textarea::-moz-placeholder { color: #aaa; }
    textarea::-ms-input-placeholder { color: #aaa; }
    textarea::placeholder { color: #aaa; }

    .frm_form_field {
        display: grid;
        align-items: start;
        margin-bottom: 25px;
        border-bottom: 1px solid;
    }
    .frm_primary_label {
        line-height: 1em;
    }

    .frm_form_field:has([type="submit"]) {
        border-bottom: none;
        justify-content: center;
        margin-top: 25px;
    }
    [type="submit"] {
        display: inline-block;
        font-size: 18px;
        line-height: 25px;
        padding: 11px 25px 8px;
        background-color: #0E162D;
        color: #fff;
        font-family: inherit;
        border: none;
        outline: none;
        text-transform: uppercase;
    }

}


/**============================================================================
 * HELPER CLASSES & CONTENT MODIFIERS
 =============================================================================*/
@property --paddingLeft {
    syntax: "<number> | <length> | <percentage>";
    inherits: false;
    initial-value: 0;
}
@property --paddingRight {
    syntax: "<number> | <length> | <percentage>";
    inherits: false;
    initial-value: 0;
}
@property --paddingTop {
    syntax: "<number> | <length> | <percentage>";
    inherits: false;
    initial-value: 0;
}
@property --paddingBottom {
    syntax: "<number> | <length> | <percentage>";
    inherits: false;
    initial-value: 0;
}

:root {

    @media (max-width: 768px) {
        /*MOBILE*/
    }
    @media (min-width: 769px) {
        /*DESKTOP*/
    }
    
    --container-type: size;
    @media (max-width: 767px) {
        --1sp: clamp(0px, 3.333cqw, 16px);
        --1px: calc(var(--1sp)/16);
        --1pc: clamp(0px, 28cqw/30, 8px);
        --containerMaxWidth: 480px;
        --grid: 3% [left-start right-start inner-start] 1fr [center-line] 1fr [inner-end right-end left-end] 3%;
    }
    @media (min-width: 768px) {
        --1sp: clamp(0px, 100cqw/64, 20px);
        --1px: calc(var(--1sp)/20);
        --1pc: clamp(0px, 60cqw/64, 12px);
        --containerMaxWidth: 1500px;
        --grid: var(--1sp) 1fr [
            left-start] calc(30*var(--1pc)) [inner-start]
            calc(20*var(--1pc)) [left-end] var(--1sp) [center-line]
            var(--1sp) [right-start] calc(40*var(--1pc))
            [inner-end] calc(10*var(--1pc)) [right-end]
            1fr var(--1sp);
    }

    --2pc: calc(var(--1pc) * 2);
    --3pc: calc(var(--1pc) * 3);
    --4pc: calc(var(--1pc) * 4);
    --5pc: calc(var(--1pc) * 5);

    --2sp: calc(var(--1sp) * 2);
    --3sp: calc(var(--1sp) * 3);
    --4sp: calc(var(--1sp) * 4);
    --5sp: calc(var(--1sp) * 5);
    --6sp: calc(var(--1sp) * 6);
    --7sp: calc(var(--1sp) * 7);
    --8sp: calc(var(--1sp) * 8);
    --9sp: calc(var(--1sp) * 9);
    --10sp: calc(var(--1sp) * 10);
    --11sp: calc(var(--1sp) * 11);
    --12sp: calc(var(--1sp) * 12);
    --13sp: calc(var(--1sp) * 13);
    --14sp: calc(var(--1sp) * 14);
    --15sp: calc(var(--1sp) * 15);

}

.\:fullwidth {
    grid-column: 1/-1;
    width: 100%;
    max-width: 100vw;
}
.\:fullheight {
    height: 100vh;
}
.\:fullscreen {
    grid-column: 1/-1;
    width: 100%;
    max-width: 100vw;
    height: calc(100vh - 40px);
}

.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 */
.font-family\:serif { font-family: serif; }
.font-color\:white { color: #fff; }
.font-color\:grey { color: #888; }
.font-size\:15px { font-size: 15px!important; }
.font-size\:20px { font-size: 20px!important; }
.font-size\:25px { font-size: 25px!important; }
.font-size\:30px { font-size: 30px!important; }
.font-size\:35px { font-size: 35px!important; }
.font-size\:200px { font-size: 200px!important; }
.line-height\:0 { line-height: 0; }
.line-height\:55px { line-height: 55px; }
.line-height\:100\% { line-height: 1; }
.line-height\:120\% { line-height: 1.2; }
.line-height\:140\% { line-height: 1.4; }
.line-height\:180\% { line-height: 1.8; }
.line-height\:200\% { line-height: 2; }

@media (max-width: 768px) {
    .\@mobile\:font-family\:serif { font-family: serif; }
    .\@mobile\:font-color\:white { color: #fff; }
    .\@mobile\:font-color\:grey { color: #888; }
    .\@mobile\:font-size\:15px { font-size: 15px!important; }
    .\@mobile\:font-size\:20px { font-size: 20px!important; }
    .\@mobile\:font-size\:25px { font-size: 25px!important; }
    .\@mobile\:font-size\:30px { font-size: 30px!important; }
    .\@mobile\:font-size\:35px { font-size: 35px!important; }
    .\@mobile\:font-size\:200px { font-size: 200px!important; }
    .\@mobile\:line-height\:0 { line-height: 0; }
    .\@mobile\:line-height\:55px { line-height: 55px; }
    .\@mobile\:line-height\:100\% { line-height: 1; }
    .\@mobile\:line-height\:120\% { line-height: 1.2; }
    .\@mobile\:line-height\:140\% { line-height: 1.4; }
    .\@mobile\:line-height\:180\% { line-height: 1.8; }
    .\@mobile\:line-height\:200\% { line-height: 2; }
}
@media (min-width: 769px) {
    .\@desktop\:font-family\:serif { font-family: serif; }
    .\@desktop\:font-color\:white { color: #fff; }
    .\@desktop\:font-color\:grey { color: #888; }
    .\@desktop\:font-size\:15px { font-size: 15px!important; }
    .\@desktop\:font-size\:20px { font-size: 20px!important; }
    .\@desktop\:font-size\:25px { font-size: 25px!important; }
    .\@desktop\:font-size\:30px { font-size: 30px!important; }
    .\@desktop\:font-size\:35px { font-size: 35px!important; }
    .\@desktop\:font-size\:200px { font-size: 200px!important; }
    .\@desktop\:line-height\:0 { line-height: 0; }
    .\@desktop\:line-height\:55px { line-height: 55px; }
    .\@desktop\:line-height\:100\% { line-height: 1; }
    .\@desktop\:line-height\:120\% { line-height: 1.2; }
    .\@desktop\:line-height\:140\% { line-height: 1.4; }
    .\@desktop\:line-height\:180\% { line-height: 1.8; }
    .\@desktop\:line-height\:200\% { line-height: 2; }
}

.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; } }



/* ALIGN/PLACEMENT */
.align-self\:top { align-self: start; }
.align-self\:middle, .align-self\:center { align-self: center; }
.align-self\:bottom { align-self: end; }
.justify-self\:left { justify-self: left; }
.justify-self\:center { justify-self: center; }
.justify-self\:right { justify-self: right; }
.align-items\:top { align-items: start!important; }
.align-items\:middle, .align-items\:center { align-items: center!important; }
.align-items\:bottom { align-items: end!important; }
.justify-items\:left { justify-items: left; }
.justify-items\:center { justify-items: center; }
.justify-items\:right { justify-items: right; }
.place-self\:topleft { place-self: start left; }
.place-self\:topright { place-self: start right; }
.place-self\:bottomleft { place-self: end left; }
.place-self\:bottomright { place-self: end right; }
.text-align\:left { justify-items: left; text-align: left; p { text-align: inherit; } }
.text-align\:right { justify-items: right; text-align: right; p { text-align: inherit; } }
.text-align\:center { justify-items: center; text-align: center; p { text-align: inherit; } }
.text-align\:justify { justify-items: left; text-align: justify; p { text-align: inherit; } }
.margin-top\:0 { margin-top: 0!important; }
.margin-top\:auto { margin-top: auto!important; }
.margin-bottom\:0 { margin-bottom: 0!important; }
.margin-bottom\:auto { margin-bottom: auto!important; }
.margin-left\:0 { margin-left: 0!important; }
.margin-left\:auto { margin-left: auto!important; }
.margin-right\:0 { margin-right: 0!important; }
.margin-right\:auto { margin-right: auto!important; }

@media (max-width: 768px) {
    .\@mobile\:align-self\:top { align-self: start; }
    .\@mobile\:align-self\:middle, .\@mobile\:align-self\:center { align-self: center; }
    .\@mobile\:align-self\:bottom { align-self: end; }
    .\@mobile\:justify-self\:left { justify-self: left; }
    .\@mobile\:justify-self\:center { justify-self: center; }
    .\@mobile\:justify-self\:right { justify-self: right; }
    .\@mobile\:align-items\:top { align-items: start!important; }
    .\@mobile\:align-items\:middle, .\@mobile\:align-items\:center { align-items: center!important; }
    .\@mobile\:align-items\:bottom { align-items: end!important; }
    .\@mobile\:justify-items\:left { justify-items: left; }
    .\@mobile\:justify-items\:center { justify-items: center; }
    .\@mobile\:justify-items\:right { justify-items: right; }
    .\@mobile\:place-self\:topleft { place-self: start left; }
    .\@mobile\:place-self\:topright { place-self: start right; }
    .\@mobile\:place-self\:bottomleft { place-self: end left; }
    .\@mobile\:place-self\:bottomright { place-self: end right; }
    .\@mobile\:text-align\:left { justify-items: left; text-align: left; p { text-align: inherit; } }
    .\@mobile\:text-align\:right { justify-items: right; text-align: right; p { text-align: inherit; } }
    .\@mobile\:text-align\:center { justify-items: center; text-align: center; p { text-align: inherit; } }
    .\@mobile\:text-align\:justify { justify-items: left; text-align: justify; p { text-align: inherit; } }
    .\@mobile\:margin-top\:0 { margin-top: 0!important; }
    .\@mobile\:margin-top\:auto { margin-top: auto!important; }
    .\@mobile\:margin-bottom\:0 { margin-bottom: 0!important; }
    .\@mobile\:margin-bottom\:auto { margin-bottom: auto!important; }
    .\@mobile\:margin-left\:0 { margin-left: 0!important; }
    .\@mobile\:margin-left\:auto { margin-left: auto!important; }
    .\@mobile\:margin-right\:0 { margin-right: 0!important; }
    .\@mobile\:margin-right\:auto { margin-right: auto!important; }
}

@media (min-width: 769px) {
    .\@desktop\:align-self\:top { align-self: start; }
    .\@desktop\:align-self\:middle, .\@desktop\:align-self\:center { align-self: center; }
    .\@desktop\:align-self\:bottom { align-self: end; }
    .\@desktop\:justify-self\:left { justify-self: left; }
    .\@desktop\:justify-self\:center { justify-self: center; }
    .\@desktop\:justify-self\:right { justify-self: right; }
    .\@desktop\:align-items\:top { align-items: start!important; }
    .\@desktop\:align-items\:middle, .\@desktop\:align-items\:center { align-items: center!important; }
    .\@desktop\:align-items\:bottom { align-items: end!important; }
    .\@desktop\:justify-items\:left { justify-items: left; }
    .\@desktop\:justify-items\:center { justify-items: center; }
    .\@desktop\:justify-items\:right { justify-items: right; }
    .\@desktop\:place-self\:topleft { place-self: start left; }
    .\@desktop\:place-self\:topright { place-self: start right; }
    .\@desktop\:place-self\:bottomleft { place-self: end left; }
    .\@desktop\:place-self\:bottomright { place-self: end right; }
    .\@desktop\:text-align\:left { justify-items: left; text-align: left; p { text-align: inherit; } }
    .\@desktop\:text-align\:right { justify-items: right; text-align: right; p { text-align: inherit; } }
    .\@desktop\:text-align\:center { justify-items: center; text-align: center; p { text-align: inherit; } }
    .\@desktop\:text-align\:justify { justify-items: left; text-align: justify; p { text-align: inherit; } }
    .\@desktop\:margin-top\:0 { margin-top: 0!important; }
    .\@desktop\:margin-top\:auto { margin-top: auto!important; }
    .\@desktop\:margin-bottom\:0 { margin-bottom: 0!important; }
    .\@desktop\:margin-bottom\:auto { margin-bottom: auto!important; }
    .\@desktop\:margin-left\:0 { margin-left: 0!important; }
    .\@desktop\:margin-left\:auto { margin-left: auto!important }
    .\@desktop\:margin-right\:0 { margin-right: 0!important; }
    .\@desktop\:margin-right\:auto { margin-right: auto!important; }
}

/* PADDING/MARGIN */
.box-sizing\:content-box {
    box-sizing: content-box;
}
.box-sizing\:border-box {
    box-sizing: border-box;
}
[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-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-top\:80px { --paddingTop: 80px; }


.padding-left\:linked { --paddingLeft: inherit; }
.padding-left\:none { --paddingLeft: 0; }
.padding-left\:tiny, .padding\:tiny { --paddingLeft: var(--1sp); }
.padding-left\:small, .padding\:small { --paddingLeft: var(--3sp); }
.padding-left\:medium, .padding\:medium { --paddingLeft: var(--6sp); }
.padding-left\:large, .padding\:large { --paddingLeft: var(--9sp); }
.padding-left\:huge, .padding\:huge { --paddingLeft: var(--12sp); }

.padding-right\:linked { --paddingRight: var(--paddingLeft); }
.padding-right\:none { --paddingRight: 0; }
.padding-right\:tiny, .padding\:tiny { --paddingRight: var(--1sp); }
.padding-right\:small, .padding\:small { --paddingRight: var(--3sp); }
.padding-right\:medium, .padding\:medium { --paddingRight: var(--6sp); }
.padding-right\:large, .padding\:large { --paddingRight: var(--9sp); }
.padding-right\:huge, .padding\:huge { --paddingRight: var(--12sp); }

.padding-top\:linked { --paddingTop: var(--paddingLeft); }
.padding-top\:none { --paddingTop: 0; }
.padding-top\:tiny, .padding\:tiny { --paddingTop: var(--1sp); }
.padding-top\:small, .padding\:small { --paddingTop: var(--3sp); }
.padding-top\:medium, .padding\:medium { --paddingTop: var(--6sp); }
.padding-top\:large, .padding\:large { --paddingTop: var(--9sp); }
.padding-top\:huge, .padding\:huge { --paddingTop: var(--12sp); }

.padding-bottom\:linked { --paddingBottom: var(--paddingTop); }
.padding-bottom\:none { --paddingBottom: 0; }
.padding-bottom\:tiny, .padding\:tiny { --paddingBottom: var(--1sp); }
.padding-bottom\:small, .padding\:small { --paddingBottom: var(--3sp); }
.padding-bottom\:medium, .padding\:medium { --paddingBottom: var(--6sp); }
.padding-bottom\:large, .padding\:large { --paddingBottom: var(--9sp); }
.padding-bottom\:huge, .padding\:huge { --paddingBottom: var(--12sp); }

.column-gap\:linked { column-gap: var(--paddingTop); }
.column-gap\:none { column-gap: 0!important; }
.column-gap\:tiny { column-gap: var(--1sp); }
.column-gap\:small { column-gap: var(--3sp); }
.column-gap\:medium { column-gap: var(--6sp); }
.column-gap\:large { column-gap: var(--9sp); }
.column-gap\:huge { column-gap: var(--15sp); }

.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(--1sp); }
.row-gap\:small { row-gap: var(--2sp); }
.row-gap\:medium { row-gap: var(--4sp); }
.row-gap\:large { row-gap: var(--6sp); }
.row-gap\:huge { row-gap: var(--9sp); }

@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-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-left\:linked { --paddingLeft: inherit; }
    .\@mobile\:padding-left\:none { --paddingLeft: 0; }
    .\@mobile\:padding-left\:tiny, .\@mobile\:padding\:tiny { --paddingLeft: var(--1sp); }
    .\@mobile\:padding-left\:small, .\@mobile\:padding\:small { --paddingLeft: var(--3sp); }
    .\@mobile\:padding-left\:medium, .\@mobile\:padding\:medium { --paddingLeft: var(--6sp); }
    .\@mobile\:padding-left\:large, .\@mobile\:padding\:large { --paddingLeft: var(--9sp); }
    .\@mobile\:padding-left\:huge, .\@mobile\:padding\:huge { --paddingLeft: var(--12sp); }

    .\@mobile\:padding-right\:linked { --paddingRight: var(--paddingLeft); }
    .\@mobile\:padding-right\:none { --paddingRight: 0; }
    .\@mobile\:padding-right\:tiny, .\@mobile\:padding\:tiny { --paddingRight: var(--1sp); }
    .\@mobile\:padding-right\:small, .\@mobile\:padding\:small { --paddingRight: var(--3sp); }
    .\@mobile\:padding-right\:medium, .\@mobile\:padding\:medium { --paddingRight: var(--6sp); }
    .\@mobile\:padding-right\:large, .\@mobile\:padding\:large { --paddingRight: var(--9sp); }
    .\@mobile\:padding-right\:huge, .\@mobile\:padding\:huge { --paddingRight: var(--12sp); }

    .\@mobile\:padding-top\:linked { --paddingTop: var(--paddingLeft); }
    .\@mobile\:padding-top\:none { --paddingTop: 0; }
    .\@mobile\:padding-top\:tiny, .\@mobile\:padding\:tiny { --paddingTop: var(--1sp); }
    .\@mobile\:padding-top\:small, .\@mobile\:padding\:small { --paddingTop: var(--3sp); }
    .\@mobile\:padding-top\:medium, .\@mobile\:padding\:medium { --paddingTop: var(--6sp); }
    .\@mobile\:padding-top\:large, .\@mobile\:padding\:large { --paddingTop: var(--9sp); }
    .\@mobile\:padding-top\:huge, .\@mobile\:padding\:huge { --paddingTop: var(--12sp); }

    .\@mobile\:padding-bottom\:linked { --paddingBottom: var(--paddingTop); }
    .\@mobile\:padding-bottom\:none { --paddingBottom: 0; }
    .\@mobile\:padding-bottom\:tiny, .\@mobile\:padding\:tiny { --paddingBottom: var(--1sp); }
    .\@mobile\:padding-bottom\:small, .\@mobile\:padding\:small { --paddingBottom: var(--3sp); }
    .\@mobile\:padding-bottom\:medium, .\@mobile\:padding\:medium { --paddingBottom: var(--6sp); }
    .\@mobile\:padding-bottom\:large, .\@mobile\:padding\:large { --paddingBottom: var(--9sp); }
    .\@mobile\:padding-bottom\:huge, .\@mobile\:padding\:huge { --paddingBottom: var(--12sp); }

    .\@mobile\:padding-top\:2sp { --paddingTop: var(--2sp); }

}

@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-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-left\:linked { --paddingLeft: inherit; }
    .\@desktop\:padding-left\:none { --paddingLeft: 0; }
    .\@desktop\:padding-left\:tiny, .\@desktop\:padding\:tiny { --paddingLeft: var(--1sp); }
    .\@desktop\:padding-left\:small, .\@desktop\:padding\:small { --paddingLeft: var(--3sp); }
    .\@desktop\:padding-left\:medium, .\@desktop\:padding\:medium { --paddingLeft: var(--6sp); }
    .\@desktop\:padding-left\:large, .\@desktop\:padding\:large { --paddingLeft: var(--9sp); }
    .\@desktop\:padding-left\:huge, .\@desktop\:padding\:huge { --paddingLeft: var(--12sp); }

    .\@desktop\:padding-right\:linked { --paddingRight: var(--paddingLeft); }
    .\@desktop\:padding-right\:none { --paddingRight: 0; }
    .\@desktop\:padding-right\:tiny, .\@desktop\:padding\:tiny { --paddingRight: var(--1sp); }
    .\@desktop\:padding-right\:small, .\@desktop\:padding\:small { --paddingRight: var(--3sp); }
    .\@desktop\:padding-right\:medium, .\@desktop\:padding\:medium { --paddingRight: var(--6sp); }
    .\@desktop\:padding-right\:large, .\@desktop\:padding\:large { --paddingRight: var(--9sp); }
    .\@desktop\:padding-right\:huge, .\@desktop\:padding\:huge { --paddingRight: var(--12sp); }

    .\@desktop\:padding-top\:linked { --paddingTop: var(--paddingLeft); }
    .\@desktop\:padding-top\:none { --paddingTop: 0; }
    .\@desktop\:padding-top\:tiny, .\@desktop\:padding\:tiny { --paddingTop: var(--1sp); }
    .\@desktop\:padding-top\:small, .\@desktop\:padding\:small { --paddingTop: var(--3sp); }
    .\@desktop\:padding-top\:medium, .\@desktop\:padding\:medium { --paddingTop: var(--6sp); }
    .\@desktop\:padding-top\:large, .\@desktop\:padding\:large { --paddingTop: var(--9sp); }
    .\@desktop\:padding-top\:huge, .\@desktop\:padding\:huge { --paddingTop: var(--12sp); }

    .\@desktop\:padding-bottom\:linked { --paddingBottom: var(--paddingTop); }
    .\@desktop\:padding-bottom\:none { --paddingBottom: 0; }
    .\@desktop\:padding-bottom\:tiny, .\@desktop\:padding\:tiny { --paddingBottom: var(--1sp); }
    .\@desktop\:padding-bottom\:small, .\@desktop\:padding\:small { --paddingBottom: var(--3sp); }
    .\@desktop\:padding-bottom\:medium, .\@desktop\:padding\:medium { --paddingBottom: var(--6sp); }
    .\@desktop\:padding-bottom\:large, .\@desktop\:padding\:large { --paddingBottom: var(--9sp); }
    .\@desktop\:padding-bottom\:huge, .\@desktop\:padding\:huge { --paddingBottom: var(--12sp); }

}


/**============================================================================
 * BOX-SIZING / ASPECT-RATIO
 =============================================================================*/
.width\:fullwidth {
    box-sizing: border-box;
    width: 100cqw;
}
.width\:contained {
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    @media (max-width: 768px) {
        max-width: 480px;
    }
    @media (min-width: 769px) {
        max-width: 1440px;
    }
}
@media (min-width: 769px) {
    .max-width\:50cmax { max-width: 750px; }/*calc(0.5 * var(--containerMaxWidth))*/
}

/*FOR CUSTOM VSPACE*/
:has(+.height\:auto) { margin-bottom: auto!important; }
.height\:auto + :is(*) { margin-top: auto!important; }
.min-height\:1rem { min-height: 1rem; }
.min-height\:2rem { min-height: 2rem; }
.min-height\:100vh { min-height: 100vh; }
.max-height\:50vh { max-height: 50vh; }
.max-height\:67vh { max-height: 67vh; }
.max-height\:100vh { max-height: 100vh; }

.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: 50vh }
.height\:67vh { height: 67vh }
.height\:100vh { height: 100vh }

@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: 50vh }
    .\@mobile\:height\:67vh { height: 67vh }
    .\@mobile\:height\:100vh { height: 100vh }
}
@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: 50vh }
    .\@desktop\:height\:67vh { height: 67vh }
    .\@desktop\:height\:100vh { height: 100vh }
}


/**============================================================================
 * LAYOUT / GRID
 =============================================================================*/
@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; }

}

.display\:grid { display: grid; }
.display\:stack { display: grid; grid-template-columns: 1fr; }
@media (max-width: 768px) {

    .\@mobile\:display\:grid { display: grid; }
    .\@mobile\:display\:stack { display: grid; grid-template-columns: 1fr; }

}
@media (min-width: 769px) {

    .\@desktop\:display\:flex {
        display: flex;
    }

    .display\:grid,
    .\@desktop\:display\:grid
    {
        display: grid;
        column-count: auto;
        &.\@desktop\:column-count\:1 { grid-template-columns: repeat(1, 1fr); }
        &.\@desktop\:column-count\:2 { grid-template-columns: repeat(2, 1fr); }
        &.\@desktop\:column-count\:3 { grid-template-columns: repeat(3, 1fr); }
        &.\@desktop\:column-count\:auto
        {
            grid-template-columns: none;
            grid-auto-flow: column;
            grid-auto-columns: 1fr;
        }
    }
    [class*="@desktop:column-count"]:not(.display\:grid, .\@desktop\:display\:grid) {
        &.\@desktop\:column-count\:1 { display: block; column-count: 1; }
        &.\@desktop\:column-count\:2 { display: block; column-count: 2; }
        &.\@desktop\:column-count\:3 { display: block; column-count: 3; }
        &.\@desktop\:column-count\:auto { display: flex; }
        &.\@desktop\:column-count\:1,
        &.\@desktop\:column-count\:2,
        &.\@desktop\:column-count\:3
        {
            & > :only-child { display: contents; }
        }
    }
    .\@desktop\:display\:stack {
        display: grid;
        grid-template-columns: 1fr;
    }
    .\@desktop\:display\:3-column-layout {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
    }

    .\@desktop\:column-span\:1 { grid-column-end: span 1; }
    .\@desktop\:column-span\:2 { grid-column-end: span 2; }
    .\@desktop\:column-span\:3 { grid-column-end: span 3; }

}


 
/**============================================================================
 * ANIMATION KEYFRAMES
 =============================================================================*/

@keyframes fadeInFromNone {
    0% {
        display: grid;
        opacity: 0;
    }
    100% {
        display: grid;
        opacity: 1;
    }
}
@keyframes fadeOutToNone {
    0% {
        display: grid;
        opacity: 1;
    }
    99% {
        display: grid;
        opacity: 0;
    }
    100% {
        display: none;
        opacity: 0;
    }

}


/**============================================================================
 * WORDPRESS BLOCK OVERRIDES
 =============================================================================*/
.wp-block-columns.is-layout-flex {
    display: grid;
    grid-auto-columns: 1fr;

    @media (max-width: 768px) {
        
    }
    @media (min-width: 769px) {
        grid-auto-flow: column;
    }
}
.wp-block-image[class*="aspect-ratio:"] img {
    aspect-ratio: inherit;
    object-fit: cover;
}
.wp-block-image[class*="max-height:"] img {
    max-height: inherit;
    width: auto;
    display: block;
    margin: auto;
}

.font-weight\:500,
.font-weight\:medium { font-weight: 550; &:is(a), a { text-decoration-thickness: 0.075em; } }


/**============================================================================
 * WORDPRESS ADMIN CMS
 =============================================================================*/
.editor-visual-editor__post-title-wrapper {
    margin: 24px 12px !important;
}
.acf-block-preview {
    margin-block-start: 0;
}
.block-editor-block-list__block .block-list-appender {
    line-height: 1;
}
.mce-edit-area > iframe {
    padding: 0 8px;
    box-sizing: border-box;
}
.editor-styles-wrapper {
    /*background: #f5f7f3;*/
}
:where(.editor-styles-wrapper) .is-root-container {
    container-type: inline-size;
}