Bootstrap 5 Responsive Card Thumbnails

<section class="wdw-stage">
  <div class="container" style="max-width:1100px">
    <div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
      <div><span class="wdw-eyebrow">Journal</span><h1 class="h2 wdw-heading mt-1 mb-0">Latest stories</h1></div>
      <a href="#" class="fw-semibold">View all →</a>
    </div>
    <div class="row g-4">
      <div class="col-12"><article class="card wdw-card-sm overflow-hidden thumb-card position-relative">
        <div class="row g-0"><div class="col-lg-7"><div class="thumb-img ratio ratio-16x9 feat-img"><img class="object-fit-cover" src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=1000&q=70" width="1000" height="625" alt="Mountain lake at sunrise" loading="lazy"></div></div><div class="col-lg-5 d-flex"><div class="card-body p-4 d-flex flex-column justify-content-center">
          <div class="d-flex align-items-center gap-2 small text-body-secondary mb-3"><img class="rounded-circle" src="https://i.pravatar.cc/56?img=12" width="28" height="28" alt=""><span class="fw-semibold text-body">Elena Rossi</span><span aria-hidden="true">·</span><span>Mar 14</span><span aria-hidden="true">·</span><span>8 min read</span></div>
          <h2 class="h3 fw-bold mb-2"><a href="#" class="stretched-link text-body-emphasis text-decoration-none">Chasing sunrise in the Dolomites</a></h2>
          <p class="text-body-secondary mb-3">A four-day route through alpine huts, quiet trails and the best light of the year. We walked ridgelines at dawn and slept in huts that serve the best polenta in the Alps.</p>
          <span class="fw-semibold text-primary mt-auto" aria-hidden="true">Read story →</span></div></div></div>
        <span class="badge rounded-pill text-bg-light position-absolute top-0 start-0 m-3 z-2">Travel</span></article></div>
      <div class="col-md-6"><article class="card h-100 wdw-card-sm overflow-hidden thumb-card position-relative">
        <div class="thumb-img ratio ratio-16x9"><img class="object-fit-cover" src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?auto=format&fit=crop&w=800&q=70" width="800" height="450" alt="Laptop and notebook on a desk" loading="lazy"></div><div class="card-body p-4 d-flex flex-column justify-content-center">
          <div class="d-flex align-items-center gap-2 small text-body-secondary mb-3"><img class="rounded-circle" src="https://i.pravatar.cc/56?img=32" width="28" height="28" alt=""><span class="fw-semibold text-body">Sam Carter</span><span aria-hidden="true">·</span><span>Mar 9</span><span aria-hidden="true">·</span><span>5 min read</span></div>
          <h2 class="h5 fw-bold mb-2"><a href="#" class="stretched-link text-body-emphasis text-decoration-none">Designing calmer interfaces</a></h2>
          <p class="text-body-secondary mb-3">Five habits that remove clutter and let the content do the talking.</p>
          <span class="fw-semibold text-primary mt-auto" aria-hidden="true">Read story →</span></div>
        <span class="badge rounded-pill text-bg-light position-absolute top-0 start-0 m-3 z-2">Design</span></article></div>
      <div class="col-md-6"><article class="card h-100 wdw-card-sm overflow-hidden thumb-card position-relative">
        <div class="thumb-img ratio ratio-16x9"><img class="object-fit-cover" src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=800&q=70" width="800" height="450" alt="Code on a laptop screen" loading="lazy"></div><div class="card-body p-4 d-flex flex-column justify-content-center">
          <div class="d-flex align-items-center gap-2 small text-body-secondary mb-3"><img class="rounded-circle" src="https://i.pravatar.cc/56?img=47" width="28" height="28" alt=""><span class="fw-semibold text-body">Priya Nair</span><span aria-hidden="true">·</span><span>Mar 2</span><span aria-hidden="true">·</span><span>6 min read</span></div>
          <h2 class="h5 fw-bold mb-2"><a href="#" class="stretched-link text-body-emphasis text-decoration-none">Ship faster with fewer tools</a></h2>
          <p class="text-body-secondary mb-3">How a small team cut its stack in half and doubled its release rate.</p>
          <span class="fw-semibold text-primary mt-auto" aria-hidden="true">Read story →</span></div>
        <span class="badge rounded-pill text-bg-light position-absolute top-0 start-0 m-3 z-2">Code</span></article></div>
    </div>
  </div>
</section>

/* Web Designer Wall library style — shared base for every Bootstrap 5 snippet.
   Indigo accent, Plus Jakarta Sans, soft cards, pill buttons. Works in light and dark. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root,
[data-bs-theme="light"] {
  --wdw-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-family: var(--wdw-font);
  --bs-primary: #4f46e5;
  --bs-primary-rgb: 79, 70, 229;
  --bs-primary-text-emphasis: #3730a3;
  --bs-primary-bg-subtle: #eef2ff;
  --bs-primary-border-subtle: #c7d2fe;
  --bs-link-color: #4f46e5;
  --bs-link-color-rgb: 79, 70, 229;
  --bs-link-hover-color: #4338ca;
  --bs-link-hover-color-rgb: 67, 56, 202;
  --bs-focus-ring-color: rgba(79, 70, 229, 0.25);
  --bs-border-radius: 0.75rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;
  --wdw-radius-card: 1.25rem;
  --wdw-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 16px 40px -16px rgba(16, 24, 40, 0.22);
  --wdw-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px -4px rgba(16, 24, 40, 0.12);
  --wdw-stage: #f5f6fb;
}

[data-bs-theme="dark"] {
  --bs-primary: #818cf8;
  --bs-primary-rgb: 129, 140, 248;
  --bs-primary-text-emphasis: #c7d2fe;
  --bs-primary-bg-subtle: rgba(129, 140, 248, 0.14);
  --bs-primary-border-subtle: rgba(129, 140, 248, 0.35);
  --bs-link-color: #a5b4fc;
  --bs-link-color-rgb: 165, 180, 252;
  --bs-link-hover-color: #c7d2fe;
  --bs-link-hover-color-rgb: 199, 210, 254;
  --bs-focus-ring-color: rgba(129, 140, 248, 0.35);
  --wdw-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -16px rgba(0, 0, 0, 0.7);
  --wdw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
  --wdw-stage: #0f1117;
}

body { font-family: var(--wdw-font); -webkit-font-smoothing: antialiased; }

/* Bootstrap compiles its blue into these components; point them at the accent. */
.btn-primary {
  --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca;
  --bs-btn-active-bg: #3730a3; --bs-btn-active-border-color: #3730a3;
  --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0f1117; --bs-btn-hover-bg: #a5b4fc; --bs-btn-hover-border-color: #a5b4fc; --bs-btn-hover-color: #0f1117; --bs-btn-active-color: #0f1117; }
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn { --bs-btn-font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-sm { min-height: 36px; }
.form-control, .form-select { min-height: 44px; border-radius: .75rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: rgba(var(--bs-primary-rgb), .6); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); }
.nav { --bs-nav-link-color: var(--bs-secondary-color); --bs-nav-link-hover-color: var(--bs-emphasis-color); }
.pagination { --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); --bs-pagination-color: var(--bs-body-color); --bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--bs-primary); }
.list-group { --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-primary); border-radius: .875rem; box-shadow: var(--wdw-shadow-sm); }
.accordion { --bs-accordion-active-bg: var(--bs-primary-bg-subtle); --bs-accordion-active-color: var(--bs-primary-text-emphasis); --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.badge { font-weight: 600; }

/* Library building blocks — use these instead of re-inventing them per snippet. */
.wdw-stage { min-height: 100vh; display: flex; align-items: center; background: var(--wdw-stage); padding-block: 3rem; }
.wdw-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: var(--wdw-radius-card); box-shadow: var(--wdw-shadow); }
.wdw-card-sm { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: 1rem; box-shadow: var(--wdw-shadow-sm); }
.wdw-aurora { position: relative; color: #fff; background: radial-gradient(60% 55% at 100% 0, #818cf8 0, transparent 70%), radial-gradient(65% 60% at 0 100%, #ec4899 0, transparent 65%), #1e1b4b; }
.wdw-eyebrow { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-primary); }
.wdw-heading { font-weight: 800; letter-spacing: -.02em; color: var(--bs-emphasis-color); }
.wdw-muted { color: var(--bs-secondary-color); }
.wdw-icon { width: 2.75rem; height: 2.75rem; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: .875rem; background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }

/* Component */
.thumb-card{transition:transform .25s,box-shadow .25s}
.thumb-card:hover{transform:translateY(-4px);box-shadow:var(--wdw-shadow)}
.thumb-img img{object-fit:cover;transition:transform .5s}
.thumb-card:hover .thumb-img img{transform:scale(1.05)}
.thumb-img{overflow:hidden}
@media (prefers-reduced-motion:reduce){.thumb-card,.thumb-img img{transition:none}.thumb-card:hover{transform:none}}
@media (min-width:992px){.feat-img{--bs-aspect-ratio:auto;height:100%;min-height:340px}}
.thumb-card:focus-within{box-shadow:var(--wdw-shadow);outline:2px solid var(--bs-primary)}

// presentational component, no JS needed