:root{--blog-item-spacing: .8rem;--code-section-spacing-desktop: .8rem;--code-section-spacing-mobile: 1rem;--blog-date-color: #555;--blog-date-size: .64rem;--blog-date-weight: normal;--blog-date-style: normal;--blog-date-transform: uppercase;--blog-date-spacing: .05em;--blog-title-color: #000000;--blog-title-size: clamp(1.05rem, 2.5vw, .92rem);--blog-title-weight: 600;--blog-title-style: normal;--blog-title-line-height: 1.4;--blog-description-color: #555;--blog-description-size: .76rem;--blog-description-weight: normal;--blog-description-style: normal;--blog-description-line-height: 1.6;--blog-tag-color: #555;--blog-tag-bg: rgba(0, 0, 0, .05);--blog-tag-border: rgba(0, 0, 0, .1);--blog-tag-size: .6rem;--blog-tag-weight: 500;--blog-tag-style: normal}[data-theme=dark]{--blog-date-color: #c0c0c0;--blog-title-color: #ffffff;--blog-description-color: #c0c0c0;--blog-tag-color: #c0c0c0;--blog-tag-bg: rgba(255, 255, 255, .08);--blog-tag-border: rgba(255, 255, 255, .2)}@media (max-width: 768px){:root{--blog-date-size: .64rem;--blog-title-size: .95rem;--blog-description-size: .85rem;--blog-tag-size: .6rem}}.blog-section{margin-top:0;min-height:480px}.code-section{margin-top:var(--code-section-spacing-desktop);align-self:flex-start;width:100%}.blog-list{list-style:none;padding:0;margin-top:1.6rem}.blog-item{position:relative;padding:1.2rem;margin-top:0;margin-bottom:var(--blog-item-spacing);margin-left:-1.2rem;margin-right:-1.2rem;border-radius:8px;transition:background-color .18s ease-out,transform .16s ease-out}.blog-item:hover{background-color:var(--item-hover-bg);transform:translateY(-2px)}.blog-item-date{margin-bottom:.4rem;color:var(--blog-date-color);font-size:var(--blog-date-size);font-weight:var(--blog-date-weight);font-style:var(--blog-date-style);text-transform:var(--blog-date-transform);letter-spacing:var(--blog-date-spacing);font-family:sans-serif;transition:color .2s ease;white-space:nowrap}.blog-item-title{color:var(--blog-title-color);font-size:var(--blog-title-size);font-weight:var(--blog-title-weight);font-style:var(--blog-title-style);line-height:var(--blog-title-line-height);margin:0 0 .4rem}.blog-item-title a{color:var(--blog-title-color);text-decoration:none;position:relative;transition:color .2s ease}.blog-item-title a:after{content:"";position:absolute;inset:-1.2rem}.blog-item:hover .blog-item-title a{color:var(--link-hover-color)}.blog-item-title svg{display:inline-block;width:.9em;height:.9em;margin-left:.2rem;transition:transform .2s ease,color .2s ease;vertical-align:middle;color:var(--text-secondary)}.blog-item:hover .blog-item-title svg{transform:translate(3px,-3px);color:var(--link-hover-color)}.blog-item-description{color:var(--blog-description-color);font-size:var(--blog-description-size);font-weight:var(--blog-description-weight);font-style:var(--blog-description-style);line-height:var(--blog-description-line-height);margin:.4rem 0 .8rem;transition:color .2s ease}.blog-tags{list-style:none;padding:0;margin-top:.8rem;margin-bottom:0;display:flex;flex-wrap:wrap;gap:.4rem .6rem}.blog-tag{background-color:var(--blog-tag-bg);border:1px solid var(--blog-tag-border);color:var(--blog-tag-color);font-size:var(--blog-tag-size);font-weight:var(--blog-tag-weight);font-style:var(--blog-tag-style);padding:.2rem .6rem;border-radius:9999px;font-family:sans-serif;transition:all .15s ease}@media (min-width: 768px){.blog-item{display:grid;grid-template-columns:repeat(8,1fr);gap:1.2rem;padding:1.2rem;margin-top:0;margin-bottom:var(--blog-item-spacing);margin-left:-1.2rem;margin-right:-1.2rem}.blog-item-date{grid-column:span 2 / span 2;margin-top:.12rem;margin-bottom:0}.blog-item-content{grid-column:span 6 / span 6;display:flex;flex-direction:column}}@media (max-width: 1024px){.blog-item{content-visibility:auto;contain-intrinsic-size:220px}}@media (max-width: 768px){.blog-item{padding:1rem;margin-top:0;margin-bottom:var(--blog-item-spacing);margin-left:-1rem;margin-right:-1rem}.code-section{margin-top:var(--code-section-spacing-mobile)}}@media (max-width: 480px){.blog-item{padding:.75rem;margin-top:0;margin-bottom:var(--blog-item-spacing);margin-left:-.75rem;margin-right:-.75rem}}