logo-element {

    position: relative;

    display: block;

    transition-property: all;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms
}

    logo-element .px {

    aspect-ratio: 1 / 1
}

    logo-element .px.b {

    --tw-bg-opacity: 1;

    background-color: rgb(0 0 0 / var(--tw-bg-opacity));

    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms
}

    logo-element .px.b:hover {

    --tw-bg-opacity: 1;

    background-color: rgb(25 240 0 / var(--tw-bg-opacity))
}

    logo-element .px.w {

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}

    logo-element .px.w:hover {

    --tw-bg-opacity: 1;

    background-color: rgb(236 0 140 / var(--tw-bg-opacity))
}




customer-grid .customer-tile-bg {
            transition-property: transform;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 150ms;
}
    
    customer-grid .customer-tile:hover .customer-tile-bg {
            transform: rotate(var(--bg-deg));
        }

menu-footer {
    display: block;
    overflow: hidden
}
showcase-tile {

    position: relative;

    cursor: pointer;

    --tw-bg-opacity: 1;

    background-color: rgb(229 231 235 / var(--tw-bg-opacity));

    padding: 0.5rem;

    --deg-green: 160deg;
    --deg-pink: 40deg;
}

    showcase-tile .content {
        z-index: 1;
    }

    showcase-tile .tile-img {

    transition-property: all;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms;
        filter: grayscale(100);
}

    showcase-tile:before,  showcase-tile:after {

    position: absolute;

    top: 0px;

    right: 0px;

    bottom: 0px;

    left: 0px;

    display: block;

    --tw-bg-opacity: 1;

    background-color: rgb(242 77 175 / var(--tw-bg-opacity));

    transition-property: all;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 200ms;
        content: '';
}

    showcase-tile:after {

    --tw-bg-opacity: 1;

    background-color: rgb(23 216 0 / var(--tw-bg-opacity));
}

    showcase-tile:nth-child(odd):after {

    --tw-bg-opacity: 1;

    background-color: rgb(15 144 0 / var(--tw-bg-opacity));
}

    showcase-tile.is-not-public:after {

    --tw-bg-opacity: 1;

    background-color: rgb(212 0 126 / var(--tw-bg-opacity));
}

    showcase-tile.is-not-public:nth-child(odd):after {

    --tw-bg-opacity: 1;

    background-color: rgb(142 0 84 / var(--tw-bg-opacity));
}

    showcase-tile:hover {
        z-index: 2;

    }

    showcase-tile:hover:before,  showcase-tile:hover:after {

    opacity: 1;
            transform: rotate(var(--deg-green,0));
}

    showcase-tile:hover:after {
            transform: rotate(var(--deg-pink, 0));
        }

    showcase-tile:hover .tile-img {
            filter: grayscale(0);
        }

menu-main {
    position: relative;
    position: sticky;
    top: 0.5rem;
    display: block;
}

    menu-main li .btn {
            z-index: 6;
        }

    menu-main li {
    position: relative;
    display: block;
}

    menu-main li:before {
    visibility: visible;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    display: block;
    --tw-bg-opacity: 1;
    background-color: rgb(19 180 0 / var(--tw-bg-opacity));
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
            content: ' ';
            transform: scale(2) rotate(10deg) translateY(0%);
}

    menu-main li:nth-child(2n):before {
    --tw-bg-opacity: 1;
    background-color: rgb(94 245 77 / var(--tw-bg-opacity));
            transform: scale(2) rotate(-6deg) translateY(0%);
}

    menu-main li:nth-child(3n):before {
            transform: scale(2) rotate(8deg) translateY(0%);
        }

    @media (min-width: 1024px) {

    menu-main li:before {
        visibility: hidden;
            transform: scale(1) rotate(0deg) translateY(-100%);
    }
                menu-main.is-stuck li:before {
        visibility: visible;
        --tw-bg-opacity: 1;
        background-color: rgb(177 0 105 / var(--tw-bg-opacity));
                    transform: scale(2) rotate(10deg) translateY(-10%);
    }
                menu-main.is-stuck li:nth-child(2n):before {
        --tw-bg-opacity: 1;
        background-color: rgb(242 77 175 / var(--tw-bg-opacity));
                    transform: scale(2) rotate(-6deg) translateY(-6%);
    }
                menu-main.is-stuck li:nth-child(3n):before {
                    transform: scale(2) rotate(8deg) translateY(-10%);
                }

        @media (min-width: 1024px) {

        menu-main .sub-menu-list {
            visibility: hidden;
            opacity: 0;
            transition-property: opacity;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 150ms;
        }

        menu-main li:hover .sub-menu-list {
            visibility: visible;
            opacity: 1;
        }
    }
}