/* ===============================
   INSTAGRAM SECTION CONTAINER
================================ */

.instagram-section {

    width: 100%;

    box-sizing: border-box;

    padding: 6rem 5vw;

    margin-top: 4rem;
    

}



.instagram-section h2 {

    max-width: 1200px;

    margin: 0 auto 2.5rem auto;

    font-family: 'Libre Baskerville', serif;

    font-size: clamp(1.5rem, 3vw, 2.5rem);

}



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

.ig-list {

    display: grid;

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

    gap: 2rem;

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

}



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

.ig-row {

    position: relative;

    display: flex;

    flex-direction: column;


    width: 100%;

    box-sizing: border-box;


    padding: 1.5rem;

    border-radius: 1rem;


    background: linear-gradient(
        to bottom,
        rgb(45, 147, 214) 0%,
        #ffffff 100%
    );



    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);

    box-shadow:
        0 15px 40px rgba(0,0,0,0.12);


    text-decoration: none;

    color: inherit;


    transition:
        transform .35s ease,
        box-shadow .35s ease;

}



.ig-row:hover {

    transform: translateY(-8px);

    box-shadow:
        0 20px 50px rgba(0,0,0,0.18);

}



/* ===============================
   DATE
================================ */

.ig-date {

    display: flex;

    align-items: center;

    gap: 10px;


    margin-bottom: 1rem;


    font-family: 'Exo 2', sans-serif;

    font-size: .85rem;

    letter-spacing: .12rem;

    text-transform: uppercase;


    color: black;

    font-weight: 600;

}



.ig-date::before {

    content:"";

    width:30px;

    height:1px;

    background:black;

}



/* ===============================
   MEDIA
================================ */

.ig-img {

    width:100%;

}



.ig-img img,
.ig-video {
    width: 100%;
    max-height: 500px;
    object-fit: contain;
    border-radius: 20px;
    display: block;
}



.ig-img img {

    aspect-ratio:1 / 1;

}



.ig-video {

    aspect-ratio:1 / 1;

}



/* ===============================
   TEXT
================================ */

.ig-text {

    margin-top:1rem;

}



.ig-caption {

    font-size:1rem;

    line-height:1.6;

}



.ig-link {

    display:block;

    margin-top:1rem;


    font-size:.85rem;


    color:#777;

}





/* ===============================
   MOBILE
================================ */

@media(max-width:768px){


    .instagram-section {


        padding:4rem 1rem;


        margin-top:3rem;

    }



    .ig-list {


        grid-template-columns:1fr;


        gap:1.5rem;

    }



    .ig-row {


        padding:1rem;


        border-radius:1.4rem;

    }



    .ig-img img,
    .ig-img video {


        aspect-ratio:auto;


        max-height:450px;

    }


}