/* ==========================================================
   JAM UNIVERSAL ICON SYSTEM
========================================================== */

.jam-icon{

    width:24px;
    height:24px;

    display:inline-block;

    fill:currentColor;

    vertical-align:middle;

    flex-shrink:0;

}

/* ==========================================================
   SIZE MODIFIERS
========================================================== */

.jam-icon--sm{

    width:24px;
    height:24px;

}

.jam-icon--lg{

    width:32px;
    height:32px;

}

.jam-icon--xl{

    width:48px;
    height:48px;

}

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

.jam-icon-library{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(180px,1fr)
        );

    gap:24px;

}

.jam-icon-library__item{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:24px;

    border:1px solid rgba(0,0,0,.08);

    border-radius:16px;

    background:#ffffff;

    text-align:center;

}

.jam-icon-library__item span{

    font-size:14px;

    font-weight:600;

    color:#444;

}

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

.jam-icon-library-header{


margin-bottom:40px;

text-align:center;


}

.jam-icon-library-header h2{


margin:0 0 10px;


}

.jam-icon-library-header p{


margin:0;

opacity:.7;


}

.jam-icon-library{


display:grid;

grid-template-columns:
    repeat(
        auto-fill,
        minmax(220px,1fr)
    );

gap:24px;


}

.jam-icon-library__item{


display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:12px;

padding:24px;

border:1px solid rgba(0,0,0,.08);

border-radius:16px;

background:#ffffff;

text-align:center;


}

.jam-icon-library__name{


font-weight:700;


}

.jam-icon-library__item code{


display:block;

padding:8px 12px;

border-radius:8px;

background:#f5f5f5;

font-size:12px;

line-height:1.4;

word-break:break-word;


}