main.page{--period-width: 11rem;--line-gap: 2.5rem;--text-width: calc(46rem + var(--period-width) + var(--line-gap) * 2)}main.page .timeline{position:relative;display:grid;grid-template-columns:var(--period-width) minmax(0, 1fr);column-gap:calc(var(--line-gap)*2);max-width:var(--text-width);margin:0 auto 3rem}main.page .timeline::before{content:"";position:absolute;top:.6rem;bottom:.6rem;left:calc(var(--period-width) + var(--line-gap) - 1px);width:2px;background-color:#ddd}main.page .timeline h2{position:relative;grid-column:1;margin:0;padding-top:.15rem;color:var(--accent-color);font-size:1.3rem;line-height:1.3;text-align:right}main.page .timeline h2::after{content:"";position:absolute;top:.45rem;right:calc(var(--line-gap)*-1 - 7px);width:14px;height:14px;border:3px solid var(--bg-main);border-radius:50%;background-color:var(--accent-color);box-sizing:border-box;box-shadow:0 0 0 2px var(--accent-color)}main.page .timeline p{grid-column:2;margin:0 0 1rem;line-height:1.8}main.page .timeline h2+p{margin-top:0}main.page .timeline p+h2,main.page .timeline p+h2+p{margin-top:2rem}main.page .image-gallery{max-width:var(--text-width);margin:0 auto;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:1.5rem}main.page .image-gallery .md-image{display:flex;flex-direction:column;width:auto;overflow:hidden;border-radius:.8rem;background-color:var(--bg-main);box-shadow:0 2px 12px rgba(0,0,0,.08);transition:transform .3s,box-shadow .3s}main.page .image-gallery .md-image img{width:100%;height:auto;aspect-ratio:4/3;max-height:none;padding:.8rem;object-fit:contain;background-color:var(--bg-secondary);box-sizing:border-box}main.page .image-gallery .md-image span{padding:.7rem 1rem .9rem;font-size:.9rem;line-height:1.4}main.page .image-gallery .md-image:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.14)}main.page .image-gallery .md-image:hover img{transform:none;filter:none}@media only screen and (max-width: 800px){main.page .timeline{--line-gap: 0.6rem;grid-template-columns:minmax(0, 1fr);padding-left:1.6rem}main.page .timeline::before{left:.5rem}main.page .timeline h2,main.page .timeline p{grid-column:1}main.page .timeline p+h2+p{margin-top:0}main.page .timeline h2{text-align:left;margin-bottom:.5rem}main.page .timeline h2::after{right:auto;left:calc(-1.1rem - 7px)}}@media(prefers-reduced-motion: reduce){main.page .image-gallery .md-image{transition:none}}