:root{--primary-color:#000;--secondary-color:#666;--text-color:#333;--bg-color:#fff;--breakpoint-mobile:480px;--breakpoint-tablet:768px}.blog-container{background-color:#fff;flex-direction:column;width:100%;min-height:100vh;display:flex}.blog-banner-section{width:100%;position:relative}.blog-header-overlay{z-index:50;pointer-events:none;position:absolute;top:0;left:0;right:0}.blog-header-overlay-inner{pointer-events:auto}.blog-banner{background:#fff;padding:12rem 0 5rem}.blog-banner-inner{flex-direction:column;gap:0;display:flex}.blog-banner-title{color:#000;margin:0;font-size:4rem;font-weight:700;line-height:1.15}.blog-banner-subtitle{color:#666;margin:0;font-size:4rem;font-weight:700;line-height:1.15}.blog-content{width:100%;padding-bottom:5rem}.blog-section{padding:0 0 4rem}.blog-section-title{color:#000;margin:0 0 2.75rem;font-size:2.75rem;font-weight:700;line-height:1.2}.blog-featured-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;display:grid}.blog-latest-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;display:grid}.blog-load-more-wrap{justify-content:center;margin-top:3.5rem;display:flex}.blog-load-more-btn{color:#666;cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:1rem;justify-content:center;align-items:center;min-width:11rem;height:3.125rem;padding:0 1.5rem;font-size:1rem;font-weight:500;line-height:normal;transition:border-color .2s,color .2s;display:inline-flex}.blog-load-more-btn:hover{color:#333;border-color:#999}.blog-container--detail .blog-detail-header-section{height:6rem;position:relative}.blog-container--detail .blog-detail-content{width:100%;padding-bottom:0}.blog-related-section{padding:4rem 0 6rem}.blog-related-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;display:grid}.blog-related-dots{display:none}.blog-container--light-header .header-container-bg{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(#fffffff2 0%,#fff9 50%,#fff0 100%)}@media screen and (max-width:480px){.blog-container--detail .blog-detail-header-section{height:5rem}.blog-related-section{padding:2.5rem 0 4rem}.blog-related-grid{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;grid-template-columns:none;gap:1rem;display:flex;overflow-x:auto}.blog-related-grid::-webkit-scrollbar{display:none}.blog-related-grid>.blog-card{scroll-snap-align:center;flex:0 0 100%}.blog-related-dots{background:#f0f0f0;border-radius:1.5rem;justify-content:center;align-items:center;gap:.75rem;width:fit-content;margin-top:1.5rem;margin-left:auto;margin-right:auto;padding:1.5rem 1.25rem;display:flex}.blog-related-dot{cursor:pointer;background:#000;border:0;border-radius:999px;width:.5rem;height:.5rem;padding:0;transition:width .3s,background .3s}.blog-related-dot.is-active{background:#000;width:2.5rem}.blog-banner{padding:10rem 0 3rem}.blog-banner-title,.blog-banner-subtitle{font-size:2.5rem;line-height:3rem}.blog-section-title{margin-bottom:1.5rem;font-size:1.8rem;line-height:2.5rem}.blog-featured-grid,.blog-latest-grid{grid-template-columns:1fr;gap:1.5rem}.blog-section{padding-bottom:2.5rem}.blog-load-more-wrap{margin-top:2.5rem}.blog-load-more-btn{border-radius:1rem;min-width:15rem;height:4.5rem;font-size:1.375rem}}@media screen and (max-width:768px) and (min-width:481px){.blog-banner-title,.blog-banner-subtitle{font-size:2.5rem}.blog-featured-grid{grid-template-columns:1fr}.blog-latest-grid,.blog-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
