:root{

    --ig-max-width:100%;

    --ig-gap:15px;

    --ig-radius:12px;

    --ig-card-height:200px;

    /* --ig-background:#ffffff; */

    --ig-border:#ececec;

    --ig-shadow:0 5px 20px rgba(0,0,0,.06);

    /* --ig-primary:#E1306C; */

    /* --ig-text:#222; */

    --ig-muted:#666;

    --ig-overlay:rgba(0,0,0,.45);

}

/*======================================================
=            GENERAL
======================================================*/

*{

    /* margin:0; */

    /* padding:0; */

    /* box-sizing:border-box; */

}

body{

    /* font-family:Arial,Helvetica,sans-serif; */

    /* background:#fafafa; */

}

.instagram-widget{

    width:100%;

    /* padding:70px 20px; */

}

.instagram-container{

    max-width:var(--ig-max-width);

    margin:auto;

}

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

.instagram-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

    flex-wrap:wrap;

    gap:20px;

}

.instagram-title{

    display:flex;

    align-items:center;

    gap:14px;

}

.instagram-logo{

    width:52px;

    height:52px;

    border-radius:50%;

    background:linear-gradient(
        45deg,
        #FEDA75,
        #FA7E1E,
        #D62976,
        #962FBF,
        #4F5BD5
    );

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:24px;

    font-weight:bold;

}

.instagram-title h2{

    font-size:28px;

    color:var(--ig-text);

}

.instagram-title p{

    margin-top:5px;

    color:var(--ig-muted);

}

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

.instagram-grid{

    display:grid;

    /* grid-template-columns:repeat(4,1fr); */

    grid-template-columns:
repeat(auto-fit,minmax(100px,1fr));
    gap:var(--ig-gap);

}

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

.instagram-card{

    position:relative;

    overflow:hidden;

    border-radius:var(--ig-radius);

    background:#eee;

    cursor:pointer;

    box-shadow:var(--ig-shadow);

}

.instagram-card img{

    width:100%;

    height:var(--ig-card-height);

    object-fit:cover;

    display:block;

    transition:.4s;

}

.instagram-card:hover img{

    transform:scale(1.08);

}

/*======================================================
=            OVERLAY
======================================================*/

.instagram-overlay{

    position:absolute;

    inset:0;

    background:var(--ig-overlay);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    opacity:0;

    transition:.3s;

    font-size:18px;

    font-weight:bold;

}

.instagram-card:hover .instagram-overlay{

    opacity:1;

}

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

.reel-badge{

    position:absolute;

    right:10px;

    top:10px;

    width:34px;

    height:34px;

    border-radius:50%;

    background:rgba(0,0,0,.55);

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    font-size:16px;

}

/*======================================================
=            LOADER
======================================================*/

.skeleton{

    background:linear-gradient(
        90deg,
        #ececec,
        #f6f6f6,
        #ececec
    );

    background-size:400%;

    animation:loading 1.3s infinite;

    height:var(--ig-card-height);

    border-radius:var(--ig-radius);

}

@keyframes loading{

0%{background-position:100%}

100%{background-position:-100%}

}

/*======================================================
=            NAVIGATION
======================================================*/

.instagram-navigation{

    margin-top:15px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

}

.instagram-navigation button{

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:#fff;

    box-shadow:var(--ig-shadow);

    font-size:20px;

    transition:.3s;

}

.instagram-navigation button:hover{

    background:rgb(0, 0, 0);
color:#fff;

}

/*======================================================
=            VIEW ALL BUTTON
======================================================*/

.view-instagram{

    text-align:center;

    margin-top:35px;

}

.view-instagram a{

    display:inline-block;

    padding:14px 26px;

    background:var(--ig-primary);

    color:white;

    text-decoration:none;

    border-radius:50px;

    transition:.3s;

}

.view-instagram a:hover{

    opacity:.9;

}

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

@media(max-width:992px){

.instagram-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.instagram-grid{

grid-template-columns:repeat(2,1fr);

}

:root{

--ig-card-height:180px;

}

.instagram-title h2{

font-size:22px;

}

}