@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@layer theme {
    @media (prefers-reduced-motion: no-preference) {

        .templateHomepageIntro .media,
        .templateFilter .views,
        .templateFilter .grid,
        .templateFilter .grid .filters,
        .templateFilter .grid .filterGrid,
        .templateCallToAction .container,
        .inner .intro .title,
        .inner .intro .content,
        .inner .intro .scroll,
        .inner .buttons,
        .templateCollection .grid .item,
        .templateCollection .grid article,
        .templateCollection .grid .splide__slide,
        .splide__track .splide__arrows .splide__arrow,
        .splide__track .splide__pagination {
            opacity: 0;
            transform: translateY(50px);
        }
        
        .templateMedia.mediaRight .media {
            opacity: 0;
            transform: translateX(50px);
        }
        
        .templateMedia.mediaLeft .media {
            opacity: 0;
            transform: translateX(-50px);
        }
        
        .templateGallery .grid .item {
            opacity: 0;
            transform: translateX(150px);
        }

        @view-transition {
            navigation: auto;            
        }
    }
}
@layer addon {
    section {
        .block {
            background-color: var(--color4);
        }
    }
    .themeColor1 {
        background-color: transparent;
        .container {
            background-color: var(--color-light);
        }
    }
    .themeColor2 {
        background-color: transparent;
        .container {
            background-color: var(--color4);
        }
    }
    .themeColor1 + .themeColor1,
    .themeColor2 + .themeColor2 {
        .container {
            padding-top: 0;
        }
    }
}
@layer addon {
    body:not(.hasCover) {
        & main {
            margin-top: 0;
        }
    }

    body:not(.homepage) {
        &:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: calc(100% - var(--section));
            background: var(--gradient);
            z-index: 1;
            min-height: 600px;
        }
    }
    .bodyContainer {
        overflow: hidden;
    }
    main {
        background-color: var(--color-light);
        section {
            z-index: 2;
            .inner {
                @media (min-width: 56em) {
                    grid-column: 2 / span 10;
                }
                @media (--min-fablet) {
                    grid-column: 2 / span 10;
                }
            }
        }
    }

    .backToTop {

        &:before {
            background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cpath fill='%23004716' d='M23.5,10.9L13.1,0.5c-0.1-0.1-0.3-0.2-0.5-0.3c-0.4-0.2-0.8-0.2-1.1,0c-0.2,0.1-0.3,0.2-0.5,0.3L0.5,10.9 c-0.6,0.6-0.6,1.5,0,2.1s1.5,0.6,2.1,0l7.9-7.9v17.3c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5V5.1l7.9,7.9c0.3,0.3,0.7,0.4,1.1,0.4 c0.4,0,0.8-0.1,1.1-0.4C24.1,12.5,24.1,11.5,23.5,10.9z'/%3E%3C/svg%3E%0A");
        }
        &:after {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M26.4 5.5c.5.6 1 .9 1.7 1 1.2.2 1.5-.3 1.6-.6 0-.2 0-.6-1.3-1.2-1.4-.7-2.3-1.6-2-2.9C26.7.7 27.9.1 29.3.3c.9.1 1.8.6 2.3 1.4l-1.2.8c-.2-.4-.7-.8-1.3-.9-1-.2-1.2.3-1.3.5 0 .3-.1.7 1.2 1.2 1.3.6 2.4 1.4 2.2 2.7-.3 1.6-1.9 1.9-3.2 1.7-1.1-.2-1.9-.7-2.6-1.5l1.1-.9-.1.2zm11.7 1.3c0-.8-.3-1.6-1-2.1-1.2-.7-2.5-.2-3.1 1-.7 1.2-.5 2.5.8 3.2.9.5 1.8.4 2.5-.3l1 1c-1.2 1.2-2.9 1.3-4.2.5C32.2 9 31.7 6.8 32.8 5c1-1.7 3-2.7 5.1-1.5 1.2.7 1.9 2 1.8 3.4l-1.6-.1zm.1 6.5-.9-1.2L43 7.7l2.2 2.8c.8 1.1.8 2.5-.2 3.3-.7.6-1.6.6-2.3.3 0 1.1-.7 2-1.6 2.8l-1-1.2c1.2-.9 1.7-1.9.9-2.9l-.8-1-1.9 1.5h-.1zm4.6-3.6-1.6 1.2 1.3 1.6c.4.5 1 .5 1.4.2s.5-1 .2-1.4l-1.3-1.6zm3.8 13.9c-2 .5-4.1-.7-4.6-2.7s.7-4.1 2.7-4.6 4.1.7 4.6 2.7-.7 4.1-2.7 4.6zm-.3-1.5c1.3-.3 2.1-1.6 1.8-2.9-.3-1.2-1.6-2-2.9-1.6-1.3.3-2.1 1.6-1.8 2.8.3 1.2 1.6 2 2.9 1.6v.1zm3.5 5.2-5.8-.6-.3 3.1h-1.4c0-.1.5-4.7.5-4.7l7.2.7-.2 1.5zm-1.6 7-5.3-2.2-1.2 2.9-1.3-.5 1.8-4.2 6.6 2.8-.6 1.2zm-8.7 11.4-3.1-3.4c-1.1-1.2-.9-3 .3-4.1s3-1.2 4.1 0l3.1 3.4-1.1 1-3.1-3.4c-.5-.5-1.4-.6-2.1 0-.7.6-.7 1.5-.2 2.1l3.1 3.4-1 1zm-6.8-4.5 1.4-.5 2.7 6.7-3.3 1.3c-1.3.5-2.6 0-3.1-1.3-.5-1.4.1-2.6 1.4-3.1l1.9-.8-.9-2.3h-.1zm2.1 5.4-.7-1.7-1.9.8c-.6.2-.7.7-.5 1.2.2.4.7.7 1.2.5l1.9-.8zm-11.2-1.7c-.5-.6-1-.9-1.7-1-1.2-.2-1.5.3-1.6.6 0 .2 0 .6 1.3 1.2 1.4.7 2.3 1.6 2 2.9-.3 1.1-1.5 1.7-2.9 1.5-.9-.1-1.8-.6-2.3-1.4l1.2-.8c.2.4.7.8 1.3.9 1 .2 1.2-.3 1.3-.5 0-.3.1-.7-1.2-1.2-1.3-.6-2.4-1.4-2.2-2.7.3-1.6 1.9-1.9 3.2-1.7 1.1.2 1.9.7 2.6 1.5l-1.1.9.1-.2zm-11.7-1.4c0 .8.3 1.6 1 2.1 1.2.7 2.5.2 3.1-1 .7-1.2.5-2.5-.7-3.2-.8-.5-1.8-.4-2.5.3l-1-1c1.2-1.2 2.9-1.3 4.2-.5 1.9 1.1 2.4 3.3 1.3 5.1-1 1.7-3 2.7-5.1 1.5-1.2-.7-1.9-2-1.8-3.4h1.5v.1zm-.1-6.4.9 1.2L7 42.7l-2.2-2.8c-.8-1.1-.8-2.5.2-3.3.7-.6 1.6-.6 2.3-.3 0-1.1.7-2 1.6-2.8l1 1.2c-1.2.9-1.7 1.9-.9 2.9l.8 1 2-1.5zm-4.6 3.5 1.6-1.2-1.3-1.6c-.4-.5-1-.5-1.4-.2s-.5 1-.2 1.4l1.3 1.6zM3.4 26.8c2-.5 4.1.7 4.6 2.7s-.7 4.1-2.7 4.6-4.1-.7-4.6-2.7.7-4.1 2.7-4.6zm.3 1.4c-1.3.3-2.1 1.6-1.8 2.9.3 1.2 1.6 2 2.9 1.6 1.3-.3 2.1-1.6 1.8-2.8-.3-1.2-1.6-2-2.9-1.6v-.1zM.2 23l5.8.6.3-3.1h1.4c0 .1-.5 4.7-.5 4.7L0 24.4.2 23zm1.6-7 5.3 2.2 1.2-2.9 1.3.5L7.8 20l-6.6-2.8.6-1.2zm8.7-11.4L13.6 8c1.1 1.2.9 3-.3 4.1s-3 1.2-4.1 0L6.1 8.7l1.1-1 3.1 3.4c.5.5 1.4.6 2.1 0 .7-.6.7-1.5.2-2.1L9.5 5.6l1.1-1h-.1zm6.9 4.5-1.4.5-2.7-6.7 3.3-1.3c1.3-.5 2.6 0 3.1 1.3.5 1.4-.1 2.6-1.4 3.1l-1.9.8 1 2.3zm-2.2-5.3.7 1.7 1.9-.8c.6-.2.7-.7.5-1.2-.2-.4-.7-.7-1.2-.5l-1.9.8z' fill='%23004716'/%3E%3C/svg%3E");
        }
    }
}
article {
    display: inline;
}
@layer addon {
    :root {
        /*COLORS*/
        --color1:    #004716;
        --color2:    #40A533;
        --color3:    #D3D800;
        --color4:    #EFF1EE;
        --color5:    #007d30;

        /* variable for gradient use */
        --gradient:    linear-gradient(90deg, #007D30 5%, #40A533 70%, #94C11C 100%);
        
        --boxshadow: 0 0 1.25rem 0 rgba(60,64,67,.1);


        --transition: all 0.4s ease-in-out;

        /*DEFAULT FONT*/
        --font-basic:    Montserrat, sans-serif;
        --font-sub:      Montserrat, sans-serif;
        --font-color:    var(--color1);

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

        /* S FONTSIZE */
        --min-s-fontsize: 1.125;
        --max-s-fontsize: 1.25;
        --s-lineheight: 1.3;

        /* FONTSIZES */
        --min-fontsize: 1;
        --max-fontsize: 1.125;
        --lineheight: 1.7;

        /* M FONTSIZE */
        --min-m-fontsize: 1.25;
        --max-m-fontsize: 1.5;
        --m-lineheight: 1.25;

        /* L FONTSIZE */
        --min-l-fontsize: 1.75;
        --max-l-fontsize: 2.25;
        --l-lineheight: 1.17;

        /* XL FONTSIZE */
        --min-xl-fontsize: 2.25;
        --max-xl-fontsize: 3.75;
        --xl-lineheight: 1.17;


        /* OTHER */
        --border-radius:	12px;
        --section-radius:   32px;
        --form-placeholder: #999;

        /* BUTTON */
        --button-hover:     var(--color1);
        --button-radius:    12px;
    }


    @media (max-width: 56em) {
        :root {
            --spacer:          		5vw;
            --section:				40px;
            --gutter:				16px;
            --min-gutter:   		-16px;
        }
    }


    @media (--max-fablet) {
        :root {
            --spacer:          		5vw;
            --section:				40px;
            --gutter:				16px;
            --min-gutter:   		-16px;
        }
    }
    @media (min-width: 56em) {
        :root {
            --spacer:          		5vw;
            --section:				80px;
        }
    }
    @media (--min-fablet) {
        :root {
            --spacer:          		5vw;
            --section:				80px;
        }
    }
    @media (min-width: 90em) {
        :root {
            --spacer:          		12vw;
            --section:				80px;
        }
    }
    @media (--min-desktop) {
        :root {
            --spacer:          		12vw;
            --section:				80px;
        }
    }
}
@layer addon {
    .button {
        font-weight: 500;
        svg {
            order: 2;
        }
        .text {
            -webkit-hyphens: auto;
                    hyphens: auto;
            @media (max-width: 56em) {
                -webkit-hyphens: inherit;
                        hyphens: inherit;
            }
            @media (--max-fablet) {
                -webkit-hyphens: inherit;
                        hyphens: inherit;
            }
        }
        &:hover {
            @media (hover: hover) {
                background-color: unset;
                color: unset;
            }
        }
        
        &.primary, &.submit {
            background-color: var(--color2);
            color: var(--color-light);
            .icon {display: none}
            &:hover {
                @media (hover: hover) {
                    background-color: var(--color1);
                    color: var(--color-light);
                }
            }
        }

        &.secondary {
            background-color: var(--color1);
            .icon {display: none}
            &:hover {
                @media (hover: hover) {
                    background-color: var(--color2);
                    color: var(--color-light);
                }
            }
        }
        
        &.outline, &.cancel {
            background: none;
            box-shadow: inset 0 0 0 2px var(--color1);
            color: var(--color1);
            &:hover {
                @media (hover: hover) {
                    background-color: var(--color1);
                    box-shadow: inset 0 0 0 2px var(--color1);
                    color: var(--color-light);
                }
            }
        }

        &.textLink {
            padding: 0;

            background: none;
            color: var(--font-color);
            border-radius: 0;
            justify-content: flex-start;
            font-weight: 700;
            .text {
                text-decoration: underline;
                line-height: 1.4;
            }
            .icon {
                display: inline-block;
                width: 16px;
                height: 16px;
                color: var(--color2);
                transition: var(--transition);
                transform: translateX(-5px);
            }
            &:hover {
                @media (hover: hover) {
                    background: none;
                    color: var(--color2);
                    .icon {
                        transform: translateX(0px);
                    }
                }
            }
        }
    }
    
}
@layer addon {
    details {
        padding: 0;
        border: 0;
        background-color: unset;

        summary {
            padding: calc(var(--padding) / 2) 0;
            border-bottom: 3px solid var(--color4);
            align-items: center;
            .icon {
                min-width: 40px;
                min-height: 40px;
                border-radius: 100px;
                color: #fff;
                transition: var(--transition);
                line-height: 40px;
                padding: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: var(--color2);
            }
        }
        &[open] {
            summary {
                .icon {
                    transform: rotate(-180deg);
                }
            }
        }
    }
}
@layer addon {
    
    .title {
        font-size: var(--l-fontsize);
        line-height: var(--l-lineheight);
        color: var(--color2);
        
        @media (max-width: 56em) {
            -webkit-hyphens: initial;
                    hyphens: initial;
        }
        
        @media (--max-fablet) {
            -webkit-hyphens: initial;
                    hyphens: initial;
        }
    }
}
@layer addon {
    .media {
        .buttons {
            position: absolute;
            bottom: var(--padding);
            left: var(--padding);
            button.playButton {
                position: relative;
                top: unset;
                bottom: unset;
                left: unset;
                transform: unset;
                transition: none;
            }
        }
    }
    button {
        &.pauseButton {
            width: 34px;
            height: 34px;
            border-radius: 50px;
            .icon {width: 20px;}
        }
        &.playButton {
            width: 100px;
            height: 100px;
            border-radius: 100%;
            overflow: hidden;
            background: #fff;
            @media (max-width: 56em) {
                width: 80px;
                height: 80px;
            }
            @media (--max-fablet) {
                width: 80px;
                height: 80px;
            }
            .icon {
                width: 100%;
                height: 100%;
                z-index: 2;
                color: #fff;
                padding: 20px;
                background: transparent;
                transition: none;
                
            }        
            &:after {
                all: unset;
                z-index: 1;
                transition: var(--transition);
                width: 100%;
                height: 100%;
                content: "";
                opacity: 1;
                position: absolute;
                background: var(--gradient);
            }
            &:hover {
                @media (hover: hover) {
                    .icon {
                        color: var(--font-color);
                    }
                    &:after {
                        opacity: 0;
                    }
                }
            }
        }
    }

    .playing {
        .playButton {
            opacity: 1;
            &:hover {
                @media (hover: hover) {
                    opacity: 1;
                }
            }
            .play {
                display: none;
            }
            .pause {
                color: var(--font-color);
                background: #fff;
                padding: 25px;
            }
        }
    }
}
@layer addon {

    input, select, textarea {
        line-height: 25px;
        min-height: 25px;
        border-radius: 0;
        border-width: 2px;
        margin: 0;
        &[type="checkbox"], &[type="radio"] {
            &:hover {
                @media (hover: hover) {
                    border-color: var(--color2);
                }
            }
        }
        &[type="checkbox"] {
            width: 30px;
            height: 30px;
             &:checked {
                border-color: var(--color2);
                &::after {
                    background-color: var(--color2);
                }
            }
        }
    }
    .select {
        select {
            min-width: 200px;
            padding: var(--form-input-size) calc(var(--form-input-size) * 2 + 20px) var(--form-input-size) var(--form-input-size);
        }
        &:after {
            border-bottom: 2px solid var(--form-placeholder);
            border-right: 2px solid var(--form-placeholder);
            height: 14px;
            width: 14px;
            margin-top: -3px;
        }
    }
    @supports (appearance: base-select) {
        .select {
            select {
                align-items: center;
                padding: var(--form-input-size);
                &::picker-icon {
                    font-size: 14px;
                }
                option {
                    justify-content: space-between;
                    flex-direction: row-reverse;
                }
            }
        }
    }
}
@layer addon {
    .templateCollection, .templateFilter {
        .block {
            .inner {
                @media (max-width: 56em) {
                    padding: calc(var(--padding) + var(--gutter)) var(--padding);
                    .footer {
                        flex-grow: 1;
                        align-items: flex-end;
                    }
                }
                @media (--max-fablet) {
                    padding: calc(var(--padding) + var(--gutter)) var(--padding);
                    .footer {
                        flex-grow: 1;
                        align-items: flex-end;
                    }
                }
                .title {
                    font-size: calc(var(--l-fontsize) - .5rem);
                    color: var(--color5);
                    font-weight: bold;
                }
            }
        }
        &.collectionPage, &.collectionPerson {
            .block {

                .media {
                    @media (min-width: 56em) {
                        width: 30%;
                        max-width: 240px;
                        aspect-ratio: 1/1;
                    }
                    @media (--min-fablet) {
                        width: 30%;
                        max-width: 240px;
                        aspect-ratio: 1/1;
                    }
                    @media (max-width: 56em) {
                        width: 100%;
                        aspect-ratio: 600 / 520;
                    }
                    @media (--max-fablet) {
                        width: 100%;
                        aspect-ratio: 600 / 520;
                    }
                    img {
                        height: 100%;
                    }
                }
            }
        }
    }
}
@layer addon {
    header {
        grid-template-columns: [full-start] minmax(var(--spacer), 1fr) [content-start] minmax(auto, calc(var(--max-viewport) * 1vw)) [content-end] minmax(var(--spacer), 1fr) [full-end];
        transition: var(--transition);
        .logo {
            svg {
                @media (max-width: 56em) {
                    height: 32px;
                    width: auto;
                }
                @media (--max-fablet) {
                    height: 32px;
                    width: auto;
                }
            }
        }

        
        .hamburger {
            background-color: transparent;
            span {
                width: 22px;
                &:before {
                    top: -7px;
                }
                &:after {
                    top: 7px;
                }
            }
        }

        .menuOpen & {
            .hamburger {
                span {
                    &:before,
                    &:after {
                        top: 0;
                    }
                }
            }
        }


        &:before {
            transition: var(--transition);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            content: "";
            background: var(--gradient);
            opacity: 0;
        }
        &.is-sticky {
            top: 0;
            position: fixed;
            padding: calc(var(--padding) / 2) 0;
            &:before {
                opacity: 1;
            }
        }

        .nav {
            @media (max-width: 56em) {
                padding-left: 0;
                padding-right: 0;
                background: var(--gradient);
            }
            @media (--max-fablet) {
                padding-left: 0;
                padding-right: 0;
                background: var(--gradient);
            }
            .menuLevel1 {
                gap: calc(var(--gutter) * 1.5);
                @media (max-width: 56em) {
                    gap: 0;
                }
                @media (--max-fablet) {
                    gap: 0;
                }
                li {
                    @media (max-width: 56em) {
                        border-bottom: 1px solid rgba(255,255,255,0.3);
                        padding: 0 var(--spacer);
                        &:last-of-type {
                            .text {
                                flex: 1;
                                padding-left: 10px;
                            }
                        }
                    }
                    @media (--max-fablet) {
                        border-bottom: 1px solid rgba(255,255,255,0.3);
                        padding: 0 var(--spacer);
                        &:last-of-type {
                            .text {
                                flex: 1;
                                padding-left: 10px;
                            }
                        }
                    }
                    .icon.search {
                        display: block;
                        width: 24px;
                        height: 24px;
                    }
                    @media (min-width: 56em) {
                        &:last-of-type {
                            .text {display: none;}
                        }
                    }
                    @media (--min-fablet) {
                        &:last-of-type {
                            .text {display: none;}
                        }
                    }
                }
            }
            a {
                font-weight: bold;
                color: #fff;
                padding: 0;
                line-height: 1.25;
                text-decoration: none;
                @media (min-width: 56em) {
                    .icon {display: none}
                }
                @media (--min-fablet) {
                    .icon {display: none}
                }                

                @media (max-width: 56em) {
                    font-size: var(--m-fontsize);
                    line-height: var(--m-lineheight);
                    padding: var(--gutter) 0;
                    .icon {
                        width: 16px;
                        height: 16px;
                        display: inline-block;
                        color: #fff;
                        transition: var(--transition);
                    }
                }                

                @media (--max-fablet) {
                    font-size: var(--m-fontsize);
                    line-height: var(--m-lineheight);
                    padding: var(--gutter) 0;
                    .icon {
                        width: 16px;
                        height: 16px;
                        display: inline-block;
                        color: #fff;
                        transition: var(--transition);
                    }
                }
                

                &:before {
                    background: #fff;
                    content: "";
                    height: 2px;
                    left: 0;
                    position: absolute;
                    top: calc(100% + 2px);
                    transform: scaleX(0);
                    transform-origin: right center;
                    transition: opacity .15s,transform .15s;
                    transition-timing-function: ease, ease, ease;
                    transition-timing-function: cubic-bezier(.645,.045,.355,1);
                    width: 100%;
                }
                
                &[aria-current="page"] {
                    @media (min-width: 56em) {
                        &:before {
                            transform: none;
                            transform-origin: left center;
                        }
                    }
                    @media (--min-fablet) {
                        &:before {
                            transform: none;
                            transform-origin: left center;
                        }
                    }
                }
                &:hover {
                    @media (hover: hover) {
                        @media (min-width: 56em) {
                            &:before {
                                transform: none;
                                transform-origin: left center;
                            }
                        }
                        @media (--min-fablet) {
                            &:before {
                                transform: none;
                                transform-origin: left center;
                            }
                        }
                    }
                }
            }
        }
    }
}
@layer addon {
    footer {
        padding: var(--section) 0;
        background: var(--gradient);
        grid-template-columns: [full-start] minmax(var(--spacer), 1fr) [content-start] minmax(auto, calc(var(--max-viewport) * 1vw)) [content-end] minmax(var(--spacer), 1fr) [full-end];
        .footerContainer {
            align-items: flex-start;
            flex-direction: column;
            @media (max-width: 56em) {
                align-items: center;
            }
            @media (--max-fablet) {
                align-items: center;
            }
            
            .footerTop {
                display: flex;
                justify-content: space-between;
                width: 100%;
                flex-wrap: wrap;
                
                
                .footerTopLeft {
                    @media (min-width: 56em) {
                        width: 50%;
                    }
                    @media (--min-fablet) {
                        width: 50%;
                    }                    
                    .footerForm {
                        display: flex;
                        flex-wrap: wrap;
                        .title {
                            color: #fff;
                            width: 100%;
                            font-size: var(--m-fontsize);
                            margin-bottom: var(--gutter);
                        }
                        input {
                            width: 50%;
                            border-radius: 0;
                            border-top-left-radius: var(--border-radius);
                            border-bottom-left-radius: var(--border-radius);
                            border: 0;
                            @media (max-width: 56em) {
                                width: auto;
                                flex: 1;
                            }
                            @media (--max-fablet) {
                                width: auto;
                                flex: 1;
                            }
                            &[type=submit] {
                                width: auto;
                                flex: 0;
                                border-radius: 0;
                                background: var(--color1);
                                color: #fff;
                                border-top-right-radius: var(--border-radius);
                                border-bottom-right-radius: var(--border-radius);
                                font-weight: bold;
                                padding: var(--button-padding);
                                cursor: pointer;
                                &:hover {
                                    @media (hover: hover) {
                                        background: var(--color2);
                                    }
                                }
                            }
                        }
                    }
                }
                .footerTopRight {
                    display: flex;
                    align-items: flex-end;
                    column-gap: calc(var(--gutter) * 2);
                    row-gap: calc(var(--gutter) / 2);
                    flex-wrap:wrap;
                    font-weight: bold;
                    padding: var(--button-padding);
                    padding-right: 0;
                    justify-content: flex-end;
                    @media (min-width: 56em) {
                        width: 50%;
                    }
                    @media (--min-fablet) {
                        width: 50%;
                    }
                    @media (max-width: 56em) {
                        column-gap: var(--gutter);
                        padding: var(--padding) 0 0;
                        justify-content: flex-start;
                        width: 100%;
                    }
                    @media (--max-fablet) {
                        column-gap: var(--gutter);
                        padding: var(--padding) 0 0;
                        justify-content: flex-start;
                        width: 100%;
                    }
                    a {
                        font-weight: 700;
                        position: relative;
                        color: var(--color-light);
                        line-height: 1.25;
                        &:before {
                            background: #fff;
                            content: "";
                            height: 2px;
                            left: 0;
                            position: absolute;
                            top: calc(100% + 2px);
                            transform: scaleX(0);
                            transform-origin: right center;
                            transition: opacity .15s,transform .15s;
                            transition-timing-function: ease, ease, ease;
                            transition-timing-function: cubic-bezier(.645,.045,.355,1);
                            width: 100%;
                        }
                        &:hover {
                            @media (hover: hover) {
                                &:before {
                                    transform: none;
                                    transform-origin: left center;
                                }
                            }
                        }
                    }
                }
                
            }
            .footerBottom {
                display: flex;
                flex-wrap: wrap;
                column-gap: var(--gutter);
                row-gap: calc(var(--gutter) / 2);
                line-height: 1.25;
                @media (max-width: 56em) {
                    order: 4;
                }
                @media (--max-fablet) {
                    order: 4;
                }
                a {
                    position: relative;
                    color: var(--color-light);
                    &:before {
                        background: #fff;
                        content: "";
                        height: 1px;
                        left: 0;
                        position: absolute;
                        top: calc(100% + 1px);
                        transform: scaleX(0);
                        transform-origin: right center;
                        transition: opacity .15s,transform .15s;
                        transition-timing-function: ease, ease, ease;
                        transition-timing-function: cubic-bezier(.645,.045,.355,1);
                        width: 100%;
                    }
                    &:hover {
                        @media (hover: hover) {
                            &:before {
                                transform: none;
                                transform-origin: left center;
                            }
                        }
                    }
                }
            }
            .socials {
                display: flex;
                gap: 10px;
                @media (max-width: 56em) {
                    order: 3;
                    justify-content: flex-start;
                    width: 100%;
                }
                @media (--max-fablet) {
                    order: 3;
                    justify-content: flex-start;
                    width: 100%;
                }
                
                a {
                    width: 50px;
                    height: 50px;
                    border-radius: var(--border-radius);
                    background: #fff;
                    color: var(--color5);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    transition: var(--transition);
                    &:hover {
                        @media (hover: hover) {
                            background: var(--color1);
                            color: #fff;
                        }
                    }
                }
                
            }
        }
    }
}
@layer addon {
    section {
        grid-template-columns: [full-start] minmax(var(--spacer), 1fr) [content-start] minmax(auto, calc(var(--max-viewport) * 1vw)) [content-end] minmax(var(--spacer), 1fr) [full-end];
        padding: 0;
        .container {
            padding: var(--section) 0;
            .intro {
                a {
                    &:not(:hover):not(:focus) {
                        color: var(--color2);
                    }
                }
            }
        }
        &:first-of-type {
            padding-top: calc(var(--padding) * 2 + 50px);
            .container {
                border-radius: var(--section-radius) var(--section-radius) 0 0;
                overflow: hidden;
            }
        }
    }
}
html { 
    scroll-behavior: smooth;
}