.kb-page {width:1280px;margin:60px auto;}
.hero {display:block;float:left;width:60%;background-color:#284257;text-align:center;padding:20px 20%;margin:0 0 50px 0;}
.hero-title {color:#fff;font-size:30px;font-weight:400;margin:0;padding:0;line-height:140%;}
.hero-desc {color:#fff;font-size:16px;font-weight:300;margin:0;padding:10px 0;line-height:140%;}

.kb-grid {display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;width:100%;list-style:none;margin:0;padding:0;clear:both;}
.kb-card {position:relative;display:flex;flex-direction:column;gap:12px;border:1px solid #D8D8D8;padding:30px;margin:0;background-color:#fff;overflow:hidden;}
.kb-card.has-thumb {border-color:transparent;}
.kb-card.has-thumb::before {content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(20,20,20,0.6), rgba(20,20,20,0.8)), var(--kb-card-bg);background-size:cover;background-position:center;z-index:0;}
.kb-card > * {position:relative;z-index:1;}
.kb-card-title {font-family:"EB Garamond", serif;font-size:22px;font-weight:400;line-height:130%;margin:0;}
.kb-card-title a {color:#284257;}
.kb-card-title a:hover {text-decoration:underline;}
.kb-card-meta {display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;letter-spacing:0.03em;text-transform:uppercase;color:#6B7280;}
.kb-card-dot {display:inline-block;width:4px;height:4px;border-radius:50%;background:#D8D8D8;}
.kb-card-desc {font-size:14px;line-height:150%;color:#434244;margin:0;flex-grow:1;}
.kb-card-date {font-size:13px;color:#6B7280;padding-top:12px;border-top:1px solid #EDEDED;}

.kb-card.has-thumb .kb-card-title a {color:#fff;}
.kb-card.has-thumb .kb-card-meta {color:rgba(255,255,255,0.85);}
.kb-card.has-thumb .kb-card-dot {background:rgba(255,255,255,0.6);}
.kb-card.has-thumb .kb-card-desc {color:rgba(255,255,255,0.9);}
.kb-card.has-thumb .kb-card-date {color:rgba(255,255,255,0.75);border-top-color:rgba(255,255,255,0.25);}

.kb-pagination {display:flex;float:left;width:100%;justify-content:center;gap:10px;margin:60px 0;}
.kb-pagination a, .kb-pagination span {display:inline-block;padding:8px 16px;border:1px solid #D8D8D8;font-size:14px;color:#284257;}
.kb-pagination a:hover {border-color:#284257;}
.kb-pagination span.current {background:#284257;color:#fff;border-color:#284257;}
.kb-pagination span.dots {border:none;padding:8px 4px;}

@media (max-width: 1279px) {
.kb-page {width:90%;margin:30px auto;}
.hero {width:90%;padding:20px 5%;margin:0 0 30px 0;}
.hero-desc {font-size:14px;}
.kb-grid {grid-template-columns:1fr;gap:16px;}
.kb-card {padding:20px;}
}