/* ==========================================================
   PERSONAL INFO
========================================================== */

.personal-info{
    padding: 2rem 0 6rem;
}

.personal-info__content{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

/* ==========================================================
   TITLE
========================================================== */

.personal-info__title{
    margin-bottom:1rem;
}

.personal-info__role{
    font-size:2.4rem;
    font-weight:600;
    color:var(--color-primary);
    margin-bottom:3rem;
}

/* ==========================================================
   AVATAR
========================================================== */

.personal-info__avatar{
    width:160px;
    height:160px;
    margin-bottom:3rem;
    border-radius:50%;
    overflow:hidden;
    border:4px solid var(--color-surface);
    box-shadow:var(--shadow-lg);
}

.personal-info__avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ==========================================================
   DESCRIPTION
========================================================== */

.personal-info__description{
    max-width:720px;
    line-height:1.8;
    margin-bottom:5rem;
}

/* ==========================================================
   FEATURED SKILLS
========================================================== */

.personal-info__featured{
    width:100%;
}

.personal-info__featured-title{
    margin-bottom:3rem;
}

.personal-info__featured-skills{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:2rem;
}

.personal-info__featured-skill{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1rem;
    padding:2rem 1.5rem;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    transition:all .25s ease;
}

.personal-info__featured-skill:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
}

.personal-info__featured-skill img{
    width:48px;
    height:48px;
    object-fit:contain;
}

.personal-info__featured-skill-title{
    font-size:1.7rem;
    font-weight:600;
    color:var(--color-text);
}

.personal-info__featured-skill-category{
    font-size:1.3rem;
    color:var(--color-text-light);
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:768px){
    .personal-info__avatar{
        width:140px;
        height:140px;
    }

    .personal-info__role{
        font-size:2rem;
    }

    .personal-info__featured-skills{
        grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
        gap:1.5rem;
    }
}

@media (max-width:576px){
    .personal-info__featured-skills{
        grid-template-columns:repeat(2,1fr);
    }
}