@media (max-width: 480px) {

    main {
        margin-left: var(--sidebar-collapsed) !important;
        padding: 1.5rem 1rem;
    }

    body:not(.sidebar-closed) main {
        margin-left: var(--sidebar-collapsed) !important;
    }

    .about-section {
        flex-direction: column;
        gap: 1.5rem;
    }

    .about-avatar {
        width: 140px;
        min-width: 0;
        margin: 0 auto;
    }

    .about-text { padding-top: 0; }
    .about-name { font-size: 1.7rem; }


    .contact-section {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.4rem 1.2rem;
    }

    .contact-form {
        width: 100%;
    }

    .form-group input,
    .form-group textarea {
        padding: 0.75rem 1rem;
        font-size: 16px;
    }
}