@media screen and (max-width: 768px) {
    .header-left {
        display: none;
    }

    nav {
        position: sticky;
        left: 0;
        z-index: 300;
    }

    .nav-wrapper .hamburger {
        display: block;
        position: fixed;
        right: 4rem;
        top: 3rem;
        z-index: 200;
    }

    .nav-wrapper {
        justify-content: start;
        flex-direction: column;
        align-items: flex-start;
        position: fixed;
        left: 0;
    }

    .nav-wrapper ul {
        position: fixed;
        justify-content: start;
        align-items: center;
        flex-direction: column;
        top: 62px;
        right: 0;
        width: 200px;
        background: var(--header-color);
        height: auto;
        transform: translateY(-1200px);
        transition: 500ms;
    }

    .nav-wrapper ul li {
        width: 100%;
    }

    .nav-wrapper ul li a {
        padding: 10px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1)inset;
    }

    .content img {
        height: 509px;
    }

}