/* ═══════════════════════════════════════════════════════════════
   assets/css/components.css  v2
   Article cards, index layout, single post layout, sidebar, pagination
   Layout based on approved HTML preview v2
   ═══════════════════════════════════════════════════════════════ */

/* ── Category pills ── */
.jb-cat-pill{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 9px;border-radius:var(--r-pill);border:1px solid currentColor}
.jb-cat--salary{color:#0b769c;background:#e8f4f8}
.jb-cat--remote{color:#7c3aed;background:#f5f0ff}
.jb-cat--career{color:#059669;background:#ecfdf5}
.jb-cat--hiring{color:#c2410c;background:#fff7ed}
.jb-cat--ai{color:#0284c7;background:#f0f9ff}
.jb-cat--industry{color:#9333ea;background:#faf5ff}
.jb-cat--guides{color:#d97706;background:#fffbeb}
.jb-cat--default{color:var(--ac);background:var(--color-al)}
[data-theme=dark] .jb-cat--salary{background:rgba(11,118,156,.12)}
[data-theme=dark] .jb-cat--remote{background:rgba(124,58,237,.12)}
[data-theme=dark] .jb-cat--career{background:rgba(5,150,105,.12)}
[data-theme=dark] .jb-cat--hiring{background:rgba(194,65,12,.12)}
[data-theme=dark] .jb-cat--ai{background:rgba(2,132,199,.12)}
[data-theme=dark] .jb-cat--industry{background:rgba(147,51,234,.12)}
[data-theme=dark] .jb-cat--guides{background:rgba(217,119,6,.12)}

/* ── Read badge ── */
.jb-read-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--color-sec);background:var(--color-alt);padding:3px 8px;border-radius:5px;border:1px solid var(--color-bdl)}

/* ═══════════════════════════════════════════════════════════════
   INDEX — HERO (editorial: text left, image right)
   ═══════════════════════════════════════════════════════════════ */
.jb-hero{border-bottom:1px solid var(--color-bd)}
.jb-hero__inner{max-width:var(--max-w);margin:0 auto;padding:40px var(--px);display:grid;grid-template-columns:1fr 420px;gap:48px;align-items:center}
.jb-hero__eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--color-ter);margin-bottom:12px}
.jb-hero__title{font-family:var(--font-euclid);font-size:34px;font-weight:700;color:var(--color-text);line-height:1.2;margin:0 0 16px;transition:color var(--t-base)}
.jb-hero__title:hover{color:var(--ac)}
.jb-hero__excerpt{font-size:15px;color:var(--color-sec);line-height:1.65;margin:0 0 20px;max-width:520px}
.jb-hero__meta{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--color-ter);flex-wrap:wrap}
.jb-hero__img-box{border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/3;background:var(--color-alt)}
.jb-hero__img-box img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.jb-hero__img-box:hover img{transform:scale(1.03)}

/* ═══ ARTICLE CARD (with image) ═══ */
.jb-card{background:var(--color-card);border:1px solid var(--color-bd);border-radius:var(--r-card);overflow:hidden;transition:border-color var(--t-base),box-shadow var(--t-base),transform var(--t-base);display:flex;flex-direction:column;animation:fadeInUp .3s ease both}
.jb-card:hover{border-color:var(--ac);box-shadow:0 4px 20px rgba(0,0,0,.1);transform:translateY(-2px)}
.jb-card__img{overflow:hidden;aspect-ratio:16/9;background:var(--color-alt);flex-shrink:0}
.jb-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.jb-card:hover .jb-card__img img{transform:scale(1.04)}
.jb-card__img-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-al),var(--color-alt))}
.jb-card__body{padding:16px 20px 20px;display:flex;flex-direction:column;flex:1}
.jb-card__cat{margin-bottom:10px}
.jb-card__title{font-family:var(--font-euclid);font-size:16px;font-weight:700;color:var(--color-text);line-height:1.35;margin:0 0 auto;padding-bottom:14px;transition:color var(--t-base)}
.jb-card:hover .jb-card__title{color:var(--ac)}
.jb-card__meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--color-ter);margin-top:12px;padding-top:12px;border-top:1px solid var(--color-bdl);flex-wrap:wrap}

/* ═══ 3-COLUMN GRID (with images) ═══ */
.jb-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.jb-grid-3 .jb-card:nth-child(1){animation-delay:.05s}
.jb-grid-3 .jb-card:nth-child(2){animation-delay:.1s}
.jb-grid-3 .jb-card:nth-child(3){animation-delay:.15s}
.jb-grid-3 .jb-card:nth-child(4){animation-delay:.2s}
.jb-grid-3 .jb-card:nth-child(5){animation-delay:.25s}
.jb-grid-3 .jb-card:nth-child(6){animation-delay:.3s}

/* ═══ DARK FEATURED/POPULAR SECTION ═══
   Same principle as cat bar: scroll on the full-width .jb-dark-sec,
   never inside a max-width constrained element.
═══ */
.jb-dark-sec{background:#0f1828;padding:40px 0;overflow-x:auto;overflow-y:visible;scrollbar-width:none;-webkit-overflow-scrolling:touch}
[data-theme=dark] .jb-dark-sec{background:#080c14}
.jb-dark-sec::-webkit-scrollbar{display:none}
.jb-dark-sec__inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--px);min-width:max-content}
.jb-dark-sec__tabs{display:flex;gap:4px;margin-bottom:28px;position:sticky;left:0}
.jb-dark-tab{padding:8px 20px;border-radius:20px;border:none;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font-body);transition:all var(--t-base);white-space:nowrap}
.jb-dark-tab--active{background:var(--ac);color:#fff}
.jb-dark-tab:not(.jb-dark-tab--active){background:transparent;color:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.15)}
.jb-dark-tab:not(.jb-dark-tab--active):hover{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.3)}

/* Scroll wrap & row */
.jb-dark-scroll-wrap{overflow:visible}
.jb-dark-scroll{display:flex;gap:16px;padding-bottom:4px}

.jb-dark-card{background:#1a2640;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-card);overflow:hidden;flex-shrink:0;width:300px;transition:border-color var(--t-base),transform var(--t-base);cursor:pointer;text-decoration:none;display:block}
.jb-dark-card:hover{border-color:rgba(11,118,156,.6);transform:translateY(-2px)}
.jb-dark-card__img{aspect-ratio:16/9;overflow:hidden;background:#0d1520}
.jb-dark-card__img img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform .4s,opacity .3s}
.jb-dark-card:hover .jb-dark-card__img img{transform:scale(1.05);opacity:1}
.jb-dark-card__body{padding:14px 16px 16px}
.jb-dark-card__cat{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--ac);margin-bottom:8px}
.jb-dark-card__title{font-family:var(--font-euclid);font-size:14px;font-weight:700;color:rgba(255,255,255,.9);line-height:1.35;margin:0 0 12px;transition:color var(--t-base)}
.jb-dark-card:hover .jb-dark-card__title{color:#fff}
.jb-dark-card__meta{font-size:12px;color:rgba(255,255,255,.4);display:flex;align-items:center;gap:8px}

/* ═══ TEXT LIST GRID (no images) ═══ */
.jb-list-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.jb-list-col{display:flex;flex-direction:column}
.jb-list-col:not(:last-child){padding-right:32px;border-right:1px solid var(--color-bdl)}
.jb-list-col:not(:first-child){padding-left:32px}
.jb-list-item{padding:16px 0;border-bottom:1px solid var(--color-bdl);cursor:pointer}
.jb-list-item:first-child{border-top:1px solid var(--color-bdl)}
.jb-list-item:last-child{border-bottom:none}
.jb-list-item__cat{margin-bottom:6px}
.jb-list-item__title{font-family:var(--font-euclid);font-size:15px;font-weight:700;color:var(--color-text);line-height:1.35;margin-bottom:8px;transition:color var(--t-base)}
.jb-list-item:hover .jb-list-item__title{color:var(--ac)}
.jb-list-item__meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--color-ter);flex-wrap:wrap}

/* ═══ SECTION HEADER ═══ */
.jb-section{padding:40px 0}
.jb-section__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.jb-section__title{font-family:var(--font-euclid);font-size:19px;font-weight:700;color:var(--color-text)}
.jb-see-all{font-size:13px;font-weight:600;color:var(--ac);display:flex;align-items:center;gap:4px;transition:gap var(--t-base)}
.jb-see-all:hover{gap:8px}

/* ═══ CATEGORY FILTER BAR ═══ */
.jb-arch-head{padding:48px 0 36px}
.jb-arch-head__inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--px)}
.jb-arch-head__eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--ac);margin-bottom:8px}
.jb-arch-head__title{font-family:var(--font-euclid);font-size:32px;font-weight:700;color:var(--color-text);margin:0 0 8px}
.jb-arch-head__desc{font-size:15px;color:var(--color-sec);max-width:600px;line-height:1.6;margin:0 0 8px}
.jb-arch-head__count{font-size:13px;color:var(--color-ter);font-weight:500}

/* ═══ PAGINATION ═══ */
.jb-pagination{display:flex;align-items:center;justify-content:center;gap:6px;padding:48px 0 0}
.jb-pagination .page-numbers{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 8px;border-radius:10px;font-size:14px;font-weight:500;color:var(--color-text);border:1px solid var(--color-bd);background:var(--color-card);transition:all var(--t-base);text-decoration:none;font-family:var(--font-body)}
.jb-pagination .page-numbers:hover{border-color:var(--ac);color:var(--ac);background:var(--color-al)}
.jb-pagination .page-numbers.current{background:var(--ac);border-color:var(--ac);color:#fff;font-weight:700}
.jb-pagination .page-numbers.dots{border:none;background:none;color:var(--color-ter);cursor:default;pointer-events:none}
.jb-pagination .page-numbers.dots:hover{background:none;border:none;color:var(--color-ter)}

/* ═══════════════════════════════════════════════════════════════
   SINGLE POST
   ═══════════════════════════════════════════════════════════════ */

/* Post header — creamy bg, 2-col */
.jb-post-hdr{background:#f5f2ec;border-bottom:1px solid #e8e2d9;padding:40px 0}
[data-theme=dark] .jb-post-hdr{background:#13151d;border-bottom-color:var(--color-bd)}
.jb-post-hdr__inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--px);display:grid;grid-template-columns:1fr 420px;gap:48px;align-items:start}
.jb-post-hdr__breadcrumb{font-size:13px;color:var(--color-ter);margin-bottom:16px;display:flex;align-items:center;gap:6px}
.jb-post-hdr__breadcrumb a{color:var(--color-ter);transition:color var(--t-base)}
.jb-post-hdr__breadcrumb a:hover{color:var(--ac)}
.jb-post-hdr__updated{font-size:12px;color:var(--color-ter);margin-bottom:12px}
.jb-post-hdr__cat{margin-bottom:14px}
.jb-post-hdr__title{font-family:var(--font-euclid);font-size:32px;font-weight:700;color:var(--color-text);line-height:1.2;margin:0 0 14px}
.jb-post-hdr__desc{font-size:16px;color:var(--color-sec);line-height:1.65;margin:0 0 20px}
/* Byline */
.jb-post-byline{display:flex;align-items:flex-start;gap:24px;padding-top:16px;border-top:1px solid #e0d9ce}
[data-theme=dark] .jb-post-byline{border-top-color:var(--color-bd)}
.jb-byline-person{display:flex;align-items:center;gap:10px}
.jb-byline-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;font-family:var(--font-euclid);flex-shrink:0}
.jb-byline-role{font-size:11px;color:var(--color-ter);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:2px}
.jb-byline-name{font-size:14px;font-weight:600;color:var(--color-text)}
.jb-byline-sep{width:1px;background:#d0c8bc;align-self:stretch}
[data-theme=dark] .jb-byline-sep{background:var(--color-bd)}
.jb-post-hdr__img{border-radius:var(--r-card);overflow:hidden;background:#e8e2d9}
[data-theme=dark] .jb-post-hdr__img{background:var(--color-alt)}
.jb-post-hdr__img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}

/* Post layout: 3 cols — TOC | content | sidebar */
.jb-post-layout{max-width:var(--max-w);margin:0 auto;padding:48px var(--px) 80px;display:grid;grid-template-columns:220px 1fr 260px;gap:48px;align-items:start}

/* TOC — left */
.jb-post-toc{position:sticky;top:80px}
.jb-toc__label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--color-ter);margin-bottom:12px}
.jb-toc__list{display:flex;flex-direction:column;gap:2px}
.jb-toc__item{display:block;padding:7px 10px;border-radius:6px;font-size:13px;color:var(--color-sec);border-left:2px solid transparent;transition:all var(--t-base);line-height:1.4;text-decoration:none}
.jb-toc__item:hover,.jb-toc__item--active{color:var(--ac);background:var(--color-al);border-left-color:var(--ac)}
.jb-toc__item--h3{padding-left:22px;font-size:12px}

/* Content — center */
.jb-post-content{}

/* Article typography */
.jb-entry-content{font-size:16px;line-height:1.8;color:var(--color-text)}
.jb-entry-content h2{font-family:var(--font-euclid);font-size:24px;font-weight:700;margin:2em 0 .6em;line-height:1.3;color:var(--color-text)}
.jb-entry-content h3{font-family:var(--font-euclid);font-size:20px;font-weight:700;margin:1.8em 0 .6em;line-height:1.3;color:var(--color-text)}
.jb-entry-content h4{font-family:var(--font-euclid);font-size:17px;font-weight:700;margin:1.6em 0 .5em;line-height:1.3;color:var(--color-text)}
.jb-entry-content p{margin:0 0 1.4em}
.jb-entry-content a{color:var(--ac);text-decoration:underline;text-underline-offset:3px;transition:color var(--t-base)}
.jb-entry-content a:hover{color:var(--ac-hover)}
.jb-entry-content ul,.jb-entry-content ol{margin:0 0 1.4em;padding-left:1.6em;list-style:revert}
.jb-entry-content li{margin-bottom:.5em}
.jb-entry-content strong{font-weight:700}
.jb-entry-content em{font-style:italic}
.jb-entry-content blockquote{border-left:3px solid var(--ac);padding:16px 24px;margin:2em 0;background:var(--color-al);border-radius:0 10px 10px 0;font-size:16px;font-style:italic;color:var(--color-sec)}
.jb-entry-content img{border-radius:var(--r-card);margin:1.6em 0;width:100%}
.jb-entry-content pre{background:var(--color-alt);border:1px solid var(--color-bd);border-radius:var(--r-card);padding:20px;overflow-x:auto;margin:1.6em 0;font-size:14px;line-height:1.5}
.jb-entry-content code{background:var(--color-alt);border:1px solid var(--color-bd);padding:2px 6px;border-radius:4px;font-size:.9em;font-family:'Courier New',monospace}
.jb-entry-content pre code{background:none;border:none;padding:0}
.jb-entry-content table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:14px}
.jb-entry-content th{background:var(--color-alt);font-weight:700;text-align:left;padding:10px 14px;border:1px solid var(--color-bd)}
.jb-entry-content td{padding:10px 14px;border:1px solid var(--color-bd)}
.jb-entry-content tr:nth-child(even) td{background:var(--color-alt)}
.jb-entry-content hr{border:none;border-top:1px solid var(--color-bd);margin:2.4em 0}

/* Author bio */
.jb-author-bio{display:flex;gap:20px;padding:24px;background:var(--color-alt);border-radius:var(--r-card);border:1px solid var(--color-bd);margin-top:48px}
.jb-author-bio__img{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--color-al);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-euclid);font-size:22px;font-weight:700;color:var(--ac)}
.jb-author-bio__name{font-family:var(--font-euclid);font-size:16px;font-weight:700;color:var(--color-text);margin-bottom:4px}
.jb-author-bio__role{font-size:13px;color:var(--ac);font-weight:500;margin-bottom:8px}
.jb-author-bio__desc{font-size:14px;color:var(--color-sec);line-height:1.6}

/* Sidebar — right */
.jb-post-side{}
.jb-widget{background:var(--color-card);border:1px solid var(--color-bd);border-radius:var(--r-card);padding:20px;margin-bottom:20px;transition:background var(--t-anim),border-color var(--t-anim)}
.jb-widget__title{font-family:var(--font-euclid);font-size:15px;font-weight:700;color:var(--color-text);margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--color-bdl)}
.jb-widget-posts{display:flex;flex-direction:column;gap:16px}
.jb-widget-post{display:flex;gap:12px;align-items:flex-start;text-decoration:none}
.jb-widget-post__img{width:64px;height:48px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--color-alt)}
.jb-widget-post__title{font-size:13px;font-weight:600;color:var(--color-text);line-height:1.4;margin-bottom:4px;transition:color var(--t-base)}
.jb-widget-post:hover .jb-widget-post__title{color:var(--ac)}
.jb-widget-post__meta{font-size:12px;color:var(--color-ter)}
.jb-widget-nl{background:linear-gradient(135deg,#0b769c 0%,#096485 100%);border:none!important}
.jb-widget-nl .jb-widget__title{color:rgba(255,255,255,.85);border-bottom-color:rgba(255,255,255,.2)}
.jb-widget-nl__desc{font-size:13px;color:rgba(255,255,255,.8);line-height:1.5;margin-bottom:14px}
.jb-widget-nl__input{width:100%;padding:10px 14px;border-radius:8px;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:13px;font-family:var(--font-body);outline:none;margin-bottom:8px}
.jb-widget-nl__input::placeholder{color:rgba(255,255,255,.6)}
.jb-widget-nl__input:focus{background:rgba(255,255,255,.22)}
.jb-widget-nl__btn{width:100%;padding:10px;border-radius:8px;border:none;background:#fff;color:var(--ac);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:background var(--t-base)}
.jb-widget-nl__btn:hover{background:rgba(255,255,255,.9)}

/* Related posts section */
.jb-related{border-top:1px solid var(--color-bd);padding:48px 0 80px}
.jb-related__inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--px)}
.jb-related__title{font-family:var(--font-euclid);font-size:22px;font-weight:700;color:var(--color-text);margin-bottom:24px}

/* Empty state */
.jb-empty{text-align:center;padding:80px 20px}
.jb-empty__icon{width:64px;height:64px;border-radius:16px;background:var(--color-al);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.jb-empty__title{font-family:var(--font-euclid);font-size:22px;font-weight:700;color:var(--color-text);margin-bottom:8px}
.jb-empty__desc{font-size:15px;color:var(--color-sec);max-width:400px;margin:0 auto 24px;line-height:1.6}
.jb-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 24px;border-radius:var(--r-btn);font-size:14px;font-weight:600;font-family:var(--font-body);cursor:pointer;transition:all var(--t-base);text-decoration:none;border:none}
.jb-btn--primary{background:var(--ac);color:#fff}
.jb-btn--primary:hover{background:var(--ac-hover)}
.jb-btn--outline{background:none;border:1.5px solid var(--color-bd);color:var(--color-sec)}
.jb-btn--outline:hover{border-color:var(--ac);color:var(--ac)}

/* 404 */
.jb-404{min-height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center;padding:48px var(--px);text-align:center}
.jb-404__wrap{max-width:480px}
.jb-404__number{font-family:var(--font-euclid);font-size:120px;font-weight:900;color:var(--ac);line-height:1;opacity:.15;margin-bottom:16px}
.jb-404__title{font-family:var(--font-euclid);font-size:32px;font-weight:700;color:var(--color-text);margin-bottom:12px}
.jb-404__desc{font-size:16px;color:var(--color-sec);margin:0 auto 32px;line-height:1.6}

/* Search results header */
.jb-search-hdr{padding:48px 0 32px}
.jb-search-hdr__query{font-size:14px;color:var(--color-sec);margin-bottom:8px}
.jb-search-hdr__query em{color:var(--ac);font-style:normal;font-weight:600}
.jb-search-hdr__title{font-family:var(--font-euclid);font-size:28px;font-weight:700;color:var(--color-text);margin-bottom:20px}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px){
  /* Hero */
  .jb-hero__inner{padding:32px var(--px-mob);grid-template-columns:1fr;gap:24px}
  .jb-hero__title{font-size:24px}
  .jb-hero__excerpt{font-size:14px}
  /* Cards grid */
  .jb-grid-3{grid-template-columns:1fr;gap:16px}
  /* Dark section — narrower cards on mobile */
  .jb-dark-sec{padding:28px 0}
  .jb-dark-sec__inner{padding:0 var(--px-mob);min-width:max-content}
  .jb-dark-sec__tabs{margin-bottom:20px}
  .jb-dark-card{width:220px}
  .jb-dark-scroll{gap:12px}
  /* Cat bar scroll padding */
  .jb-cat-bar__scroll{padding:10px var(--px-mob)}
  /* List grid → stack */
  .jb-list-grid{grid-template-columns:1fr}
  .jb-list-col{padding:0!important;border:none!important}
  .jb-list-col+.jb-list-col{border-top:1px solid var(--color-bdl)!important;padding-top:8px!important}
  /* Archive head */
  .jb-arch-head{padding:32px 0 24px}
  .jb-arch-head__inner{padding:0 var(--px-mob)}
  .jb-arch-head__title{font-size:22px}
  /* Section */
  .jb-section .jb-wrap{padding:0 var(--px-mob)}
  /* Post header */
  .jb-post-hdr__inner{padding:0 var(--px-mob);grid-template-columns:1fr;gap:24px}
  .jb-post-hdr__title{font-size:24px}
  /* Post image goes above text on mobile */
  .jb-post-hdr__img-col{order:-1}
  /* Post layout → stack */
  .jb-post-layout{padding:32px var(--px-mob) 60px;grid-template-columns:1fr;gap:32px}
  /* TOC above content on mobile */
  .jb-post-toc{position:static;order:0}
  .jb-post-content{order:1}
  .jb-post-side{order:2}
  /* Related */
  .jb-related__inner{padding:0 var(--px-mob)}
  /* Search */
  .jb-search-hdr{padding:32px 0 20px}
  /* 404 */
  .jb-404{padding:48px var(--px-mob)}
  .jb-404__number{font-size:80px}
  .jb-404__title{font-size:24px}
}

@media(max-width:480px){
  .jb-dark-card{width:200px}
  .jb-dark-card__title{font-size:13px}
}

@media(min-width:1025px) and (max-width:1200px){
  .jb-grid-3{grid-template-columns:repeat(2,1fr)}
  .jb-dark-card{width:260px}
}