.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,360px));
justify-content:center;
gap:25px;
width:100%;
margin:auto;
}


.card{
background:#fff;
border-radius:14px;
overflow:hidden;
text-decoration:none;
color:#222;
box-shadow:0 4px 15px rgba(0,0,0,.08);
transition:.3s;
display:flex;
flex-direction:column;
height:90vh;
background-color:white;
}


.card:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,.12);
}


.card img{
width:100%;
height:220px;
object-fit:cover;
display:block;
}


.card-body{
padding:22px;
display:flex;
flex-direction:column;
gap:12px;
height:100%;
}


.card-title{
font-size:3.5vh;
font-family:Calibri;
font-weight:bold;
line-height:1.2;
color:#003B73;
text-align:left;
}


.meta{
font-size:2.5vh;
font-family:Calibri;
text-align:left;
line-height:1.0;
color:#999;
}


.intro{
font-size:3.0vh;
font-family:Calibri;
text-align:left;
line-height:1.6;
color:#333;
flex:1;
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
}


.pagination{
margin-top:50px;
display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;
}


.pagination a{
padding:10px 16px;
border-radius:8px;
text-decoration:none;
background:#fff;
color:#003B73;
box-shadow:0 2px 8px rgba(0,0,0,.08);
transition:.2s;
}


.pagination a:hover{
background:#003B73;
color:white;
}


.active{
background:#003B73 !important;
color:white !important;
}


.sin-registros{
text-align:center;
padding:80px;
font-size:1.2rem;
color:#666;
}


@media(max-width:600px){

.card img{height:200px;}
.card{width:100%;height:56vh;gap:5px;}
.card-body{width:100%;}
.card .card-title{font-size:2.3vh;}
.card .meta{font-size:1.7vh;line-height:1.0;}
.card .intro{font-size:1.9vh;line-height:1.3;}
}