/* ======================================

Facebook Card

====================================== */

#facebook-feed{

display:grid;

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

gap:30px;

margin-bottom:80px;

}


.facebook-card{

display:block;

text-decoration:none;

color:#222;

border-radius:20px;

overflow:hidden;

background:#fff;

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

box-shadow:
0 8px 25px rgba(0,0,0,.08),
0 2px 8px rgba(0,0,0,.04);

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

position:relative;

}


.facebook-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

background:linear-gradient(
90deg,
#1877f2,
#42a5ff
);

z-index:5;

}


.facebook-card:hover{

transform:translateY(-8px);

box-shadow:
0 20px 40px rgba(0,0,0,.18),
0 8px 20px rgba(0,0,0,.08);

}


.facebook-card img{

width:100%;

aspect-ratio:16 / 9;

object-fit:cover;

display:block;

transition:transform .6s ease;

}


.facebook-card:hover img{

transform:scale(1.08);

}


.facebook-logo{

position:absolute;

top:12px;

left:12px;

width:38px;

height:38px;

border-radius:50%;

background:#1877f2;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

font-weight:bold;

box-shadow:0 3px 10px rgba(0,0,0,.25);

}


.facebook-card .caption{

padding:20px;

font-size:14px;

line-height:1.8;

color:#333;

min-height:90px;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

overflow:hidden;

}


.facebook-footer{

display:flex;

justify-content:space-between;

align-items:center;

padding:0 20px 20px;

font-size:13px;

color:#777;

}


.facebook-page{

font-weight:bold;

color:#1877f2;

}


.facebook-date{

white-space:nowrap;

}


/* ======================================

Tablet

====================================== */

@media screen and (max-width:768px){

#facebook-feed{

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

gap:20px;

}

}


/* ======================================

Smartphone

====================================== */

@media screen and (max-width:480px){

#facebook-feed{

grid-template-columns:1fr;

gap:18px;

margin-bottom:50px;

}


#facebook-feed .facebook-card:nth-child(n+4){

display:none;

}


.facebook-card{

border-radius:15px;

}


.facebook-card .caption{

padding:15px;

font-size:13px;

min-height:auto;

}


.facebook-logo{

width:32px;

height:32px;

font-size:20px;

}

}