.blog{display:flex;flex-direction:column;width:var(--base-100-percent);.blog-hero-banner{padding:var(--spacing-xl) var(--spacing-xl) var(--spacing-md);width:var(--base-100-percent);.blog-hero-banner-inside{display:flex;flex-direction:column;gap:var(--spacing-xl);max-width:var(--section-max-width);width:var(--base-100-percent);.typography{text-align:center;.highlight{color:var(--color-red-primary);font-weight:var(--font-weight-medium)}}}}.blog-filters{padding-left:var(--spacing-xl);padding-right:var(--spacing-xl);padding-top:var(--spacing-md);width:var(--base-100-percent);.blog-filters-inside{align-items:center;display:flex;flex-direction:column;gap:var(--spacing-md);max-width:var(--section-max-width);width:var(--base-100-percent);.blog-filters-buttons{align-items:center;background-color:var(--color-white-short);border-radius:var(--button-border-radius);box-shadow:var(--card-shadow);display:flex;flex-flow:row wrap;justify-content:center;gap:var(--spacing-xs);overflow:visible;padding:var(--spacing-sm);width:var(--base-100-percent);.filter-btn{background:none;box-shadow:none;&.active{background:linear-gradient(var(--gradient-deg-180),var(--button-secondary-gradient-start) var(--gradient-start-percent),var(--button-secondary-gradient-end) var(--gradient-end-percent));box-shadow:var(--base-0) var(--base-0) var(--base-border-width) var(--base-0) var(--button-secondary-shadow-base),var(--base-0) var(--shadow-y-2px) var(--shadow-y-2px) var(--base-0) var(--button-secondary-shadow-light),var(--base-0) var(--shadow-y-4px) var(--shadow-y-4px) var(--base-0) var(--button-secondary-shadow-light),inset var(--base-0) var(--base-border-width) var(--base-border-width) var(--base-0) var(--button-secondary-shadow-inset);color:var(--button-secondary-color)}&:hover{color:var(--button-secondary-color)}}}.blog-search{width:var(--base-100-percent);.blog-search-input{border:var(--base-border-width) solid var(--color-gray-light);border-radius:var(--button-border-radius);font-size:var(--font-text-sm);padding:var(--spacing-sm) var(--spacing-md);width:var(--base-100-percent);&:focus{border-color:var(--color-red-primary);outline:none}}}}}.blog-card-item{display:flex;width:var(--base-100-percent);min-width:var(--base-0)}.blog-card-item.hidden{display:none}.blog-card-item .card-base{width:var(--base-100-percent);height:var(--base-100-percent)}.blog-card-item .image-base{width:var(--base-100-percent);aspect-ratio:16 / 9;object-fit:cover}.blog-card-content{display:flex;flex:1;flex-direction:column;gap:var(--spacing-sm);.blog-card-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-xs);max-height:1.9em;overflow:hidden}.typography-title.typography-md{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.blog-card-footer{align-items:center;color:var(--color-text-secondary);display:flex;font-size:var(--font-text-xs);gap:var(--spacing-xs);justify-content:flex-end;margin-top:auto}.blog-card-clock-icon{height:14px;width:14px}.typography-text.typography-sm{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}}.blog-cards-grid{padding:var(--spacing-xl);width:var(--base-100-percent);.blog-cards-grid-inside{display:grid;gap:var(--spacing-xl);grid-template-columns:repeat(3,1fr);max-width:var(--section-max-width);width:var(--base-100-percent);@media(max-width:1024px){grid-template-columns:repeat(2,1fr)}@media(max-width:768px){grid-template-columns:1fr}}}.blog-empty{align-items:center;display:flex;flex-direction:column;gap:var(--spacing-md);padding:var(--spacing-2xl);text-align:center}.blog-load-more{display:flex;justify-content:center;padding:var(--spacing-md) var(--spacing-xl) var(--spacing-xl)}}.blog-detail{display:flex;flex-direction:column;width:var(--base-100-percent);.blog-detail-hero{padding:var(--spacing-2xl) var(--spacing-xl) var(--spacing-xl);.blog-detail-hero-inside{display:flex;flex-direction:column;gap:var(--spacing-lg);max-width:var(--section-max-width);.blog-detail-cover{border-radius:var(--card-icon-border-radius);overflow:hidden;width:var(--base-100-percent)}.blog-detail-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.blog-detail-meta{align-items:center;display:flex;flex-flow:row wrap;gap:var(--spacing-md)}.blog-detail-meta-separator,.blog-detail-meta-item{color:var(--color-text-secondary)}}}.blog-detail-content{padding:var(--spacing-md) var(--spacing-xl) var(--spacing-xl);.blog-detail-content-inside{max-width:var(--section-max-width);margin:var(--base-0) auto;h2{font-size:var(--font-title-sm);font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-md);margin-top:var(--spacing-xl)}h3{font-size:var(--font-title-2xs);font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-sm);margin-top:var(--spacing-lg)}p{font-size:var(--font-text-md);line-height:1.7;margin-bottom:var(--spacing-md)}ul,ol{font-size:var(--font-text-md);line-height:1.7;margin-bottom:var(--spacing-md);padding-left:var(--spacing-lg)}li{margin-bottom:var(--spacing-xs)}blockquote{border-left:var(--base-4px) solid var(--color-red-primary);font-style:italic;margin:var(--spacing-lg) var(--base-0);padding:var(--spacing-md) var(--spacing-lg)}a{color:var(--color-red-primary);text-decoration:underline;&:hover{opacity:var(--opacity-80)}}img{border-radius:var(--card-icon-border-radius);max-width:var(--base-100-percent);height:auto;margin:var(--spacing-md) var(--base-0)}}}.blog-detail-related{padding:var(--spacing-xl);.blog-detail-related-inside{display:flex;flex-direction:column;gap:var(--spacing-xl);max-width:var(--section-max-width);.blog-detail-related-grid{display:grid;gap:var(--spacing-xl);grid-template-columns:repeat(3,1fr);@media(max-width:1024px){grid-template-columns:repeat(2,1fr)}@media(max-width:768px){grid-template-columns:1fr}>a{display:flex;width:var(--base-100-percent);min-width:var(--base-0)}>a .card-base{width:var(--base-100-percent);height:var(--base-100-percent)}>a .image-base{width:var(--base-100-percent);aspect-ratio:16 / 9;object-fit:cover}.blog-card-content{display:flex;flex:1;flex-direction:column;gap:var(--spacing-sm);.blog-card-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-xs);max-height:1.9em;overflow:hidden}.typography-title.typography-md{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.typography-text.typography-sm{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}}}}}}