/* contenedor ancho completo */

.rpg-container{

width:100%;
max-width:1600px;
margin:auto;
padding:20px;

}

/* grid */

.rpg-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;

}

/* tarjeta */

.rpg-post{

width:100%;
aspect-ratio:3/4;

}

.rpg-thumb{

position:relative;
width:100%;
height:100%;
background-size:cover;
background-position:center;
border-radius:12px;
overflow:hidden;
transition:transform 0.3s ease;

}

/* overlay oscuro */

.rpg-overlay{

position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:linear-gradient(
to top,
rgba(0,0,0,0.5),
rgba(0,0,0,0.3)
);

}

/* contenido */

.rpg-content{

position:absolute;
bottom:0;
left:0;
padding:18px;
color:white;

display:flex;
flex-direction:column;

}

/* titulo */

.rpg-title{

color:white;
font-size:24px;
font-weight:700;
margin:6px 0;
line-height:1.1;

}

/* extracto */

.rpg-excerpt{

color:white;
font-size:14px;
line-height:1.1;
margin-bottom:6px;
opacity:0.95;

}

/* fecha */

.rpg-date{

color:white;
font-size:12px;
line-height:1.1;
opacity:0.85;

}

/* hover */

.rpg-thumb:hover{

transform:scale(1.04);

}

/* tablet */

@media(max-width:1100px){

.rpg-grid{

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

}

}

/* movil */

@media(max-width:600px){

.rpg-grid{

grid-template-columns:1fr;

}

.rpg-title{

font-size:20px;

}

}