/* General */
#main { padding-bottom: 37px; background: no-repeat url( '../../images/pages/year-in-review-2025-2026/bg/main.webp' ) center bottom / cover; }
main.container { padding: 0 20px 105px; }
main section { display: flex; flex-wrap: nowrap; padding: 68px 0 0; gap: 30px; }
main section { display: block; }
main section ul { padding: 0; display: grid; grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) ); gap: 30px; margin: 40px 0 0; width: 800px; margin: auto; max-width: 100%; }
main section li:has( span ) { transition: all .4s; font-size: 11pt; line-height: 1.4; display: flex; gap: 4px; transform: scale( 0 ); border-radius: 10px; flex-direction: column; justify-content: center; align-items: center; opacity: 0; text-align: center; padding: 22px 20px; box-shadow: 0 0 14px 0 rgba( 0, 0, 0, .2 ); box-sizing: border-box; }
main section li:before { display: none; }
main span { font-weight: 700; font-size: clamp( 20pt, 5vw, 30pt ); color: #0098ce; transition: all .4s; }
main section li:has( span ):hover { background: linear-gradient( 139deg, #0098ce, #37cbff ); color: #fff; scale: 1.05; }
main li:hover span { color: #fff; }

@media (max-width: 900px) {
	main div:last-of-type { padding: 25px; }
}

@media (max-width: 670px) {
	main section ul { grid-template-columns: repeat( 2, 1fr ); gap: 15px; }
	main section li:has( span ) { padding: 30px 15px; }
}

@media (max-width: 480px) {
	main.container { padding: 0 20px 50px; }
	main section { padding: 12px 0 0; }
	main ul { flex-direction: column; }
	main section:first-of-type li:has( span ) { width: 100%; }
}

@media (max-width: 420px) {
	main section li:has( span ) { padding: 20px 10px; font-size: 10pt; }
}