.odd-hamburger {
    opacity: 0;
    transform: translate(100%, -100%);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    transition: var(--standard-transition);
    pointer-events: none;
    background-color: var(--dark-lillow);
    z-index: 11;

    &.active {
        transform: translate(0,0);
        opacity: 1;
        pointer-events: all;   
    }

    .odd-hamburger-cross {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 24px;
        aspect-ratio: 1/1;
        cursor: pointer;

        &:before {
            content: '';
            position: absolute;
            top: 10px;
            width: 100%;
            height: 2px;
            background-color: #fff;
            transform-origin: 50% 50%;
            transform: rotate(45deg);
        }

        &:after {
            content: '';
            position: absolute;
            top: 10px;
            width: 100%;
            height: 2px;
            background-color: #fff;
            transform-origin: 50% 50%;
            transform: rotate(-45deg);
        }
    }

    .odd-hamburger-item {
        cursor: pointer;
    }
}