/* =====================================================
   TABLET (769px - 1024px)
   ===================================================== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    html {
        font-size: 15px;
    }

    body {
        padding-top: 100px;
    }

    .navbar {
        top: 16px;
        padding: 6px 10px;
    }

    .nav-links {
        gap: 6px;
    }

    .nav-link {
        height: 42px;
        padding: 0 16px;
        font-size: 14px;
    }

    .hero-content {
        grid-template-columns: 1.2fr 1fr;
        gap: 2.5rem;
    }

    .hero-avatar {
        width: min(250px, 40vw);
    }

    .skill-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }

    .achievement-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }

    .contact-container {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}