.image__hamburger {
    background-image: url(/modules/hamburger-menu/img/hamburger.svg);
}
.image__close {
    background-image: url(/modules/hamburger-menu/img/close.svg);
}
.mobile-menu {
    --menu-color-overlay: rgba(0, 0, 0, 0.5);
    --menu-color-bg: var(--color-footer-bg);
    --menu-color-highlight: var(--color-highlight);
    --menu-transition-base: var(--transition-base);
    --menu-transition-fast: var(--transition-fast);
    z-index: var(--z-menu);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    pointer-events: none;
    color: white;
}
.mobile-menu .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: var(--menu-color-overlay);
    transition: opacity var(--menu-transition-base);
    opacity: 0.0;
}
.mobile-menu .menu {
    position: relative;
    background-color: var(--menu-color-bg);
    height: 100%;
    width: 30rem;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    transition: transform var(--menu-transition-base);
    transform: translate(100%);
}
.mobile-menu a {
    transition: transform var(--menu-transition-fast);
}
.mobile-menu .menu__header {
    display: flex;
    padding: var(--space-6);
}
.mobile-menu .mobile-menu__close-button {
    align-self: center;
    transition: transform var(--menu-transition-fast);
}
.mobile-menu .menu__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-inline: var(--space-6);
}
.mobile-menu .menu__main .menu__links,
.mobile-menu .menu__main .menu__buttons,
.mobile-menu .menu__main .menu__contact,
.mobile-menu .menu__main .menu__socials {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-block: var(--space-4);
}
.mobile-menu .menu__main .menu__links a.link {
    padding-block: var(--space-2);
    align-self: flex-start;
    transition: transform var(--menu-transition-fast), color var(--menu-transition-fast);
    font-size: 1.25rem;
}
.mobile-menu .menu__main .menu__links .button {
    margin-top: var(--space-4);
}
.mobile-menu .menu__main a.icon-desc {
    transition: transform var(--menu-transition-fast), color var(--menu-transition-fast);
    align-self: flex-start;
}
.mobile-menu .title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: var(--space-2);
}
.mobile-menu .divider {
    height: .15rem;
    min-height: 2px;
    width: stretch;
    background-color: #2B2B2A;
}
.mobile-menu.opened {
    pointer-events: all;
}
.mobile-menu.opened .overlay {
    opacity: 1.0;
}
.mobile-menu.opened .menu {
    transform: translate(0%);
}
@media (hover: hover) and (pointer: fine) {
    .mobile-menu .menu__main .link:hover {
        color: var(--menu-color-highlight);
    }
    .mobile-menu .menu__main a.icon-desc:hover {
        color: var(--menu-color-highlight);
    }
}
@media (hover: none) and (pointer: coarse) {
    .mobile-menu .mobile-menu__close-button:active {
        transform: scale(0.9);
    }
    .mobile-menu a:active {
        transform: scale(0.9);
    }
    .mobile-menu .menu__main .link:active {
        color: var(--menu-color-highlight);
    }
    .mobile-menu .menu__main a.icon-desc:active {
        color: var(--menu-color-highlight);
    }
}