/* 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 0 105px; width: 1200px; }
main div { position: relative; }
main h2 { text-transform: uppercase; position: relative; top: 19px; margin: 0; font-size: 15pt; letter-spacing: 0; color: #fff; background: #0f165f; padding: 5px 8px; width: max-content; z-index: 3; }
main h2:before, main h2:after { content: ' '; display: block; position: absolute; top: -.5px; bottom: 0; left: -24px; width: 0; height: 0; border-bottom: 34px solid #0f165f; border-left: 24px solid transparent; }
main h2:after { left: auto; right: -24px; border: 0; border-right: 24px solid transparent; border-top: 34px solid #0f165f; }
main figure { position: relative; box-shadow: 0 0 7px 1px #2b2b2b33; border-radius: 15px; }
main figure:before { content: ' '; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba( 0, 152, 206, .6 ); z-index: 1; opacity: 0; transition: all .4s; border-radius: 15px; }
main figure:after { content: 'Explore'; display: block; position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50% ); font-size: clamp( 9pt, 3vw, 19pt ); font-weight: 700; color: #fff; z-index: 2; opacity: 0; transition: all .4s; letter-spacing: .75px; }
main img { display: block; border-radius: 15px; }
main button { transition: all .4s; border: 0; border-radius: 50%; background: no-repeat url( '../../images/pages/year-in-review-2025-2026/bg/arrow-right.png' ) #0098ce 63% center/60%; color: #fff; width: 50px; aspect-ratio: 1; box-shadow: 0 2px 5px 2px rgba( 0, 0, 0 , .4 ); position: absolute; right: 18px; bottom: -24px; z-index: 3; }
main a:hover button { background: no-repeat url( '../../images/pages/year-in-review-2025-2026/bg/arrow-right-hover.png' ) #fff 63% center/60%; }
main a:hover figure:before, main a:hover figure:after { opacity: 1; }

/* Message from the President */
#message { width: 600px; margin: 0 auto 145px; }
#message figure:after { content: 'Read'; }
#message button { width: 60px; bottom: -28px; }

/* Smaller thumbnails */
main section { display: flex; flex-wrap: wrap; gap: 40px 82px; justify-content: center; }
main section div { width: 345px; }

@media (max-width: 1260px) {
	#message { margin: 0 auto 75px; }

	main section { gap: 34px 50px; }
}

@media (max-width: 1200px) {
	main.container { padding: 0 40px 105px; }
}

@media (max-width: 820px) {
	main h2 { font-size: 12pt; }
	main h2:before, main h2:after { top: 0px; }
	main h2:before { border-bottom-width: 29px; }
	main h2:after { border-top-width: 29px; }
	main img { object-fit: cover; width: 100%; }
	main button { width: 36px; bottom: -18px; }

	main section { gap: 23px 45px; }
	main section div { width: calc( ( 100% - 45px ) / 2 ); }
}

@media (max-width: 690px) {
	#message { width: 100%; }
	#message button { width: 54px; bottom: -27px; }
}

@media (max-width: 550px) {
	main.container { padding: 0 20px 57px; }
	main h2 { font-size: 10pt; border-radius: 10px; padding: 5px 11px; top: 16px; left: -7px; }
	main h2:before, main h2:after { display: none; }

	#message h2 { font-size: 11pt; }

	main section { gap: 23px 27px; }
	main section div { width: calc( ( 100% - 27px ) / 2 ); }
}

@media (max-width: 400px) {
	main h2 { font-size: 9pt; }
	main button { width: 30px; right: 9px; bottom: -15px; }
    
	#message { margin: 0 auto 45px; }
	#message h2 { font-size: 10pt; }
	#message button { width: 44px; bottom: -22px; }
}