.cards{

display:grid;

grid-template-columns:
repeat(
auto-fill,
minmax(320px,1fr)
);

gap:20px;

max-width:1400px;

margin:auto;
}

.card{

display:block;

background:#fff;

padding:20px;

border-radius:12px;

text-decoration:none;

color:#222;

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

transition:.2s;
}

.card:hover{

transform:
translateY(-4px);

box-shadow:
0 8px 20px
rgba(0,0,0,.15);
}

.genre{

display:inline-block;

background:#0077ff;

color:#fff;

padding:4px 10px;

border-radius:20px;

font-size:12px;

margin-bottom:10px;
}

.card h2{

font-size:20px;

margin:10px 0;
}

.card p{

color:#666;

line-height:1.8;

min-height:70px;
}

.date{

margin-top:15px;

font-size:13px;

color:#999;
}

.new{
background:#ff0000;
color:#fff;
font-size:11px;
padding:2px 6px;
border-radius:4px;
margin-left:8px;
vertical-align:middle;
}