@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Bungee+Inline&display=swap');
@layer theme {
    @media (prefers-reduced-motion: no-preference) {
        .filterGrid .grid,
        .filterCategory,
        section:not(.templateFilter) .grid .item,
        section .grid .splide__slide,
        .templateCover .inner,
        .templateMedia.mediaBottom .media,
        section:not(.templateBlocks) .inner .intro .title,
        section:not(.templateBlocks) .inner .intro .subTitle,
        section:not(.templateBlocks) .inner .content,
        section:not(.templateBlocks) .inner .buttons {
            opacity: 0;
            transform: translateY(50px);
        }
        
        .templateMedia.mediaLeft .media {
            opacity: 0;
            transform: translateX(-50px);
        }
        
        .templateMedia.mediaRight .media,
        .templateCollection.collectionFaq .media {
            opacity: 0;
            transform: translateX(50px);
        }
        
        .headerContainer {
            .logo, .nav, .hamburger {
                opacity: 0;
                transform: translateY(-250px);
            }
        }

        @view-transition {
            navigation: auto;
        }
    }
}
@layer addon {

    .themeColor1 {
        background-color: var(--color-light);
        .block {
            background-color: var(--color1);
        }
    }

    .themeColor2 {
        background-color: var(--color1);
        .block {
            background-color: var(--color-light);
        }
        .button.primary {
            background-color: var(--color-dark);
            color: var(--color1);
            &:hover {
                @media (hover: hover) {
                    background-color: var(--color-dark);
                    color: var(--color1);
                }
            }
        }
    }

    .themeColor3 {
        background-color: var(--color-dark);
    }

    .themeColor4 {
        background-color: var(--color-light);
    }
    
    .themeColor5 {
        background-color: var(--color1);
    }
    
    .themeColor6 {
        background-color: var(--color-dark);
        .container {
            border: 1px solid var(--color-light);
        }
    }

    .themeColor7 {
        background-color: var(--color2);
    }

    .themeColor4, .themeColor5, .themeColor6 {
        .container {
            padding: var(--padding);
            background-color: var(--color-dark);
        }
    }

    .themeColor1:not(.templateHomepageCover):not(.templateCover):not(.templateBackground) + .themeColor1:not(.templateBackground),
    .themeColor2:not(.templateHomepageCover):not(.templateCover):not(.templateBackground) + .themeColor2:not(.templateBackground),
    .themeColor3:not(.templateHomepageCover):not(.templateCover):not(.templateBackground) + .themeColor3:not(.templateBackground),
    .themeColor4:not(.templateHomepageCover):not(.templateCover):not(.templateBackground) + .themeColor4:not(.templateBackground),
    .themeColor5:not(.templateHomepageCover):not(.templateCover):not(.templateBackground) + .themeColor5:not(.templateBackground),
    .themeColor6:not(.templateHomepageCover):not(.templateCover):not(.templateBackground) + .themeColor6:not(.templateBackground) {
        padding-top: 0; 
    }
    
}
@layer addon {
    
}
@layer addon {
    body.content:not(.hasCover),
    body.article {
        main {
            margin-top: 0;
            section:first-of-type {
                padding-top: calc(var(--padding) + var(--padding) + 100px);
            }
        }
    }

    ul:not(.menuLevel1, .menuLevel2, .splide__pagination, .splide__list, .cookieChoose) {
        display: flex;
        flex-direction: column;
        gap: var(--gutter);
        
        padding-left: 0;
        li {
            list-style: none;
            padding-left: 26px;
            position: relative;
            &:before {
                position: absolute;
                left: 0;
                top: 10px;
                content: "";
                width: 16px;
                height: 8px;
                transform: rotate(-45deg);
                color: currentColor;
                display: block;
                border-left: 2px solid currentColor;
                border-bottom: 2px solid currentColor;
            }
        }
    }

    .tags {
        flex-direction: column;
        gap: 8px;
        .tag {
            background-color: transparent;
            color: var(--color-dark);
            padding: 0;
            gap: 8px;
            .text {
                font-size: var(--xs-fontsize);
                line-height: var(--xs-lineheight);
            }
            .symbol {
                svg, path {
                    width: 1.5rem;
                    height: 1.5rem;
                    fill: var(--color-dark);
                }
            }
        }
    }

    .backToTop {
        background-color: var(--color-dark);
        border-radius: 0;
        width: 40px;
        height: 40px;
        border: 1px solid var(--color-light);
        svg {color:var(--color-light);width:24px;height:24px;}
        &:before,
        &:after {display: none;}
    }
    
}
@layer addon {
    :root {

        /*COLORS*/
        --color1:    #D3FEB6;
        --color2:    #10D472;
        --color3:    #8F93FF;

        --color-dark: #00171F;
        --color-light: #EBFFF6;

        --waveColor: #00171F;
        --progressColor: #10D472;
        --cursorColor: #00171F;

        /*DEFAULT FONT*/
        --font-basic:    "aptos-display", sans-serif;
        --font-sub:      "Bungee Inline", sans-serif;
        --font-color:    var(--color-dark);

        /* XS FONTSIZE */
        --min-xs-fontsize: 1.125;
        --max-xs-fontsize: 1.125;
        --xs-lineheight: 1;

        /* FONTSIZES */
        --min-fontsize: 1.125;
        --max-fontsize: 1.375;
        --lineheight: 1.35;

        /* S FONTSIZE */
        --min-s-fontsize: 1.375;
        --max-s-fontsize: 1.5;
        --s-lineheight: 1;

        /* M FONTSIZE */
        --min-m-fontsize: 1.375;
        --max-m-fontsize: 1.625;
        --m-lineheight: 1;
        
        /* L FONTSIZE */
        --min-l-fontsize: 1.875;
        --max-l-fontsize: 2.813;
        --l-lineheight: 1;

        /* XL FONTSIZE */
        --min-xl-fontsize: 2.375;
        --max-xl-fontsize: 3.75;
        --xl-lineheight: 1;

        /* FORMS */
        --form-color:        #ccc;
        --form-placeholder:  rgba(0, 23, 31, 0.33);
        --form-input-size:    15px;
        --form-border-radius: 0;

        /* OTHER */
        --border-radius:	0;

        /* BUTTON */
        --button-padding:	  16px 16px;
        --button-radius:	  0;
    }


    @media (min-width: 56em) {
        :root {
            --spacer:               80px;
            --section:				164px;
        }
    }


    @media (--min-fablet) {
        :root {
            --spacer:               80px;
            --section:				164px;
        }
    }
    @media (min-width: 120em) {
        :root {
            --spacer:               15vw;
        }
    }
    @media (--min-largescreen) {
        :root {
            --spacer:               15vw;
        }
    }
}
@layer addon {

    .button {
        font-family: var(--font-basic);
        font-size: var(--xs-fontsize);
        line-height: var(--xs-lineheight);
        font-weight: 700;
        gap: 0;

        :not(.pagination) > & {
            .icon:first-of-type {
                width: 0;
                opacity: 0;
                margin-right: 0;
                transition: var(--transition);
            }
            .icon:last-of-type {
                width: 16px;
                margin-left: 10px;
                opacity: 1;
                transition: var(--transition);
            }
            &:hover {
                @media (hover: hover) {
                    .icon:first-of-type {
                        width: 16px;
                        margin-right: 10px;
                        opacity: 1;
                    }
                    .icon:last-of-type {
                        width: 0;
                        margin-left: 0;
                        opacity: 0;
                    }
                }
            }
        }



        &.primary, &.submit {
            background-color: var(--color2);
                    color: var(--font-color);
            &:hover {
                @media (hover: hover) {
                    background-color: var(--color2);
                    color: var(--font-color);
                }
            }
        }

        &.secondary {
            background-color: var(--color3);
            color: var(--font-color);
            &:hover {
                @media (hover: hover) {
                    background-color: var(--color3);
                    color: var(--font-color);
                }
            }
        }
        
        &.outline, &.cancel {
            background: none;
            box-shadow: inset 0 0 0 1px var(--color-dark);
            color: var(--color-dark);
            &:hover {
                @media (hover: hover) {
                    background: none;
                    box-shadow: inset 0 0 0 1px var(--color-dark);
                    color: var(--color-dark);
                }
            }
        }

        &.textLink {
            padding: 0;

            background: none;
            color: var(--font-color);
            border-radius: 0;
            &:after {display: none}

            &:hover {
                @media (hover: hover) {
                    background: none;
                    color: var(--button-hover);
                }
            }
        }

        &.delete {
            padding: 0;
            text-decoration: underline;
            text-underline-offset: 6px;
            background: none;
            color: var(--font-color);
            &:hover {
                @media (hover: hover) {
                    color: var(--button-hover);
                }
            }
        }



    }
    
}
@layer addon {

    .title + .subTitle {
        margin-top: 0;
    }

    .title {
        font-size: var(--xl-fontsize);
        line-height: var(--xl-lineheight);
        font-weight: 400;
        .templateHomepageCover &, .templateCover & {
            font-size: var(--l-fontsize);
            line-height: var(--l-lineheight);
        }
    }

    .subTitle {
        font-family: var(--font-basic);
        font-size: var(--fontsize);
        font-weight: 700;
    }

    .themeColor3, .themeColor4, .themeColor5, .themeColor6 {
        h1, h2, .title, .subTitle, .content {
            color: var(--color-light);
        }
    }
}
@layer addon {

    .pagination {
        width: 100%;

        .button {
            background-color: var(--color-dark);
            border: 1px solid var(--color-dark);
            color: var(--color-light);
            width: 64px;
            height: 64px;
            .icon {
                margin: unset;
                color: inherit;
                width: 16px;
            }
            &:hover {
                background-color: transparent;
                color: var(--color-dark);
            }
            &:disabled {
                opacity: 1;
                color: var(--color-dark);
                background-color: transparent;
            }
        }

    }  

}
@layer addon {

    .templateFilter:not(.filterJobPosting) {
        .block {
            .media {
                img {
                    aspect-ratio: 4/3;
                }
                &:before,
                &:after {
                    content: '';
                    position: absolute;
                    z-index: 8;
                    background-color: var(--color1);
                    width: 40px;
                    height: 40px;
                }

                &:before {
                    top: 40px;
                    right: 0px;
                }
                &:after {
                    top: 0;
                    right: 40px;
                }
            }
            .filterArticle & {
                .inner {
                    gap: var(--gutter);
                    .title {
                        font-size: calc(var(--m-fontsize) + .25rem);
                        font-family: "Bungee", sans-serif;
                    }
                }
            }
        }
    }
    
}
@layer addon {
    header {
        grid-template-columns: [full-start] minmax(var(--spacer), 1fr) [content-start] min(100% - (var(--spacer) * 2)) [content-end] minmax(var(--spacer), 1fr) [full-end];

        .headerContainer {
            flex-direction: row-reverse;
            align-items: flex-start;
            gap: var(--gutter);
            
            .logo {
                width: 100px;
                height: 100px;
                @media (max-width: 56em) {
                    width: 80px;
                    height: 80px;
                }
                @media (--max-fablet) {
                    width: 80px;
                    height: 80px;
                }
                svg {
                    width: 100%;
                    height: 100%;
                }
            }

            .hamburger {
                border: 2px solid #fff;
                background-color: transparent;
                span {
                    background-color: transparent;
                    width: 22px;
                    &:before {left: 0;}
                    &:before {
                        top: -4px;
                    }
                    &:after {
                        top: 4px;
                    }
                }
                .menuOpen & {
                    border-color: var(--color-dark);
                    span {
                        &:before, &:after {
                            top: 0;
                            background-color: var(--color-dark);
                        }
                    }
                }
            }

            .nav {
                flex: 1;
                @media (max-width: 56em) {
                    padding-left: 0;
                    padding-right: 0;
                    padding-top: calc(var(--section) + calc(var(--padding) * 2));
                    color: var(--color-dark);
                }
                @media (--max-fablet) {
                    padding-left: 0;
                    padding-right: 0;
                    padding-top: calc(var(--section) + calc(var(--padding) * 2));
                    color: var(--color-dark);
                }
                
                ul {
                    justify-content: flex-end;
                    gap: 0;
                    @media (max-width: 56em) {
                        justify-content: initial;
                        height: 100%;
                        border-top: 2px solid var(--color-dark);
                    }
                    @media (--max-fablet) {
                        justify-content: initial;
                        height: 100%;
                        border-top: 2px solid var(--color-dark);
                    }
                    li {
                        @media (max-width: 56em) {
                            transform: unset !important;
                        }
                        @media (--max-fablet) {
                            transform: unset !important;
                        }
                        @media (min-width: 56em) {
                            padding: 8px 16px;
                            position: relative;
                        }
                        @media (--min-fablet) {
                            padding: 8px 16px;
                            position: relative;
                        }
                        li > a[aria-current="page"]:not(.menuLevel2 a),
                        li > button[aria-current="page"]:not(.menuLevel2 button) {
                            @media (min-width: 56em) {
                                border-bottom: 2px solid currentColor;
                                color: currentColor;
                                &:before {
                                    content: "";
                                    width: 8px;
                                    height: 8px;
                                    display: block;
                                    position: absolute;
                                    top: 50%;
                                    transform: translateY(-50%);
                                    left: 0;
                                    background-color: currentColor;
                                }
                            }
                            @media (--min-fablet) {
                                border-bottom: 2px solid currentColor;
                                color: currentColor;
                                &:before {
                                    content: "";
                                    width: 8px;
                                    height: 8px;
                                    display: block;
                                    position: absolute;
                                    top: 50%;
                                    transform: translateY(-50%);
                                    left: 0;
                                    background-color: currentColor;
                                }
                            }
                        }
                        > a, > button {
                            font-weight: 700;
                            align-items: center;
                            text-decoration: none;
                            transition: color 0.4s ease-in-out;
                            border-bottom: 2px solid transparent;
                            padding: 4px 0 4px 16px;
                            gap: 8px;
                            color: currentColor;
                            text-align: left;
                            font-size: var(--xs-fontsize);
                            .icon {
                                width: 14px;
                                height: 14px;
                                @media (max-width: 56em) {
                                    min-width: 20px;
                                    min-height: 20px;
                                    transform: rotate(-90deg);
                                }
                                @media (--max-fablet) {
                                    min-width: 20px;
                                    min-height: 20px;
                                    transform: rotate(-90deg);
                                }
                            }
                            @media (max-width: 56em) {
                                font-size: var(--l-fontsize);
                                line-height: var(--l-lineheight);
                                border-bottom: 2px solid var(--color-dark);
                                padding: calc(var(--padding) * 1.5) var(--padding);
                            }
                            @media (--max-fablet) {
                                font-size: var(--l-fontsize);
                                line-height: var(--l-lineheight);
                                border-bottom: 2px solid var(--color-dark);
                                padding: calc(var(--padding) * 1.5) var(--padding);
                            }
                        }

                        [aria-haspopup] {
                            &:after {display: none;}
                        }
                        
                        &.open {
                            z-index: 9;
                            @media (min-width: 56em) {
                                /* background: var(--color-light); */
                                color: var(--color-dark);
                                > a, > button {
                                    z-index: 9;
                                    border-color: var(--color-dark);
                                    .icon {
                                        transform: rotate(180deg)
                                    }
                                    &:before {
                                        content: "";
                                        width: 8px;
                                        height: 8px;
                                        display: block;
                                        position: absolute;
                                        top: 50%;
                                        transform: translateY(-50%);
                                        left: 0;
                                        background-color: currentColor;
                                    }
                                }
                            }
                            @media (--min-fablet) {
                                /* background: var(--color-light); */
                                color: var(--color-dark);
                                > a, > button {
                                    z-index: 9;
                                    border-color: var(--color-dark);
                                    .icon {
                                        transform: rotate(180deg)
                                    }
                                    &:before {
                                        content: "";
                                        width: 8px;
                                        height: 8px;
                                        display: block;
                                        position: absolute;
                                        top: 50%;
                                        transform: translateY(-50%);
                                        left: 0;
                                        background-color: currentColor;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .subMenu {
                @media (min-width: 56em) {
                    top: 0;
                    /* top: 100%; */
                    background-color: var(--color-light);
                    width: auto;
                    min-width: 100%;
                    /* padding-top: calc(var(--gutter) / 2); */
                    padding-top: calc(40px + (var(--gutter) / 2));
                    &:before {display: none;}
                    .menuLevel2 {
                        gap: 0;
                        li {
                            padding: 4px 0;
                            /* word-wrap: break-word; */
                            a, button {
                                padding: 0 16px;
                                font-size: var(--xs-fontsize);
                                line-height: var(--xs-lineheight);

                            }
                            @media (min-width: 56em) {
                                [aria-current="page"] {
                                    display: flex;
                                    justify-content: flex-start;
                                    &:before {
                                        content: "";
                                        min-width: 8px;
                                        min-height: 8px;
                                        display: block;
                                        position: relative;
                                        background-color: currentColor;
                                    }
                                }
                            }
                            @media (--min-fablet) {
                                [aria-current="page"] {
                                    display: flex;
                                    justify-content: flex-start;
                                    &:before {
                                        content: "";
                                        min-width: 8px;
                                        min-height: 8px;
                                        display: block;
                                        position: relative;
                                        background-color: currentColor;
                                    }
                                }
                            }
                        }
                    }
                }
                @media (--min-fablet) {
                    top: 0;
                    /* top: 100%; */
                    background-color: var(--color-light);
                    width: auto;
                    min-width: 100%;
                    /* padding-top: calc(var(--gutter) / 2); */
                    padding-top: calc(40px + (var(--gutter) / 2));
                    &:before {display: none;}
                    .menuLevel2 {
                        gap: 0;
                        li {
                            padding: 4px 0;
                            /* word-wrap: break-word; */
                            a, button {
                                padding: 0 16px;
                                font-size: var(--xs-fontsize);
                                line-height: var(--xs-lineheight);

                            }
                            @media (min-width: 56em) {
                                [aria-current="page"] {
                                    display: flex;
                                    justify-content: flex-start;
                                    &:before {
                                        content: "";
                                        min-width: 8px;
                                        min-height: 8px;
                                        display: block;
                                        position: relative;
                                        background-color: currentColor;
                                    }
                                }
                            }
                            @media (--min-fablet) {
                                [aria-current="page"] {
                                    display: flex;
                                    justify-content: flex-start;
                                    &:before {
                                        content: "";
                                        min-width: 8px;
                                        min-height: 8px;
                                        display: block;
                                        position: relative;
                                        background-color: currentColor;
                                    }
                                }
                            }
                        }
                    }
                }
                @media (max-width: 56em) {
                    position: absolute !important;
                    transition: right 0.4s ease-in-out;
                    transform: unset !important;
                    background-color: var(--color1);
                    width: 100vw;                    
                    right: -100%;
                    left: auto;
                    top: -2px;
                    .open & {
                        right: 0;
                    }
                    .goBack {
                        color: var(--color-dark);
                        padding: 0 var(--gutter);
                        font-weight: 900;
                    }
                    .title {
                        color: var(--color-dark);
                        font-size: var(--l-fontsize);
                        font-family: var(--font-basic);
                        font-weight: 700;
                        padding: 0 var(--gutter) var(--gutter);
                    }
                    ul {
                        li {
                            a {
                                font-family: var(--font-basic);
                                font-size: var(--m-fontsize);
                                line-height: var(--m-lineheight);
                                text-transform: none;
                                border-bottom: none;
                                padding: 0 var(--padding) var(--padding) var(--padding);
                            }
                            &:first-child {
                                a {
                                    padding-top: calc(var(--padding) * 1.5);
                                }
                            }
                        }
                    }
                }
                @media (--max-fablet) {
                    position: absolute !important;
                    transition: right 0.4s ease-in-out;
                    transform: unset !important;
                    background-color: var(--color1);
                    width: 100vw;                    
                    right: -100%;
                    left: auto;
                    top: -2px;
                    .open & {
                        right: 0;
                    }
                    .goBack {
                        color: var(--color-dark);
                        padding: 0 var(--gutter);
                        font-weight: 900;
                    }
                    .title {
                        color: var(--color-dark);
                        font-size: var(--l-fontsize);
                        font-family: var(--font-basic);
                        font-weight: 700;
                        padding: 0 var(--gutter) var(--gutter);
                    }
                    ul {
                        li {
                            a {
                                font-family: var(--font-basic);
                                font-size: var(--m-fontsize);
                                line-height: var(--m-lineheight);
                                text-transform: none;
                                border-bottom: none;
                                padding: 0 var(--padding) var(--padding) var(--padding);
                            }
                            &:first-child {
                                a {
                                    padding-top: calc(var(--padding) * 1.5);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .hasCover {
        .nav {
            color: var(--color-light);
        }
    }
    .menuOpen {
        .hasCover {
            .nav {
                color: var(--color-dark);
            }
        }
    }

}
@layer addon {

    footer {
        grid-template-columns: [full-start] minmax(var(--spacer), 1fr) [content-start] min(100% - (var(--spacer) * 2)) [content-end] minmax(var(--spacer), 1fr) [full-end];

        background-color: var(--color-dark);
        color: var(--color-light);
        @media (max-width: 56em) {
            padding: calc(var(--padding) * 2) 0;
        }
        @media (--max-fablet) {
            padding: calc(var(--padding) * 2) 0;
        }
        .footerContainer {
            background-image: url(../images/footer.svg);
            background-repeat: no-repeat;
            background-position: center right;
            justify-content: flex-start;
            align-items: flex-start;
            @media (max-width: 56em) {
                flex-direction: column;
            }
            @media (--max-fablet) {
                flex-direction: column;
            }
            @media (min-width: 56em) {
                padding-right: calc(162px + var(--spacer));
            }
            @media (--min-fablet) {
                padding-right: calc(162px + var(--spacer));
            }
            .footerLeft, .footerMiddle {
                flex: 1;
                text-align: left;
                .intro {
                    gap: 10px;
                    display: flex;
                    flex-direction: column;
                    .title {
                        font-family: var(--font-basic);
                        color: currentColor;
                        font-size: calc(var(--m-fontsize) + .25rem);
                        line-height: var(--m-lineheight);
                    }
                    a.title {
                        &:hover {
                            @media (hover: hover) {
                                color: var(--color1);
                            }
                        }
                    }
                    .content {
                        font-size: var(--xs-fontsize);
                        @media (max-width: 56em) {
                            font-size: calc(var(--xs-fontsize) - .2rem);
                        }
                        @media (--max-fablet) {
                            font-size: calc(var(--xs-fontsize) - .2rem);
                        }
                        a {
                            color: currentColor;
                            &:hover {
                                @media (hover: hover) {
                                    color: var(--color1);
                                }
                            }
                        }
                    }
                }
            }
            .footerMiddle {
                .title {
                    display: flex;
                    gap: calc(var(--gutter) / 2);
                    align-items: flex-end;
                    .icon {
                        width: 20px;
                    }
                }
            }
            .footerRight {
                svg {
                    height: auto;
                    width: 480px;
                }
                @media (max-width: 56em) {
                    display: none;
                }
                @media (--max-fablet) {
                    display: none;
                }
            }
        }
    }
    
}
@layer addon {

    section {
        grid-template-columns: [full-start] minmax(var(--spacer), 1fr) [content-start] min(100% - (var(--spacer) * 2)) [content-end] minmax(var(--spacer), 1fr) [full-end];

        &:not(.templateCover, .templateHomepageCover, .banner) {
            .inner {
                gap: var(--padding);
                .intro {
                    display: flex;
                    flex-direction: column;
                    gap: var(--padding);
                    @media (max-width: 56em) {
                        gap: calc(var(--padding) * 1.5);
                    }
                    @media (--max-fablet) {
                        gap: calc(var(--padding) * 1.5);
                    }
                    .subTitle {
                        order: 1;
                        display: inline-flex;
                        align-items: center;
                        gap: 16px;
                        &:before {
                            content: '';
                            display: block;
                            min-width: 16px;
                            min-height: 16px;
                            background-color: currentColor;
                        }
                    }
                    .title {
                        order: 2;
                    }
                    .content {
                        order: 3;
                    }
                }
            }
        }
        
        &.templateCover, &.templateBackground, &.templateHomepageCover {
            
            .media {
                &:after {
                    background: rgba(0, 23, 31, 0.15);
                }
            }
            
            .inner {
                padding: var(--padding);
                .themeColor1 & {
                    background-color: var(--color-light);
                    .button.outline {
                        box-shadow: inset 0 0 0 1px var(--color-dark);
                        color: var(--color-dark);
                    }
                }
                .themeColor2 & {
                    background-color: var(--color1);
                }
                .themeColor7 & {
                    background-color: var(--color2);
                    .button.outline {
                        box-shadow: inset 0 0 0 1px var(--color-dark);
                        color: var(--color-dark);
                    }
                }
            }
        }

        &.templateCover, &.templateHomepageCover {
            &:before {
                @media (max-width: 56em) {
                    display: none;
                }
                @media (--max-fablet) {
                    display: none;
                }
            }
            .inner {
                grid-column: span 4;
                .intro {
                    display: flex;
                    flex-direction: column;
                    gap: calc(var(--gutter) * .67);
                    flex-grow: 1;
                }
            }
        }
        
        &.templateBackground {
            &:before {
                content: '';
                position: absolute;
                z-index: 8;
                top: 0;
                left: 0;
                width: 80px;
                height: 80px;
                background-color: inherit;
                @media (max-width: 56em) {
                    bottom: 0;
                    right: auto;
                    left: 0;
                    width: 48px;
                    height: 48px;
                }
                @media (--max-fablet) {
                    bottom: 0;
                    right: auto;
                    left: 0;
                    width: 48px;
                    height: 48px;
                }
            }
            
            .container {
                @media (max-width: 56em) {
                    grid-column: full-start / content-end;
                    padding-left: 48px;
                }
                @media (--max-fablet) {
                    grid-column: full-start / content-end;
                    padding-left: 48px;
                }
            }
            @media (max-width: 56em) {
                padding: 48px 0;
            }
            @media (--max-fablet) {
                padding: 48px 0;
            }
            @media (min-width: 56em) {
                padding: 80px 0;
            }
            @media (--min-fablet) {
                padding: 80px 0;
            }
        }

        &.templateMedia {
            .container {
                row-gap: calc(var(--gutter) * 2);
            }
            &.mediaLeft {
                @media (min-width: 56em) {
                    .media {
                        grid-column: span 5;
                    }
                    .inner {
                        grid-column: 7 / span 6;
                    }
                }
                @media (--min-fablet) {
                    .media {
                        grid-column: span 5;
                    }
                    .inner {
                        grid-column: 7 / span 6;
                    }
                }
            }
            &.mediaRight {
                @media (min-width: 56em) {
                    .media {
                        grid-column: 8 / span 5;
                    }
                    .inner {
                        grid-column: span 6;
                    }
                }
                @media (--min-fablet) {
                    .media {
                        grid-column: 8 / span 5;
                    }
                    .inner {
                        grid-column: span 6;
                    }
                }                
            }

            &.mediaRight,
            &.mediaLeft {
                &.themeColor2 {
                    .container {
                        background-color: inherit;
                        .media {
                            background-color: inherit;
                            &:before {
                                content: '';
                                position: absolute;
                                z-index: 8;
                                top: 0;
                                right: 80px;
                                width: 80px;
                                height: 80px;
                                background-color: inherit;
                            }
                            &:after {
                                content: '';
                                position: absolute;
                                z-index: 8;
                                top: 80px;
                                right: 0px;
                                width: 80px;
                                height: 80px;
                                background-color: inherit;
                            }
                            @media (max-width: 56em) {
                                &:before, &:after {
                                    width: 40px;
                                    height: 40px;
                                }
                                &:before {
                                    top: 40px;
                                    right: 0px;
                                }
                                &:after {
                                    top: 0;
                                    right: 40px;
                                }
                            }
                            @media (--max-fablet) {
                                &:before, &:after {
                                    width: 40px;
                                    height: 40px;
                                }
                                &:before {
                                    top: 40px;
                                    right: 0px;
                                }
                                &:after {
                                    top: 0;
                                    right: 40px;
                                }
                            }
                        }
                    }
                }
            }
            &.mediaBottom {
                .container {
                    row-gap: calc(var(--section) / 2);
                }
            }

            
        }
        &.templateCover + &.templateContent:not(.split, .columns, .review &),
        &.templateHomepageCover + &.templateContent:not(.split, .columns, .review &),
        &.templateCover + &.templateMedia.mediaBottom,
        &.templateHomepageCover + &.templateMedia.mediaBottom {
            .inner {
                .content {
                    font-size: calc(var(--m-fontsize) + .25rem);
                    line-height: 1.35;
                }
            }
        }
        
        &.templateContent.split {
            @media (max-width: 56em) {
                .contentRight {
                    padding-top: var(--gutter);
                    ul {
                        margin-top: var(--gutter);
                    }
                }
            }
            @media (--max-fablet) {
                .contentRight {
                    padding-top: var(--gutter);
                    ul {
                        margin-top: var(--gutter);
                    }
                }
            }
        }
    }
}
html { 
    scroll-behavior: smooth;
}