@layer theme {
    @media (prefers-reduced-motion: no-preference) {
        .filterGrid .grid,
        .filterCategory,
        .collectionReview .grid .item,
        .collectionReview .grid .splide__slide,
        .collectionFaq .grid .item,
        .collectionOrganization .grid,
        .templateBlocks .grid .splide__slide,
        .templateCallToAction .blocks .block,
        .templateBlocks .intro,
        .templateCover .tags,
        .templateCover .media,
        .templateCover .intro,
        .inner .intro .title,
        .inner .intro .subTitle,
        .inner .intro .content,
        .inner .buttons {
            opacity: 0;
            transform: translateY(50px);
        }
        
        .homepage {
            .headerContainer {
                .logo, .nav, .hamburger {
                    opacity: 0;
                    transform: translateY(-250px);
                }
                .hamburger {
                    transform: translateX(-50%);
                }
            }
        }

        section:not(.filterOrganization,.filterReview) {
            .block.quote {
                .media {
                    opacity: 0;
                    transform: scale(0.5);
                }
                .inner {
                    opacity: 0;
                    transform: scale(0.25) translateX(-25px);    
                    .title {
                        opacity: 0;
                        transform: translateY(50px);
                    }            
                }
            }
        }

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

    .themeColor1 {
        background-color: transparent;
        .homepage & {
            .block:not(.quote) {
                background-color: var(--color1);
            }
        }
    }

    .themeColor2 {
        background-color: var(--color-light);
    }

    .themeColor3 {
        background-color: var(--color1);
        .block {
            background-color: var(--color3);
        }
    }
    
}
@layer addon {
    @font-face {
        font-family: 'Agrandir-WideHeavy';
        src: url('/css/fonts/PPAgrandir-WideHeavy.woff2') format('woff2'),
             url('/css/fonts/PPAgrandir-WideHeavy.woff') format('woff');
        font-weight: 700;
    }
    @font-face {
        font-family: 'Agrandir-NarrowBold';
        src: url('/css/fonts/PPAgrandir-NarrowBold.woff2') format('woff2'),
             url('/css/fonts/PPAgrandir-NarrowBold.woff') format('woff');
        font-weight: 500;
    }
}
@layer addon {
    
}
@layer addon {
    
    .bodyContainer {
        overflow: hidden;
    }

    body:not(.hasCover) {
        main {
            padding-top: var(--header-height);
            margin: unset;
        }
    }
    section {
        background-color: transparent;
        .inner {
            &:first-child {
                align-items: center;
            }
        }
    }
    main {
        background-color: var(--color4);
        position: relative;
        .backgroundImage {
            will-change: transform;
            transform: scale(1.2);            
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center bottom;
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 0;
            overflow: hidden;
            background-image: linear-gradient(180deg, var(--color1) 0%, rgba(0,0,0,0) 60%),url('../../images/assets/achtergronden/diepte-bodem-desktop.jpg');
            aspect-ratio: 2560 / 3083;

            @media (max-width: 56em) {
                background-image: linear-gradient(180deg, var(--color1) 0%, rgba(0,0,0,0) 60%),url('../../images/assets/achtergronden/diepte-bodem-mobile.jpg');
                aspect-ratio: 304 / 869;
            }

            @media (--max-fablet) {
                background-image: linear-gradient(180deg, var(--color1) 0%, rgba(0,0,0,0) 60%),url('../../images/assets/achtergronden/diepte-bodem-mobile.jpg');
                aspect-ratio: 304 / 869;
            }
        }
        .blobHomepage {
            background-image: url("data:image/svg+xml, %3Csvg width='1440' height='1164' viewBox='0 0 1440 1164' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2300E0E0' opacity='0.08' d='M0,238.8c0,0,239.8,167.7,393.9,137.9c176.6-34.2,181.2-250.8,307.9-255.4S917,243.4,1056.7,224.9 c72.6-9.6,202.8-115.8,209.7-224.9H0V238.8z'/%3E%3Cpath fill='%2300E0E0' opacity='0.05' d='M0,341c0,0,214.1,34.6,304-100.3C393.9,105.9,497.7,33.3,573.7,50.6c76.1,17.3,186.7-4.4,204-50.6H0V341z'/%3E%3Cpath fill='%23E0FF00' opacity='0.05' d='M1440,588.5c-15.3-27.1-27.7-56.3-47.7-79.7c-35.4-41.2-90.6-58.7-143.8-58.8c-53.2-0.1-105.5,15.4-156.8,31 c-58.8,17.8-118.4,36.6-169.6,72.2c-51.2,35.6-93.5,91.2-99.9,155.1c-1.5,15.1-0.5,30.6,2.8,45.5h0c4.4,20.4,13,39.7,24.8,55.9 c26.8,36.6,39.8,82.6,37.7,129.2c-3.7,78.8,40.2,161.3,112.3,186c51.5,17.7,107.7,8.6,162,12.3c62.2,4.2,122.8,25.4,185.2,22.6 c45.5-2,73.2-15.1,93.2-35.9V588.5z'/%3E%3C/svg%3E%0A");
            aspect-ratio: 1440 / 1164;
        }
        .blobContent {
            background-image: url("data:image/svg+xml,%3Csvg width='1440' height='1924' viewBox='0 0 1440 1924' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_943_17352)'%3E%3Cpath opacity='0.25' d='M0 245.992C0 245.992 272.654 418.824 447.956 388.059C648.77 352.816 654.01 129.672 798.108 124.925C942.206 120.177 1042.72 250.739 1201.58 231.749C1284.13 221.879 1432.14 112.462 1440 0H0V245.992Z' fill='white'/%3E%3Cpath opacity='0.2' d='M0 351.376C0 351.376 243.516 386.999 345.738 248.072C447.956 109.144 565.903 34.3379 652.395 52.1508C738.89 69.9608 864.698 47.593 884.354 0H0V351.376Z' fill='%23DCD4C9'/%3E%3Cpath opacity='0.25' d='M-176.079 1178.23C-171.024 1201.54 -161.249 1223.69 -147.669 1242.2C-116.962 1284.07 -102.09 1336.71 -104.562 1390.01C-108.751 1480.17 -58.55 1574.6 23.9122 1602.9C82.8096 1623.11 147.175 1612.76 209.235 1616.99C280.361 1621.83 349.791 1646.06 421.127 1642.85C534.823 1637.72 551.355 1572.6 591.405 1486.15C623.761 1416.31 707.474 1318.38 709.542 1239.33C712.076 1142.57 602.445 1094.84 546.648 1018.92C518.79 981.018 503.66 933.53 473.149 897.976C432.671 850.806 369.513 830.79 308.624 830.728C247.734 830.666 187.943 848.3 129.178 866.144C61.9314 886.565 -6.35201 908.003 -64.9357 948.745C-123.515 989.491 -171.971 1053.11 -179.222 1126.17C-180.943 1143.5 -179.773 1161.18 -176.074 1178.23H-176.079Z' fill='white'/%3E%3Cpath opacity='0.25' d='M656.565 1212.9C543.314 1251.6 502.715 1349.87 534.427 1467.93C554.439 1542.46 610.403 1623.02 727.256 1627.11C844.108 1631.2 892.912 1678.07 883.236 1781.71C873.561 1885.34 957.593 1944.5 1036 1912.14C1132.9 1872.14 1179.75 1703.21 1318.7 1770.85C1456.31 1837.82 1613.36 1772.38 1568.05 1611.52C1504.77 1386.8 1379.8 1330.32 1279.04 1329.64C1151.59 1328.79 1051.71 1486.73 908.619 1321.6C801.911 1198.44 708.906 1195.01 656.565 1212.9Z' fill='%23DCD4C9'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_943_17352'%3E%3Crect width='1440' height='1924' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
            aspect-ratio: 1440 / 1924;
        }
        .blobReview {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='400' viewBox='0 0 1440 400' style='enable-background:new 0 0 1440 400;' xml:space='preserve'%3E%3Cpath fill='%23FFFFFF' opacity='0.25' d='M0,245.7c0,0,272.7,172.8,448,142.1c200.8-35.3,206-258.4,350.1-263.2c144.1-4.7,244.6,125.8,403.5,106.8 c82.6-9.9,230.6-119.3,238.4-231.7H0V245.7z'/%3E%3Cpath fill='%23DCD4C9' opacity='0.2' d='M0,351.1c0,0,243.5,35.6,345.7-103.3C448,108.8,565.9,34,652.4,51.9c86.5,17.8,212.3-4.6,232-52.2H0V351.1z'/%3E%3C/svg%3E%0A");
            aspect-ratio: 1440 / 1924;
        }
        .blobContent,
        .blobReview,
        .blobHomepage {
            background-size: contain;
            background-repeat: no-repeat;
            background-position: top center;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 0;
            overflow: hidden;
            display: block;
        }
        .homepage & {
            padding-top: calc(var(--header-height) / 2)!important;
            background-color: var(--color1);
            position: relative;
            @media (min-width: 56em) {
                section:not(.templateBlocks) {
                    min-height: 100vh;
                    align-items: center;
                }
            }
            @media (--min-fablet) {
                section:not(.templateBlocks) {
                    min-height: 100vh;
                    align-items: center;
                }
            }
        }
    }

    .tags {
        .tag  {
            border: 1px solid var(--color1);
            border-radius: var(--border-radius);
            background-color: transparent;
            color: var(--color1);
            text-transform: uppercase;
            font-size: var(--xs-fontsize);
            line-height: var(--xs-lineheight);
            font-weight: 600;
            padding: calc(var(--padding) / 2);
        }
    }

    .backToTop {
        background-color: var(--color2);
        border-color: var(--color1);
        color: var(--color1);
        &: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='%23005E59' 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"); /*change fill color per project*/
        }
        &: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='%23005E59'/%3E%3C/svg%3E"); /*change fill color per project*/
        }
    }
    
}
@layer addon {
    :root {

        /*COLORS*/
        --color1:    #005E59;
        --color2:    #E0FF00;
        --color3:    #00E0E0;
        --color4:    #F2EBE4;

        /*DEFAULT FONT*/
        --font-basic:       IBM Plex Sans, sans-serif;
        --font-sub:        Agrandir-WideHeavy, sans-serif;
        --font-subNarrow:   Agrandir-NarrowBold, sans-serif;
        --font-color:      #434343;

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

        /* S FONTSIZE */
        --min-s-fontsize: 1;
        --max-s-fontsize: 1.25;
        --s-lineheight: 1.05;

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

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

        /* L FONTSIZE */
        --min-l-fontsize: 1.5;
        --max-l-fontsize: 2.125;
        --l-lineheight: 1.05;

        /* XL FONTSIZE */
        --min-xl-fontsize: 1.875;
        --max-xl-fontsize: 3.375;
        --xl-lineheight: 1.1;

        /* OTHER */
        --border-radius:	32px;
        --header-height:	200px;

    }


    @media (max-width: 56em) {
        :root {
            --section:				48px;
            --padding: 				16px;
            --min-padding:   		-16px;
        }
    }


    @media (--max-fablet) {
        :root {
            --section:				48px;
            --padding: 				16px;
            --min-padding:   		-16px;
        }
    }
    @media (min-width: 56em) {
        :root {
            --section:				60px;
            --gutter:				32px;
            --min-gutter:   		-32px;
            --padding: 				20px;
            --min-padding:   		-20px;
        }
    }
    @media (--min-fablet) {
        :root {
            --section:				60px;
            --gutter:				32px;
            --min-gutter:   		-32px;
            --padding: 				20px;
            --min-padding:   		-20px;
        }
    }
    @media (min-width: 90em) {
        :root {
            --section:				80px;
            --gutter:				32px;
            --min-gutter:   		-32px;
            --padding: 				24px;
            --min-padding:   		-24px;
        }
    }
    @media (--min-desktop) {
        :root {
            --section:				80px;
            --gutter:				32px;
            --min-gutter:   		-32px;
            --padding: 				24px;
            --min-padding:   		-24px;
        }
    }
    @media (min-width: 100em) {
        :root {
            --spacer:          		5vw;
        }
    }
    @media (--min-largescreen) {
        :root {
            --spacer:          		5vw;
        }
    }
}
@layer addon {

    .button {
        text-transform: uppercase;
        font-weight: 600;
        font-size: var(--xs-fontsize);
        line-height: var(--xs-lineheight);
        
        .icon {
            width: 20px;
        }

        @media (max-width: 56em) {
            &:not(.textLink) {
                width: fit-content;
            }
        }

        @media (--max-fablet) {
            &:not(.textLink) {
                width: fit-content;
            }
        }
        
        &.primary {
            background-color: var(--color3);

            &:hover {
                @media (hover: hover) {
                    background-color: var(--color2);
                    color: var(--color1);
                }
            }
        }

        &.secondary {
            background-color: var(--color1);
            color: var(--color2);

            &:hover {
                @media (hover: hover) {
                    background-color: var(--color2);
                    color: var(--color1);
                }
            }
        }
        
        &.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(--color2);
                }
            }
        }

        &.delete {
            color: var(--color1);
            text-decoration-thickness: 2px;

            &:hover {
                @media (hover: hover) {
                    text-decoration-color: var(--color3);
                }
            }
        }
    }
    
}
@layer addon {
    details {
        border-radius: calc(var(--border-radius) / 2);
        background-color: var(--color-light);

        summary {
            align-items: center;
            padding: var(--padding);
            padding-right: calc(var(--padding) * 2 + 40px);
            gap: var(--gutter);
            color: var(--color1);
            font-family: var(--font-subNarrow);
            
            .icon {
                width: 40px;
                height: 40px;
                border-radius: 100px;
                position: absolute;
                right: var(--padding);
                color: var(--color1);
                transition: var(--transition);
                line-height: 40px;
                padding: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid var(--color1);
                &.plus {}
                &.minus {opacity: 0;}
            }
        }
        &[open] {
            summary {
                .icon {
                    &.plus {
                        transform: rotate(90deg);
                        opacity: 0;
                    }
                    &.minus {
                        opacity: 1;
                    }
                }
            }
        }
    }
}
@layer addon {

    h1, h2, .title, .subTitle, .content {
        color: var(--color1);
    }

    h2:not(.title, .subTitle) {
        font-size: var(--m-fontsize);
        line-height: var(--m-lineheight);
    }

    .title {
        font-size: var(--xl-fontsize);
        line-height: var(--xl-lineheight);
    }

    .subTitle {
        font-size: var(--s-fontsize);
        line-height: var(--lineheight);
        font-family: var(--font-basic);
    }

    .homepage {
        .title {
            color: var(--color2);
        }
        .subTitle {
            color: var(--color3);
        }
        .content {
            color: var(--color-light);
        }
    }

}
@layer addon {
   
    .block {
        &:hover {
            @media (hover: hover) {
                .media img {
                    transform: unset;
                }
            }
        }

        &.quote {
            grid-column: span 12;
            background-color: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--gutter);
            .templateCallToAction & {
                padding-bottom: calc(var(--section) - var(--gutter));
            }

            .media {
                width: 200px;
                height: 200px;
                min-width: 200px;
                min-height: 200px;
                border-radius: 100px;
                border: 5px solid var(--color1);
                overflow: hidden;
                video {
                    object-position: center;
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                }
            }
            .inner {
                transform-origin: left center;
                background-color: var(--color2);
                border-radius: var(--border-radius);
                padding: calc(var(--padding) / 2) var(--padding);
                position: relative;
                margin-left: var(--min-gutter);
                min-height: 70px;
                justify-content: center;
                .header {
                    overflow: hidden;
                    .title {
                        color: var(--color1);
                        font-size: var(--s-fontsize);
                        line-height: var(--s-lineheight);
                        font-family: var(--font-subNarrow);
                        letter-spacing: .22px;
                        &:before,
                        &:after {
                            font-size: var(--m-fontsize);
                            line-height: 1;
                            position: relative;
                            top: 0.25rem;
                        }
                        &:before {
                            content: open-quote;
                        }
                        &:after {
                            content: close-quote;
                        }
                    }
                }
                &:before {
                    content: "";
                    background-image: url("data:image/svg+xml,%3Csvg width='33' height='28' viewBox='0 0 33 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.627959 2.35772L0.500122 28L32.5001 28C21.3492 14.6164 9.379 4.10566 4.55605 1.38856C1.90633 -0.099791 0.627959 1.42894 0.627959 2.35772Z' fill='%23E0FF00'/%3E%3C/svg%3E%0A");
                    position: absolute;
                    top: 50%;
                    left: -28px;
                    width: 33px;
                    height: 28px;
                    transform: translateY(-50%) scaleX(-1) scaleY(-1);
                }
            }
            @media (max-width: 56em) {
                .media {
                    width: 100px;
                    height: 100px;
                    min-width: 100px;
                    min-height: 100px;
                }
                .inner {
                    border-radius: calc(var(--border-radius) / 2);
                }
            }
            @media (--max-fablet) {
                .media {
                    width: 100px;
                    height: 100px;
                    min-width: 100px;
                    min-height: 100px;
                }
                .inner {
                    border-radius: calc(var(--border-radius) / 2);
                }
            }
        }
    }

    .templateCollection, .templateFilter {
        &:not(.collectionReview):not(.filterReview) {
            .block:not(.quote) {
                background-color: var(--color-light);
                .media {

                    &:after {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        background: var(--color1);
                        opacity: 0.2;
                        width: 100%;
                        height: 100%;
                    }
                }
                .inner {
                    .title {
                        font-size: var(--m-fontsize);
                        line-height: var(--m-lineheight);
                    }
                }
            }
        }
        .block:not(.quote) {

            .filterOrganization & {
                .inner {
                    display: flex;
                    justify-content: space-between;
                    .footer {
                        align-items: flex-end;
                        flex-grow: 1;
                    }
                }
            }
            .collectionPage &, .filterPage & {
                .media {
                    img {
                        aspect-ratio: 405 / 250;
                    }
                }
                .inner {
                    .header {
                        flex-grow: 1;
                    }
                    .content {
                        display: none;
                    }
                }
            }
            .inner {
                gap: calc(var(--gutter) / 2);
                .footer {
                    justify-content: flex-end;
                    .textLink {
                        background-color: var(--color3);
                        border-radius: var(--border-radius);
                        /* padding: var(--button-padding); */
                        padding: 16px;
                        gap: 0;
                        .text {
                            opacity: 0;
                            width: 0;
                            height: 0;
                        }
                        .collectionReview & {
                            padding: var(--button-padding);
                            color: var(--color1);
                            gap: calc(var(--gutter) / 2);
                            max-width: fit-content;
                            max-height: fit-content;
                            .text {
                                opacity: 1;
                                width: fit-content;
                                height: fit-content;
                                color: var(--color1);
                            }
                        }
                    }
                }
            }
            &:hover {
                @media (hover: hover) {
                    .footer {
                        bottom: var(--padding);
                        right: var(--padding);
                        .textLink {
                            padding: var(--button-padding);
                            color: var(--color1);
                            gap: calc(var(--gutter) / 2);
                            max-width: fit-content;
                            max-height: fit-content;
                            .text {
                                opacity: 1;
                                width: fit-content;
                                height: fit-content;
                                color: var(--color1);
                            }
                        }
                    }
                }
            }
        }
    }
}
@layer addon {
    header {
        padding: 0;
        .headerContainer {
            grid-column: full-start / full-end;
            @media (min-width: 56em) {
                justify-content: center;
            }
            @media (--min-fablet) {
                justify-content: center;
            }
            .logo {
                display: flex;
                width: fit-content;
                top: calc(var(--min-padding) * 2);
                position: relative;
                @media (max-width: 56em) {
                    width: 100%;
                    justify-content: center;
                    svg {
                        width: 50%;
                    }
                }
                @media (--max-fablet) {
                    width: 100%;
                    justify-content: center;
                    svg {
                        width: 50%;
                    }
                }
            }
            .nav {
                position: absolute;
                display: flex;
                width: 100%;
                height: fit-content;
                justify-content: center;
                z-index: 9;
                ul {
                    background-color: var(--color-light);
                    padding: calc(var(--gutter) / 2) var(--gutter);
                    border-radius: var(--border-radius);
                    position: relative;
                    li {
                        a {
                            text-transform: uppercase;
                            color: var(--color1);
                            font-weight: 500;
                            padding: 0;
                            &[aria-current="page"] {
                                @media (min-width: 56em) {
                                    text-decoration-thickness: 2px;
                                    text-decoration-color: var(--color3);
                                }
                                @media (--min-fablet) {
                                    text-decoration-thickness: 2px;
                                    text-decoration-color: var(--color3);
                                }
                            }
                            &:hover {
                                @media (hover: hover) {
                                    text-decoration-thickness: 2px;
                                    text-decoration-color: var(--color3);
                                }
                            }
                        }
                    }
                }
                @media (max-width: 56em) {
                    background-color: transparent;
                    right: 0;
                    opacity: 0!important;
                    padding-top: 0;
                    margin-top: calc(var(--padding) + var(--padding) + 44px);
                    .menuOpen & {
                        top: var(--section);
                        opacity: 1!important;
                    }
                    ul {
                        height: fit-content;
                        padding: var(--gutter);
                        li {
                            a {
                                padding: 0;
                            }
                        }
                    }
                }
                @media (--max-fablet) {
                    background-color: transparent;
                    right: 0;
                    opacity: 0!important;
                    padding-top: 0;
                    margin-top: calc(var(--padding) + var(--padding) + 44px);
                    .menuOpen & {
                        top: var(--section);
                        opacity: 1!important;
                    }
                    ul {
                        height: fit-content;
                        padding: var(--gutter);
                        li {
                            a {
                                padding: 0;
                            }
                        }
                    }
                }
            }
            
            .hamburger {
                background-color: var(--color-light);
                position: absolute;
                z-index: 99;
                left: 50%;
                transform: translateX(-50%);
                border-radius: var(--border-radius);
                width: auto;
                min-width: 110px;
                @media (max-width: 56em) {
                    display: flex;
                }
                @media (--max-fablet) {
                    display: flex;
                }
                gap: calc(var(--gutter) / 2);
                padding: var(--padding);
                .text {
                    text-transform: uppercase;
                    color: var(--color1);
                }
                span {
                    background-color: var(--color1);
                    .menuOpen & {
                        background-color: transparent!important;
                    }
                    &:before, &:after {
                        background-color: var(--color1);
                    }
                }
            }
        }
    }
}
@layer addon {
    footer {
        background-color: var(--color1);
        .footerContainer {
            justify-content: flex-start;
            gap: calc(var(--padding) * 2);
            .footerLeft {
                flex: unset;
            }
            a {
                color: var(--color-light);
            }
        }
    }
}
@layer addon {

    .templateContent + .templateCollection.collectionReview {
        padding-top: 0;
    }

    .templateFilter, .templateCollection:not(.collectionFaq) {
        .inner {
            @media (min-width: 56em) {
                gap: calc(var(--gutter) * 2);
            }
            @media (--min-fablet) {
                gap: calc(var(--gutter) * 2);
            }
            .intro {
                text-align: center;
                width: 75%;
            }
        }
    }
    .templateFilter, .collectionFaq {
        .inner {
            &:first-child {
                align-items: center;
                gap: calc(var(--gutter) * 2);
            }
        }
    }
    .templateFilter {
        .blurred {
            filter: blur(5px);
            pointer-events: none;
            -webkit-user-select: none;
                    user-select: none;
            transition: filter 0.3s;
        }
        &.filterOrganization {
            .organization-quote {
                .block.quote {
                    position: absolute;
                    top: calc(calc(var(--section) * 2) + var(--gutter));
                    z-index: 99;
                    width: calc(100% - calc(var(--gutter) * 2));
                    left: var(--gutter);
                    right: var(--gutter);
                }
            }
        }
    }
    
}
html { 
    scroll-behavior: smooth;
}