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

.skills{
    text-align:center;
}

/* ==========================================================
   HEADER
========================================================== */

.skills__header{
    max-width:700px;
    margin:0 auto 5rem;
}

.skills__description{
    max-width:600px;
    margin:1.5rem auto 0;
    color:var(--color-text-light);
}

/* ==========================================================
   GRID
========================================================== */

.skills__grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:2rem;
}

/* ==========================================================
   CARD
========================================================== */

.skills__card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:1.5rem;
    min-height:150px;
    text-align:center;
    transition:var(--transition);
}

/* ==========================================================
   ICON
========================================================== */

.skills__icon{
    width:56px;
    height:56px;
    object-fit:contain;
}

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

.skills__title{
    font-size:1.6rem;
    font-weight:600;
    color:var(--color-text);
}

/* ==========================================================
   HOVER
========================================================== */

.skills__card:hover .skills__icon{
    transform:scale(1.08);
}

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

@media(max-width:768px){
    .skills__grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:480px){
    .skills__grid{
        gap:1.5rem;
    }

    .skills__card{
        min-height:130px;
    }

    .skills__icon{
        width:48px;
        height:48px;
    }
}