:root {
 --gap-x: 0.7rem;
 --gap-y: 0.7rem;
 --gap-x-mobile: 0.5rem;
 --gap-y-mobile: 0.5rem;
 --outer-gap: 0.7rem;
 --outer-gap-mobile: 0.25rem;
 --radius: 0.35rem;
 --tile-min: clamp(9rem, 22vw, 18rem);

 --c-bg: #f3f4f6;
 --c-card: #ffffff;
 --c-text: #1a202c;

 --t: 0.3s ease;
 --font-ui: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.nbx {
 width: 100%;
 margin-block: 2vh 5vh;
 padding-inline: var(--outer-gap);
 column-gap: var(--gap-x);
 row-gap: var(--gap-y);
 column-width: var(--tile-min);
}
@supports (grid-template-rows: masonry) {
 .nbx {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr));
  grid-template-rows: masonry;
  gap: var(--gap-y) var(--gap-x);
 }
}

@media (max-width: 600px) {
 :root {
  --gap-x: var(--gap-x-mobile);
  --gap-y: var(--gap-y-mobile);
 }
 .nbx {
  padding-inline: var(--outer-gap-mobile);
  column-width: 50%;
 }
 @supports (grid-template-rows: masonry) {
  .nbx {
   grid-template-columns: repeat(2, 1fr);
}}}

.card {
 display: inline-block;
 width: 100%;
 break-inside: avoid;
 background: var(--c-card);
 border-radius: var(--radius);
 overflow: hidden;
 text-decoration: none;
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
 transition: box-shadow var(--t);
 margin-block-end: var(--gap-y);
}

.card:hover {
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.card figure {
 margin: 0;
 display: flex;
 flex-direction: column;
}

.titlebar {
 display: block;
 width: 100%;
 font-family: var(--font-ui);
 font-size: 0.95rem;
 font-weight: 600;
 line-height: 1.4;
 text-align: center;
 padding: 0.65rem 0.9rem 0.5rem;
 border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 border-top-left-radius: var(--radius);
 border-top-right-radius: var(--radius);
 box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.08);
 transition: background var(--t), filter var(--t);
 -webkit-font-smoothing: antialiased;
 color: #0f172a;
 background: #e2e8f0;
}

.card:hover .titlebar {
 filter: brightness(1.06);
}

.titlebar .nz {
 font-weight: 700;
 font-size: 1rem;
 letter-spacing: 0.077em;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: clip;
 max-width: 100%;
 display: inline-block;
 color: inherit;
 text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
}

.titlebar i {
 font-style: normal;
 color: inherit;
 opacity: 0.65;
 margin-right: 0.25em;
}

.media {
 display: block;
 width: 100%;
 overflow: hidden;
}

.card--with-img .media img {
 width: 100%;
 height: auto;
 display: block;
 transition: transform var(--t);
 will-change: transform;
}

.card--with-img:hover .media img {
 transform: scale(1.03);
}

.card--with-img .media:last-child {
 border-bottom-left-radius: var(--radius);
 border-bottom-right-radius: var(--radius);
}

.card--no-img {
 background: #e2e8f0;
 display: flex;
 flex-direction: column;
}

.card--no-img .titlebar {
 background: #cbd5e1;
}

.media--placeholder {
 height: 9rem;
 background: repeating-linear-gradient(
  45deg,
  rgba(255, 255, 255, 0.05),
  rgba(255, 255, 255, 0.05) 6px,
  transparent 6px,
  transparent 12px
 );
 border-bottom-left-radius: var(--radius);
 border-bottom-right-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {
  transition: none !important;
 }
}

.card:nth-child(12n+1) .titlebar {
 background: linear-gradient(to bottom, #dbeafe, #bfdbfe);
 color: #1e3a8a;
}
.card:nth-child(12n+1) .titlebar .nz {
 color: #1e40af;
}

.card:nth-child(12n+2) .titlebar {
 background: linear-gradient(to bottom, #fef3c7, #fde68a);
 color: #92400e;
}
.card:nth-child(12n+2) .titlebar .nz {
 color: #854d0e;
}

.card:nth-child(12n+3) .titlebar {
 background: linear-gradient(to bottom, #e0f2fe, #bae6fd);
 color: #0369a1;
}
.card:nth-child(12n+3) .titlebar .nz {
 color: #075985;
}

.card:nth-child(12n+4) .titlebar {
 background: linear-gradient(to bottom, #ede9fe, #ddd6fe);
 color: #5b21b6;
}
.card:nth-child(12n+4) .titlebar .nz {
 color: #4c1d95;
}

.card:nth-child(12n+5) .titlebar {
 background: linear-gradient(to bottom, #fce7f3, #fbcfe8);
 color: #9d174d;
}
.card:nth-child(12n+5) .titlebar .nz {
 color: #831843;
}

.card:nth-child(12n+6) .titlebar {
 background: linear-gradient(to bottom, #dcfce7, #bbf7d0);
 color: #166534;
}
.card:nth-child(12n+6) .titlebar .nz {
 color: #14532d;
}

.card:nth-child(12n+7) .titlebar {
 background: linear-gradient(to bottom, #f3f4f6, #e5e7eb);
 color: #111827;
}
.card:nth-child(12n+7) .titlebar .nz {
 color: #1f2937;
}

.card:nth-child(12n+8) .titlebar {
 background: linear-gradient(to bottom, #fff7ed, #ffedd5);
 color: #9a3412;
}
.card:nth-child(12n+8) .titlebar .nz {
 color: #7c2d12;
}

.card:nth-child(12n+9) .titlebar {
 background: linear-gradient(to bottom, #fef2f2, #fecaca);
 color: #991b1b;
}
.card:nth-child(12n+9) .titlebar .nz {
 color: #7f1d1d;
}

.card:nth-child(12n+10) .titlebar {
 background: linear-gradient(to bottom, #ecfdf5, #d1fae5);
 color: #065f46;
}
.card:nth-child(12n+10) .titlebar .nz {
 color: #064e3b;
}

.card:nth-child(12n+11) .titlebar {
 background: linear-gradient(to bottom, #fefce8, #fef9c3);
 color: #713f12;
}
.card:nth-child(12n+11) .titlebar .nz {
 color: #78350f;
}

.card:nth-child(12n+12) .titlebar {
 background: linear-gradient(to bottom, #f3e8ff, #e9d5ff);
 color: #7e22ce;
}
.card:nth-child(12n+12) .titlebar .nz {
 color: #6b21a8;
}