@media screen and (max-width: 768px) {
    .container {
        flex-direction: column;
        width: 100vw;
    }

    .left, .right {
        width: 100%;
    }

    .avatar img {
        width: 150px; 
        height: 150px;
    }

    h1 {
        font-size: 24px; 
    }

    h2 {
        font-size: 18px;
    }

    .profile-item {
        flex-direction: column; 
        align-items: flex-start;
    }

    .actions {
        display: flex;
        gap: 5px;
        justify-content: start;
    }
}


.container {
    display: flex;
    /* flex-wrap: wrap; */
}


h1 {
    font-size: clamp(20px, 4vw, 36px);
}