@media screen and (max-width: 768px) {
    .side-menu {
        width: 100%;
    }

    main.menu-active {
        margin-left: 0;
    }

    .title {
        font-size: 1.2rem;
    }

    .user-menu {
        width: 200px;
        right: 10px;
    }

    .header {
        padding: 0 15px;
    }
}

@media screen and (max-width: 480px) {
    .header {
        padding: 0 10px;
    }

    .title {
        font-size: 1rem;
    }

    .avatar {
        width: 30px;
        height: 30px;
    }
}