/* General */
#main { padding-bottom: 37px; background: no-repeat url( '../../images/pages/year-in-review-2025-2026-workgroups/bg/main.webp' ) center bottom / cover; }
main.container { margin: 0 auto 70px; max-width: 92%; }

/* Workgroups */
main { display: flex; flex-wrap: wrap; gap: 30px; }
main div { width: calc( ( 100% - 60px ) / 3 ); }
main h2 { position: relative; margin: auto; color: #fff; font-size: 12pt; letter-spacing: 0; font-weight: 500; padding: 10px 20px 10px 31px; background: linear-gradient( 139deg, #062ec5, #37cbff ); transition: background-position .3s ease; border-radius: 10px; box-shadow: 0 0 14px 0 rgba( 0, 0, 0, .2 ); overflow: hidden; }
main h2:before { content: ''; position: absolute; top: 0; left: -150%; width: 150%; height: 100%; z-index: 0; background: radial-gradient( circle at center, rgba( 255, 255, 255, .5 ), transparent 70% ); transform: skewX( -20deg ); }
main h2:hover:before { animation: wave 2s ease-in-out infinite; }
main li { font-size: 11pt; letter-spacing: -.25px; }
main li + li { padding-top: 6px; }
main li:first-of-type { padding-top: 14px; }
main ol > li:before { content: ' '; border-left: 1px solid #0e49cf; top: 0; bottom: 0; }
main ol > li:last-child:before { bottom: auto; height: 15px; }
main ol > li:last-child:first-of-type:before { height: 23px; }
main ol > li:after { content: ' '; background: linear-gradient( 90deg, #0e49cf, #35c3fc ); height: 1px; position: absolute; left: 1px; width: 10px; top: 14px; }
main ol > li:first-of-type:after { top: 22px; }
@keyframes wave { 0% { left: -150%; } 100% { left: 100%; } }

@media (max-width: 800px) {
    main div { width: calc( ( 100% - 30px ) / 2 ); }
}

@media (max-width: 600px) {
    main { gap: 20px; }
    main div { width: calc( ( 100% - 20px ) / 2 ); }
}

@media (max-width: 480px) {
    main h2 { padding: 10px 15px; }
    main div { width: 100%; }
}