/* Tablet ≥768px */
@media (min-width: 768px) {

    .xo {
        display: unset;
    }

    .myBio {
        gap: 20px;
        flex-direction: row;
        align-items: center;
    }

    .avatar-hero {
        display: inline;
        float: left;
        shape-outside: circle();
        shape-margin: 1em;
        border-radius: 50%;
        background: var(--bg-primary);
    }

    .avatar {
        height: 200px;
    }

    .myIntro {
        text-align: left;
        display: flex;
        flex-direction: column;
    }

    .title, .handler {
        all: unset;
        display: block;
        width: auto;
    }

    .title {
        font-size: 1.4em;
    }

    .skills {
        display: flex;
    }

    .skill-header-title {
        font-size: 2em;
    }

    .actions-js-container {
        justify-content: space-between;
        padding: 2em 0;
        gap: 10px;
        width: 100%;
    }

    .hireMe, .view-p-js {
        height: 60px;
        padding: 1em 1.8em;
        font-size: 1.2em;
    }

    #home {
        position: relative;
    }

    .project-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .projects-modal-card {
        width: min(1000px, 90vw);
        height: min(85vh, 100%);
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    }

    .all-projects-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}