body { min-height:100dvh; display:flex; flex-direction:column; }

main { flex:1; display: flex; justify-content: center; padding: 100px 0; }
main > .container { width:100%; max-width:1280px; margin:0 auto; }

#sub03 .games-list { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
#sub03 .games-genres { display:flex; flex-direction:column; gap:32px; }
#sub03 .games-genre { display:flex; flex-direction:column; gap:14px; }
#sub03 .games-genre-title { font-size:20px; color:#111827; font-weight:700; }
#sub03 .games-card { min-height:180px; padding:20px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; display:flex; flex-direction:column; justify-content:space-between; transition:all .15s ease; }
#sub03 .games-card:hover { border-color:#111; box-shadow:0 6px 18px rgba(0,0,0,.08); transform:translateY(-2px); }
#sub03 .games-no { font-style:normal; font-size:12px; color:#6b7280; }
#sub03 .games-title { font-size:20px; color:#111827; }
#sub03 .games-card.has-image .games-no { color:#fff; background:rgba(0,0,0,0.5); padding:4px 8px; border-radius:6px; width:max-content; }
#sub03 .games-card.has-image .games-title { color:#fff; background:rgba(0,0,0,0.5); padding:6px 10px; border-radius:6px; width:max-content; }

@media (max-width: 980px) {
	#sub03 .games-list { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	#sub03 .games-list { grid-template-columns:1fr; }
}