.nbg-wrap{
  width:100%;
  --nbg-title:#2e2e2e;
  --nbg-meta:#6b6b6b;
  --nbg-text:#6b6b6b;
  --nbg-pill-bg:#1f4f7a;
  --nbg-pill-text:#fff;
  --nbg-btn-bg:#1f4f7a;
  --nbg-btn-text:#fff;
  --nbg-card-bg:#fff;
  --nbg-border:#e9e9e9;
  --nbg-radius:6px;
  --nbg-gap:28px;
  --nbg-active:#1f4f7a;
  --nbg-shadow:0 8px 18px rgba(0,0,0,.06);
  --nbg-img-radius:0px;
}

.nbg-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nbg-gap);
}

.nbg-item{min-width:0;}
.nbg-item--full{grid-column: 1 / -1;}

.nbg-card{
  background: var(--nbg-card-bg);
  border:1px solid var(--nbg-border);
  border-radius: var(--nbg-radius);
  box-shadow: var(--nbg-shadow);
  overflow:hidden;
}

.nbg-thumb{
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  background:#f2f2f2;
}

.nbg-item--half .nbg-thumb{aspect-ratio: 16 / 10;}
.nbg-item--full .nbg-thumb{aspect-ratio: 21 / 9;}

.nbg-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius: var(--nbg-img-radius);
}

.nbg-thumb--placeholder{
  width:100%;
  height:100%;
  background: repeating-linear-gradient(45deg,#eee,#eee 10px,#f7f7f7 10px,#f7f7f7 20px);
}

.nbg-pill{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  background: var(--nbg-pill-bg);
  color: var(--nbg-pill-text);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  white-space: nowrap;
}

.nbg-body{
  padding: 18px 22px 22px;
  text-align:center;
}

.nbg-title{
  margin: 6px 0 10px;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nbg-title);
}

.nbg-title a{
  color: inherit;
  text-decoration:none;
}

.nbg-title a:hover{opacity:.85;}

.nbg-meta{
  display:flex;
  justify-content:center;
  gap: 10px;
  color: var(--nbg-meta);
  font-size: 12px;
  margin-bottom: 10px;
  flex-wrap:wrap;
}

.nbg-meta__item{position:relative;}
.nbg-meta__item + .nbg-meta__item::before{
  content:"•";
  color: var(--nbg-meta);
  margin-right: 10px;
}

.nbg-excerpt{
  color: var(--nbg-text);
  font-size: 13px;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 14px;
}

.nbg-actions{margin-top: 6px;}

.nbg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: var(--nbg-btn-bg);
  color: var(--nbg-btn-text);
  padding: 10px 26px;
  border-radius: 999px;
  text-decoration:none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.nbg-btn:hover{opacity:.92;}

.nbg-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 8px;
  margin-top: 26px;
  flex-wrap:wrap;
}

.nbg-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 30px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  text-decoration:none;
  color: var(--nbg-meta);
  font-size: 13px;
  letter-spacing: .08em;
}

.nbg-pagination .page-numbers:hover{
  background: rgba(0,0,0,.04);
}

.nbg-pagination .page-numbers.current{
  background: var(--nbg-active);
  color: #fff;
}

.nbg-empty{
  text-align:center;
  padding: 40px 20px;
  border:1px dashed var(--nbg-border);
  border-radius: var(--nbg-radius);
  color: var(--nbg-meta);
}

@media (max-width: 900px){
  .nbg-grid{grid-template-columns: 1fr;}
  .nbg-item--full{grid-column: auto;}
  .nbg-item--full .nbg-thumb{aspect-ratio: 16/10;}
}
