section.blog-collection{display:flex;flex-direction:column;gap:2rem}a.blog-tile{display:flex;flex-direction:row;gap:1rem;padding:12px;border-radius:16px}.hero-container{padding:20px;width:100vw}.hero{position:relative;height:500px;max-height:30vh;max-width:1000px;margin-left:auto;margin-right:auto;border-radius:20px;overflow:hidden}.hero>img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:top;z-index:-1}.hero>.glass-title{position:absolute;background-color:rgba(255,255,255,.8);backdrop-filter:blur(20px);display:flex;flex-direction:column;padding:1.5rem;gap:10px;bottom:0;left:0;width:80%;border-radius:0 20px 0 0}.hero>.glass-title>h1{font-size:2rem;color:var(--primary)}.hero .postSubRow{--gap:20px;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:var(--gap);color:var(--text)}.postSubTitle{display:flex;flex-direction:row;align-items:center;gap:5px}.postSubTitle>svg{width:16px;height:16px}.postSubTitle>span{font-size:1rem;font-weight:700}.postSubTitle+.hero-separator:has(+ .postSubTitle){width:2px;background-color:var(--light-text);height:15px;border-radius:100%}.post{display:flex;flex-direction:row;width:100%;max-width:1600px;margin-left:auto;margin-right:auto;padding:2rem;align-items:flex-start;gap:30px}.blog-toc{position:sticky;display:flex;flex-direction:column;padding:20px;background-color:#fff;border-radius:20px;top:calc(var(--nav-bar-height) + var(--nav-bar-top) + 20px);gap:10px}.blog-toc>span{font-size:1.3rem;padding-bottom:10px}.blog-toc ol{display:flex;list-style:none;flex-direction:column;gap:10px}.blog-toc ol ol{padding-left:30px}.blog-toc li{display:flex;flex-direction:column;gap:10px}.blog-toc a::before{content:' ';display:block;border-radius:10px;width:4px;height:30px;background-color:var(--light-text);opacity:.3;flex-shrink:0}.blog-toc a{display:flex;align-items:center;flex-direction:row;gap:10px;overflow:hidden;max-width:300px;min-width:200px;text-decoration:none;color:var(--text)}@media screen and (max-width:900px){.hero>.glass-title>h1{font-size:1rem}.hero .postSubRow{--gap:15px}.postSubTitle>span{font-size:.8rem}.post{flex-direction:column;padding:20px}.blog-toc{width:100%;position:relative;top:0}.blog-toc a{max-width:unset;width:100%;min-width:unset}}.blog-toc a.active{text-shadow:0 0 1px var(--text)}.blog-toc a.active::before{background-color:var(--text)}