@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@400;600;700&display=swap');

.prs-grid{
display:flex;
flex-wrap:wrap;
gap:20px;
}

.prs-card{
width:300px;
height:500px;
overflow:hidden;
position:relative;
}

.prs-link{
display:block;
width:100%;
height:100%;
position:relative;
color:#fff;
text-decoration:none;
}

.prs-bg{
position:absolute;
inset:0;
background-size:cover;
background-position:center center;
filter:grayscale(100%);
transform:scale(1);
transition:all .8s ease;
}

.prs-card:hover .prs-bg{
filter:grayscale(0%);
transform:scale(1.12);
}

.prs-gradient{
position:absolute;
inset:0;
background:
linear-gradient(to top, rgba(0,0,0,.90) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.15) 100%);
}

.prs-gradient:after{
content:"";
position:absolute;
inset:0;
box-shadow:
inset 0 0 90px rgba(0,0,0,.55),
inset 0 -100px 120px rgba(0,0,0,.65);
}

.prs-content{
position:absolute;
left:20px;
right:20px;
bottom:20px;
z-index:5;
}

.prs-cats{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:16px;
}

.prs-cats span{
border:1px solid rgba(255,255,255,.85);
padding:5px 10px;
font-size:11px;
background:rgba(0,0,0,.25);
color:#fff;
}

.prs-content h3{
margin:0 0 20px 0;
font-size:25px;
line-height:1.1;
font-weight:700;
color:#fff;
}

.prs-meta{
font-family:'Spectral',serif;
font-size:14px;
text-transform:uppercase;
letter-spacing:1px;
color:#fff;
text-align:center;
padding:0 20px;
}