/* GRID */

.daily_update_container{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

/* CARD */

.daily_update_card{
display:flex;
height:170px;
background:var(--white-color);
border-radius:var(--border-radius);
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.06);
transition:var(--transition);
cursor:pointer;
}

.daily_update_card:hover{
box-shadow:0 20px 40px rgba(11,188,214,0.12);
}

/* LEFT CONTENT */

.daily_update_left{
flex:1.2;
padding:18px;
display:flex;
flex-direction:column;
justify-content:space-between;
}

.daily_update_category{
font-size:11px;
text-transform:uppercase;
font-weight:800;
letter-spacing:1px;
background:var(--background-linear-gradient);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.daily_update_left h3{
font-size: var(--small-card-fsize);
line-height:1.4;
color:#222;
font-weight:700;

display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}

/* AUTHOR */

.daily_update_info{
display:flex;
justify-content:space-between;
align-items:center;
font-size:12px;
}

.daily_update_author{
display:flex;
align-items:center;
gap:8px;
}

.daily_update_author img{
width:26px;
height:26px;
border-radius:50%;
}

.daily_update_author span{
font-weight:600;
color:#555;
}

.daily_update_date{
color:var(--blue-color);
font-weight:700;
font-size:11px;
}

/* IMAGE RIGHT */

.daily_update_right{
flex:0.7;
position:relative;
overflow:hidden;
clip-path:polygon(15% 0,100% 0,100% 100%,0% 100%);
}

.daily_update_right img{
width:100%;
height:100%;
object-fit:cover;
transition:var(--transition);
}

.daily_update_card:hover .daily_update_right img{
transform:var(--transform);
}

/* TABLET */

@media(max-width:1024px){

.daily_update_container{
grid-template-columns:repeat(2,1fr);
}

.daily_update_card{
height:160px;
}

}

/* MOBILE */

@media(max-width:650px){

.daily_update_container{
grid-template-columns:1fr;
gap: 15px;
}

.daily_update_card{
height:140px;
flex-direction:row;
}

.daily_update_left{
padding:14px;
}


.daily_update_author img{
width:22px;
height:22px;
}

.daily_update_right{
flex:0.5;
clip-path:polygon(15% 0,100% 0,100% 100%,0 100%);
}

}