<!--
  ============================================================
  ROSEY'S GALLERY — roseys-gallery.html
  Site by LZDeliveries (lzrealms.com)
  ============================================================
  CHANGELOG
  ------------------------------------------------------------
  v5.7 — 2026-08-13
    - Six new before/after cards added in alphabetical
      position: Big Brother & Sister, Birdbath with Doves,
      Cabbage Patch Girl, Cabbage Patch Kids, Mother (Quilt
      Banner), Raggedy Ann. New R2 files in Final/.
    - Raggedy Ann (single figure, "I Love You" heart) is
      distinct from the existing Raggedy Ann & Andy card
      (card118, raggedy-dolls-before/after.jpg) — different
      piece, no filename collision.
    - Gallery now 131 cards (was 125).

  v5.6 — 2026-07-26
    - Added fairy cottage "back to home" button: fixed
      top-left, 68px, links to
      https://roseystrinketsandtreasures.com. Always visible
      (not scroll-triggered like the back-to-top button).
      This is the motif that kept getting missed — noting it
      loudly here so it doesn't drop again.
    - Merged the two Gnome Pair cards (card116, card117) into
      one 3-stage slider (id cardGnomePair): original
      unpainted casting -> Blue & Green pair -> Red & Orange
      pair. Custom stage labels used instead of
      Before/Fixed/Final since this isn't a restoration.
    - Redesigned the floating back-to-top rose icon as a
      genuine open full-bloom (two rings of radiating petals
      + open center), replacing the tighter bud-like shape
      that was there before despite being labeled "open
      bloom" in code comments.
    - Gallery now 125 cards (was 126; net -1 from the Gnome
      Pair merge).

  v5.5 — 2026-07-26
    - Ten new before/after cards added in alphabetical
      position: Bear (Honey Pot), Fox, Gnome Pair (Blue &
      Green), Gnome Pair (Red & Orange), Mary on a Snake
      (3-stage slider), Raggedy Ann & Andy, Squirrel,
      Squirrel Girl, St. Francis with Doves (3-stage slider),
      Winged Flower Girl. New R2 files in Final/.
    - Both Gnome Pair cards reuse the same before-image
      (gnome-before.jpg) — one unpainted base casting, two
      painted pairs from it. Not a mismatch; confirmed with
      Nico.
    - St. Francis with Doves before-fixing/fixed filenames
      preserve mixed casing exactly as supplied
      (StFrancis-w-dove-before-fixed.jpg vs
      Stfrancis-w-dove-fixed-before-paint.jpg, capital vs
      lowercase F) — matches existing convention of
      preserving known R2 filename quirks to avoid 404s.
    - Raggedy Ann & Andy before-image is a partial/back-view
      shot of a single figure (not a clean match to the
      after photo's pair); used as supplied per Nico, no
      better source photo available.
    - Lollipop Kids statue (lollipop-kids-before.JPG) has no
      after photo yet — left out of the gallery for now.
    - Gallery now 126 cards (was 116: card0-card113 plus
      cardDach, cardDeer, and named v5.4 IDs).

  v5.4 — 2026-07-12
    - Five new before/after cards added in alphabetical
      position: Double Mushrooms, Fisherman Gnome,
      Fisherman Gnome (Close-up), Paddington Bear (Back),
      Paddington Bear (Front). New R2 files in Final/.
    - Dachshund 3-stage: before-image reference updated to
      renamed R2 object dashound-before-fixing.jpg (was
      dashhound-before-fixing.jpg). Fixed-stage image was
      replaced in R2 under the same filename (no code
      change). dashound-final.JPG unchanged.

  v5.3 — 2026-07-02
    - Removed the header rose-bud motif (kept the floating
      back-to-top rose button).
    - Small Deer converted from the static side-by-side triptych
      to the same draggable 3-stage slider as the Dachshund, for
      consistency. Old triple-card markup replaced; triple-card
      CSS left in place, now unused.
    - 3-stage slider zoom fix: object-fit changed cover -> contain
      and aspect-ratio 16/9 -> 4/3 so tall portrait photos show
      the full subject instead of cropping to the head.

  v5.2 — 2026-07-02
    - Cards re-sorted alphabetically by title. The v5.1 batch
      had been appended to the end; now every card (including
      the 9 new ones) sits in its correct A-Z slot. Card IDs
      renumbered sequentially to match new order.
    - Dachshund rebuilt as a full-width 3-stage slider: drag
      through before -> fixed -> final. Uses a separate
      .slider3-wrap class + its own init function, so the
      two-image initSliders() that runs every other card is
      untouched. This card now needs all three files in R2:
      dashhound-before-fixing.jpg, dashound-fixed.jpg,
      dashound-final.JPG.
    - Wide card spans both grid columns (.card-wide).
    - Added rose-bud back-to-top: a floating open-bloom button
      (bottom-right, fades in after 600px scroll) plus a closed
      rose-bud motif in the header, also clickable. Two
      different SVG designs.
    - Concrete Bunny before-image confirmed pointing at
      concrete-bunny-before.jpg (from v5.1). If it still shows
      blank on the live site, the JPG is not yet in R2/Final or
      the site is still serving pre-v5.1 HTML.

  v5.1 — 2026-07-02
    - Added 9 new before/after cards (card101-card109):
      Bull Dog (Front), Bull Dog (Right Side), Dopey Gnome
      (Front), Dopey Gnome (Back), Fisher Boy, Mary (Front),
      Snail Gnome (Front), Snail Gnome (Back), and Dachshund.
    - Dachshund card is a 3-stage restoration shown as a
      before/after slider (before-fixing to final); the middle
      "fixed" stage is noted in the card title. New slider JS
      was NOT touched — reuses existing two-image slider.
    - Concrete Bunny (card18): before image repointed from the
      old Concrete-bunny- before.png (space in filename) to the
      new concrete-bunny-before.jpg. Old .png left orphaned in
      R2, safe to delete later.
    - All new src values match R2 filenames exactly, including
      known typos preserved to avoid 404s: Mary-fron-after.jpg,
      snail-gnome-fornt-after.jpg, dashhound-before-fixing.jpg,
      dashound-final.JPG.
    - Gallery now 110 cards (was 101: card0-card100).

  v5.0 — 2026-06-21
    - Idle mode: after 4 seconds of no activity, cursor is
      replaced by a rose-tipped wand SVG that follows the mouse.
    - Idle petals: soft rose/sage/lavender petal shapes drift
      up from the bottom of the screen while idle. Softer
      aesthetic than the original bubble concept.
    - Clickable petals: clicking any petal while in wand mode
      triggers a radial sprite burst at the click point and
      ends idle mode, restoring the normal cursor.
    - Wand hotspot fix: star tip placed at bottom-left end of
      the wand stick so the burst fires exactly where the star
      lands on screen.
    - Slider sparkle fix: spawnSprites was never being called
      during drag. Extracted named onMove() that calls both
      setPos() and spawnSprites(). setPos() now returns current
      pct (0-100) so onMove can pass it directly.
    - mousemove no longer ends idle mode — only intentional
      actions (click, scroll, keydown, touchstart) do. Moving
      the mouse while idle just moves the wand.

  v4.0 — 2026-06-21
    - Full gallery rebuild: 102 before/after slider cards
      sourced from R2 bucket (roseys-gallery / Final/).
    - R2 base URL: pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev
    - 207 images paired into 101 standard pairs + 1 triple
      (Small Deer: before / primed / after).
    - 13 filename typo mismatches resolved in pairing logic
      (no reuploads needed — display labels corrected in code).
    - Large Deer (Restored): before/after mapped from
      non-standard filenames (restored-not-primed /
      restored-and-primed).
    - Saint Fatima/Mary mismatch corrected (same piece,
      different names on each file).
    - Chef shown as two cards: standard + primed stage.
    - Large-Virgin-Mary-and-column and finished-2ft-gnomes
      excluded (no usable pairs).
    - Grid locked to 2 columns; portrait aspect ratio (3:4)
      with object-fit:cover so all cards are uniform height.
    - Before/after slider uses clip-path on after image;
      before image fills full width behind it.
    - Live search bar filters cards by piece name.

  v3.0 — 2026-06-21
    - Restored v1 aesthetic: rose/sage/stone palette, botanical
      trellis SVGs in all four corners, watercolor wash blobs.
    - Slider sparkles (sprite-drift) re-integrated from v1.
    - Header updated to "Every piece has a story." with
      gradient rule underneath.

  v2.0 — 2026-06-21
    - Layout overhaul: 2-column grid, portrait aspect ratio,
      object-fit:cover to eliminate whitespace gaps from
      mismatched image orientations.
    - Piece count badge removed from header.

  v1.0 — 2026-06-21
    - Initial gallery build with before/after slider cards,
      R2 image hosting, live search, and base layout.
  ============================================================
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rosey's Gallery — Restored &amp; Repainted Pieces</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --petal:     #FEF6F7;
      --petal-mid: #F9ECF0;
      --rose:      #C0728A;
      --rose-dim:  #A55A72;
      --sage:      #8AA898;
      --stone:     #5C5059;
      --dusk:      #9A8C93;
      --border:    #ECD9E0;
      --card-radius: 10px;
      --card-shadow: 0 4px 24px rgba(92,80,89,0.10), 0 1px 4px rgba(92,80,89,0.07);
    }

    body {
      background: var(--petal);
      color: var(--stone);
      font-family: Georgia, 'Times New Roman', serif;
      min-height: 100vh;
      position: relative;
      overflow-x: hidden;
    }

    /* ── Header ── */
    header {
      padding: 4rem 2rem 2.5rem;
      text-align: center;
      position: relative;
      margin-bottom: 2rem;
    }
    header::after {
      content: '';
      display: block;
      margin: 2rem auto 0;
      width: 80px;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--rose), var(--sage), transparent);
      border-radius: 2px;
    }
    header h1 {
      font-size: clamp(1.8rem, 4vw, 3rem);
      letter-spacing: 0.02em;
      font-weight: normal;
      color: var(--stone);
    }
    header h1 em {
      font-style: italic;
      color: var(--rose);
    }
    header p {
      margin-top: 0.75rem;
      font-size: 0.85rem;
      color: var(--dusk);
      font-style: italic;
    }


    /* ── Search ── */
    .search-bar {
      display: flex;
      justify-content: center;
      padding: 1.5rem 1rem 0.5rem;
    }
    .search-bar input {
      width: 100%;
      max-width: 480px;
      padding: 0.6rem 1rem;
      border: 2px solid var(--border);
      border-radius: 2rem;
      font-size: 0.95rem;
      background: #fff;
      color: var(--ink);
      outline: none;
      font-family: inherit;
    }
    .search-bar input:focus {
      border-color: var(--rose);
      outline: none;
    }

    /* ── Grid ── */
    .gallery {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
      padding: 1.5rem;
      max-width: 1400px;
      margin: 0 auto;
    }

    /* ── Card ── */
    .card {
      background: #fff;
      border-radius: var(--card-radius);
      box-shadow: var(--card-shadow);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .card.hidden { display: none; }

    /* ── Wide card (spans both columns) for 3-stage pieces ── */
    .card-wide { grid-column: 1 / -1; }

    /* ── 3-stage slider ── */
    .slider3-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      user-select: none;
      touch-action: none;
      background: var(--petal-mid);
    }
    .slider3-wrap .s3-img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: contain; object-position: center center;
      pointer-events: none; display: block;
    }
    /* clips stack left-to-right: clip1 (before) over clip2 (fixed) over base img3 (final) */
    .slider3-wrap .s3-clip {
      position: absolute; top: 0; left: 0; bottom: 0;
      overflow: hidden;
    }
    .s3-clip1 { width: 33.33%; z-index: 3; }
    .s3-clip2 { width: 66.66%; z-index: 2; }
    .s3-img3  { z-index: 1; }
    /* inner clipped images must be full WRAP width (set in JS via --s3-w) so the
       image doesn't rescale as the clip narrows — the clip is a window, not a resizer */
    .slider3-wrap .s3-clip .s3-img {
      width: var(--s3-w, 100%); max-width: none;
    }
    .s3-divider {
      position: absolute; top: 0; bottom: 0; width: 2px;
      background: rgba(255,255,255,0.9);
      box-shadow: 0 0 6px rgba(92,80,89,0.4);
      z-index: 5; pointer-events: none;
    }
    .s3-handle {
      position: absolute; top: 50%; z-index: 6;
      width: 34px; height: 34px; margin: -17px 0 0 -17px;
      border-radius: 50%; background: var(--rose);
      display: flex; align-items: center; justify-content: center;
      cursor: col-resize; box-shadow: 0 2px 8px rgba(92,80,89,0.35);
    }
    .s3-handle .arrow { color: #fff; font-size: 0.85rem; line-height: 1; padding: 0 1px; }
    .s3-div-a { left: 33.33%; }
    .s3-div-b { left: 66.66%; }
    .s3-handle-a { left: 33.33%; }
    .s3-handle-b { left: 66.66%; }
    .s3-labels {
      position: absolute; bottom: 0.6rem; left: 0; right: 0;
      display: flex; justify-content: space-between;
      padding: 0 0.9rem; z-index: 5; pointer-events: none;
    }
    .s3-lbl-mid {
      background: var(--sage);
    }

    /* ── Fairy cottage home button (floating, top-left) ── */
    #home-btn {
      position: fixed; top: 22px; left: 22px; z-index: 9998;
      width: 68px; height: 68px; display: block;
      cursor: pointer; filter: drop-shadow(0 3px 6px rgba(92,80,89,0.3));
      transition: transform 0.3s ease;
    }
    #home-btn:hover { transform: translateY(-3px) scale(1.06); }
    #home-btn svg { width: 100%; height: 100%; display: block; }

    /* ── Rose-bud back-to-top (floating) ── */
    #to-top {
      position: fixed; bottom: 26px; right: 26px; z-index: 9998;
      width: 52px; height: 52px; border: none; background: transparent;
      cursor: pointer; opacity: 0; pointer-events: none;
      transform: translateY(12px) scale(0.9);
      transition: opacity 0.35s ease, transform 0.35s ease;
      filter: drop-shadow(0 3px 6px rgba(92,80,89,0.3));
    }
    #to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
    #to-top:hover { transform: translateY(-3px) scale(1.05); }
    #to-top svg { width: 100%; height: 100%; display: block; }

    .card-title {
      padding: 0.6rem 0.8rem 0.7rem;
      font-size: 0.9rem;
      letter-spacing: 0.03em;
      color: var(--stone);
      text-align: center;
      background: #fff;
      border-top: 1px solid var(--border);
    }

    /* ── Before/After Slider ── */
    .slider-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 3 / 4;
      overflow: hidden;
      cursor: col-resize;
      user-select: none;
      touch-action: none;
      background: var(--petal-mid);
    }

    /* after image fills the full container, cropped to fit */
    .img-after {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      pointer-events: none;
      display: block;
    }

    /* before panel clips the left half */
    .img-before-wrap {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 50%;
      overflow: hidden;
    }
    .img-before {
      position: absolute;
      top: 0;
      left: 0;
      width: var(--card-w, 100%);
      height: 100%;
      object-fit: cover;
      object-position: center top;
      max-width: none;
      pointer-events: none;
      display: block;
    }

    .divider {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 2px;
      background: #fff;
      transform: translateX(-50%);
      pointer-events: none;
    }

    .handle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--rose);
      border: 2px solid rgba(255,255,255,0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      pointer-events: none;
      box-shadow: 0 1px 6px rgba(0,0,0,0.25);
    }
    .arrow {
      color: #fff;
      font-size: 1.1rem;
      line-height: 1;
      font-style: normal;
    }

    .labels {
      position: absolute;
      top: 8px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
      pointer-events: none;
    }
    .lbl {
      background: rgba(26,18,8,0.6);
      color: #fff;
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 2px 8px;
      border-radius: 2rem;
      font-family: Arial, sans-serif;
    }

    /* ── Triple card ── */
    .triple-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      aspect-ratio: 3 / 4;
      height: auto;
    }
    .triple-img-wrap {
      position: relative;
      overflow: hidden;
      background: var(--petal-mid);
    }
    .triple-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .triple-lbl {
      position: absolute;
      bottom: 6px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(26,18,8,0.6);
      color: #fff;
      font-size: 0.62rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 2px 7px;
      border-radius: 2rem;
      white-space: nowrap;
      font-family: Arial, sans-serif;
    }

    /* ── No results ── */
    .no-results {
      display: none;
      text-align: center;
      padding: 3rem 1rem;
      color: #8a7060;
      font-style: italic;
      grid-column: 1/-1;
    }

    /* ── Footer ── */
    footer {
      text-align: center;
      padding: 2rem 1rem 3rem;
      font-size: 0.75rem;
      color: var(--dusk);
      border-top: 1px solid var(--border);
      margin-top: 1rem;
      letter-spacing: 0.04em;
    }
    footer a {
      color: var(--rose);
      text-decoration: none;
      font-style: italic;
    }

    @media (max-width: 480px) {
      .gallery { grid-template-columns: 1fr; gap: 1rem; padding: 0.75rem; }
    }

    /* ── Sprites ── */
    .sprite {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      mix-blend-mode: screen;
      animation: sprite-drift var(--dur, 1.2s) ease-out forwards;
      z-index: 10;
    }
    @keyframes sprite-drift {
      0%   { transform: translate(0, 0) scale(1);   opacity: 0.85; }
      60%  { opacity: 0.6; }
      100% { transform: translate(var(--tx), var(--ty)) scale(0.3); opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .sprite { display: none; }
    }
  
    /* ── Wand cursor (idle mode) ── */
    body.wand-mode,
    body.wand-mode * {
      cursor: none !important;
    }
    #wand-cursor {
      position: fixed;
      pointer-events: none;
      z-index: 99999;
      width: 32px;
      height: 32px;
      transform: translate(-6px, -28px); /* star tip at (6,28) is the hotspot */
      transition: opacity 0.3s;
      opacity: 0;
    }
    body.wand-mode #wand-cursor {
      opacity: 1;
    }
    .idle-petal {
      cursor: none;
      pointer-events: auto !important; /* petals are clickable in wand mode */
    }
    </style>
</head>
<body>

<div style="position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;" aria-hidden="true">
  <svg width="100%" height="100%" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <filter id="blur-heavy"><feGaussianBlur stdDeviation="60"/></filter>
      <filter id="blur-mid"  ><feGaussianBlur stdDeviation="35"/></filter>
      <filter id="soft"><feGaussianBlur stdDeviation="0.6"/></filter>
    </defs>
    <ellipse cx="120"  cy="120"  rx="340" ry="280" fill="#8AA898" opacity="0.18" filter="url(#blur-heavy)"/>
    <ellipse cx="1320" cy="100"  rx="380" ry="300" fill="#C0728A" opacity="0.15" filter="url(#blur-heavy)"/>
    <ellipse cx="200"  cy="820"  rx="300" ry="240" fill="#D4A0B0" opacity="0.16" filter="url(#blur-heavy)"/>
    <ellipse cx="1280" cy="800"  rx="350" ry="260" fill="#8AA898" opacity="0.15" filter="url(#blur-heavy)"/>
    <ellipse cx="720"  cy="60"   rx="420" ry="180" fill="#F2D4DC" opacity="0.18" filter="url(#blur-heavy)"/>
    <ellipse cx="1420" cy="460"  rx="200" ry="320" fill="#B899C4" opacity="0.11" filter="url(#blur-heavy)"/>
    <ellipse cx="80"   cy="440"  rx="180" ry="260" fill="#C0728A" opacity="0.11" filter="url(#blur-heavy)"/>
    <!-- Top-left trellis -->
    <g filter="url(#soft)" opacity="0.35" stroke="#5C5059" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path d="M 30 -10 Q 55 120 40 280 Q 30 380 60 480" stroke-width="1.2"/>
      <path d="M 40 80  Q 0 60 -20 90   Q 5 110 40 95"   stroke-width="0.9" fill="#8AA898" fill-opacity="0.25"/>
      <path d="M 45 160 Q 80 130 100 155 Q 70 180 45 170" stroke-width="0.9" fill="#8AA898" fill-opacity="0.22"/>
      <path d="M 38 240 Q -10 220 -30 250 Q 0 275 38 258"  stroke-width="0.9" fill="#8AA898" fill-opacity="0.22"/>
      <path d="M 50 340 Q 90 310 110 338 Q 80 365 50 352"  stroke-width="0.9" fill="#8AA898" fill-opacity="0.18"/>
      <path d="M 40 -10 Q 44 -40 48 -55" stroke-width="0.8"/>
      <ellipse cx="48" cy="-58" rx="5" ry="7" fill="#C0728A" fill-opacity="0.4" stroke-width="0.7"/>
      <path d="M 55 200 Q 90 180 95 160" stroke-width="0.6" stroke-dasharray="2 3"/>
      <path d="M 42 300 Q 10 285 5 265"  stroke-width="0.6" stroke-dasharray="2 3"/>
    </g>
    <!-- Top-right trellis (mirrored) -->
    <g filter="url(#soft)" opacity="0.32" stroke="#5C5059" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(1440,0) scale(-1,1)">
      <path d="M 30 -10 Q 55 120 40 280 Q 30 380 60 480" stroke-width="1.2"/>
      <path d="M 40 80  Q 0 60 -20 90   Q 5 110 40 95"   stroke-width="0.9" fill="#8AA898" fill-opacity="0.25"/>
      <path d="M 45 160 Q 80 130 100 155 Q 70 180 45 170" stroke-width="0.9" fill="#8AA898" fill-opacity="0.22"/>
      <path d="M 38 240 Q -10 220 -30 250 Q 0 275 38 258"  stroke-width="0.9" fill="#8AA898" fill-opacity="0.22"/>
      <path d="M 50 340 Q 90 310 110 338 Q 80 365 50 352"  stroke-width="0.9" fill="#8AA898" fill-opacity="0.18"/>
      <path d="M 40 -10 Q 44 -40 48 -55" stroke-width="0.8"/>
      <ellipse cx="48" cy="-58" rx="5" ry="7" fill="#C0728A" fill-opacity="0.4" stroke-width="0.7"/>
      <path d="M 55 200 Q 90 180 95 160" stroke-width="0.6" stroke-dasharray="2 3"/>
      <path d="M 42 300 Q 10 285 5 265"  stroke-width="0.6" stroke-dasharray="2 3"/>
    </g>
    <!-- Bottom-left trellis -->
    <g filter="url(#soft)" opacity="0.30" stroke="#5C5059" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(0,900) scale(1,-1)">
      <path d="M 20 0 Q 50 100 35 220 Q 25 300 55 380" stroke-width="1.2"/>
      <path d="M 35 70  Q -5 50 -25 80  Q 0 100 35 88"   stroke-width="0.9" fill="#8AA898" fill-opacity="0.12"/>
      <path d="M 40 150 Q 75 120 95 148 Q 65 172 40 162" stroke-width="0.9" fill="#8AA898" fill-opacity="0.10"/>
      <path d="M 35 0 Q 38 -25 42 -38" stroke-width="0.8"/>
      <path d="M 42 -38 Q 48 -50 44 -60 Q 36 -52 38 -40" stroke-width="0.8" fill="#C0728A" fill-opacity="0.18"/>
    </g>
    <!-- Bottom-right trellis -->
    <g filter="url(#soft)" opacity="0.28" stroke="#5C5059" fill="none" stroke-linecap="round" stroke-linejoin="round" transform="translate(1440,900) scale(-1,-1)">
      <path d="M 20 0 Q 50 100 35 220 Q 25 300 55 380" stroke-width="1.2"/>
      <path d="M 35 70  Q -5 50 -25 80  Q 0 100 35 88"   stroke-width="0.9" fill="#8AA898" fill-opacity="0.12"/>
      <path d="M 40 150 Q 75 120 95 148 Q 65 172 40 162" stroke-width="0.9" fill="#8AA898" fill-opacity="0.10"/>
      <path d="M 35 0 Q 38 -25 42 -38" stroke-width="0.8"/>
      <path d="M 42 -38 Q 48 -50 44 -60 Q 36 -52 38 -40" stroke-width="0.8" fill="#C0728A" fill-opacity="0.18"/>
    </g>
    <!-- Scattered petal dots -->
    <g opacity="0.25" fill="#C0728A">
      <circle cx="180" cy="140" r="3"/><circle cx="240" cy="90" r="2"/>
      <circle cx="1260" cy="110" r="2.5"/><circle cx="1310" cy="170" r="2"/>
      <circle cx="150" cy="620" r="2"/><circle cx="90" cy="700" r="3"/>
      <circle cx="1350" cy="580" r="2.5"/><circle cx="1400" cy="650" r="2"/>
    </g>
    <g opacity="0.20" fill="#8AA898">
      <circle cx="200" cy="200" r="2.5"/><circle cx="130" cy="500" r="2"/>
      <circle cx="1300" cy="300" r="2"/><circle cx="1380" cy="750" r="3"/>
    </g>
  </svg>
</div>


<div id="wand-cursor" aria-hidden="true">
  <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
    <!-- Wand stick — unchanged, top-right to bottom-left -->
    <line x1="28" y1="4" x2="6" y2="28" stroke="#5C5059" stroke-width="2.2" stroke-linecap="round"/>
    <!-- Wand tip star — moved to bottom-left end of the line (6,28) -->
    <g transform="translate(6,28)">
      <circle r="3.5" fill="#C0728A" opacity="0.9"/>
      <!-- 4 sparkle rays -->
      <line x1="0" y1="-6" x2="0" y2="-3.5" stroke="#F2D4DC" stroke-width="1.2" stroke-linecap="round"/>
      <line x1="0" y1="3.5" x2="0" y2="6"   stroke="#F2D4DC" stroke-width="1.2" stroke-linecap="round"/>
      <line x1="-6" y1="0" x2="-3.5" y2="0"  stroke="#F2D4DC" stroke-width="1.2" stroke-linecap="round"/>
      <line x1="3.5" y1="0" x2="6" y2="0"   stroke="#F2D4DC" stroke-width="1.2" stroke-linecap="round"/>
      <!-- Diagonal rays -->
      <line x1="-4" y1="-4" x2="-2.5" y2="-2.5" stroke="#8AA898" stroke-width="1" stroke-linecap="round"/>
      <line x1="2.5" y1="2.5" x2="4" y2="4"     stroke="#8AA898" stroke-width="1" stroke-linecap="round"/>
      <line x1="4" y1="-4"   x2="2.5" y2="-2.5"  stroke="#8AA898" stroke-width="1" stroke-linecap="round"/>
      <line x1="-2.5" y1="2.5" x2="-4" y2="4"   stroke="#8AA898" stroke-width="1" stroke-linecap="round"/>
    </g>
  </svg>
</div>

<a id="home-btn" href="https://roseystrinketsandtreasures.com" aria-label="Back to home" title="Back to Rosey's Trinkets &amp; Treasures home">
  <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
    <circle cx="32" cy="32" r="31" fill="#FEF6F7" stroke="#ECD9E0" stroke-width="1.5"/>
    <!-- Roof -->
    <path d="M18 30 L32 15 L46 30 Z" fill="#A55A72"/>
    <path d="M16 31 L32 14 L48 31 L45 31 L32 18 L19 31 Z" fill="#8AA898"/>
    <!-- Chimney -->
    <rect x="38" y="17" width="5" height="9" fill="#C0728A"/>
    <!-- Smoke puffs -->
    <circle cx="41" cy="12" r="2" fill="#B899C4" opacity="0.6"/>
    <circle cx="43.5" cy="8" r="1.4" fill="#B899C4" opacity="0.5"/>
    <!-- Cottage walls -->
    <rect x="20" y="30" width="24" height="16" rx="1.5" fill="#F2D4DC"/>
    <!-- Door -->
    <path d="M29 46 L29 38 Q29 35 32 35 Q35 35 35 38 L35 46 Z" fill="#8AA898"/>
    <circle cx="33.5" cy="41" r="0.8" fill="#FEF6F7"/>
    <!-- Windows -->
    <circle cx="24.5" cy="37" r="2.6" fill="#C0728A" fill-opacity="0.85"/>
    <circle cx="39.5" cy="37" r="2.6" fill="#C0728A" fill-opacity="0.85"/>
    <path d="M24.5 34.4 v5.2 M21.9 37 h5.2" stroke="#FEF6F7" stroke-width="0.6"/>
    <path d="M39.5 34.4 v5.2 M36.9 37 h5.2" stroke="#FEF6F7" stroke-width="0.6"/>
    <!-- Flower box -->
    <rect x="19" y="46" width="26" height="2.4" rx="1" fill="#A55A72"/>
    <circle cx="22" cy="45.5" r="1.3" fill="#C0728A"/>
    <circle cx="27" cy="45" r="1.3" fill="#8AA898"/>
    <circle cx="32" cy="45.6" r="1.3" fill="#C0728A"/>
    <circle cx="37" cy="45" r="1.3" fill="#8AA898"/>
    <circle cx="42" cy="45.5" r="1.3" fill="#C0728A"/>
  </svg>
</a>

<header style="position:relative;z-index:1;">
  <h1>Every piece has a <em>story.</em></h1>
  <p>Slide the handle to reveal each transformation.</p>
</header>

<div class="search-bar" style="position:relative;z-index:1;">
  <input type="text" id="search" placeholder="Search pieces…" aria-label="Search gallery">
</div>

<div class="gallery" style="position:relative;z-index:1;" id="gallery">

  <div class="card">
    <div class="slider-wrap" id="card0">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/2ft-gnome-after.png" alt="2ft Gnome after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/2ft-gnome-before.jpg" alt="2ft Gnome before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">2ft Gnome</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card1">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/2ft-Virgin-Mary-after.jpg" alt="2ft Virgin Mary after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/2ft-Virgin-Mary-before.jpg" alt="2ft Virgin Mary before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">2ft Virgin Mary</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card2">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/3-rock-figures-after.png" alt="3 Rock Figures after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/3-rock-figures-before.png" alt="3 Rock Figures before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">3 Rock Figures</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card3">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/3ft-grotto-after.jpg" alt="3ft Grotto after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/3ft-grotto-before.jpg" alt="3ft Grotto before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">3ft Grotto</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card4">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/3ft-Parrot-after.jpg" alt="3ft Parrot after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/3ft-Parrot-before.jpg" alt="3ft Parrot before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">3ft Parrot</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card5">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Alli-after.jpg" alt="Alli after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Alli-before.jpg" alt="Alli before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Alli</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card6">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Backside-lantern-gnome-after.jpg" alt="Backside Lantern Gnome after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Backside-lantern-gnome-gnome-before.jpg" alt="Backside Lantern Gnome before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Backside Lantern Gnome</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card7">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Baseball-players-after.jpg" alt="Baseball Players after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Baseball-players-before.png" alt="Baseball Players before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Baseball Players</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card114">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/bear-after.jpg" alt="Bear (Honey Pot) after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/bear-before.jpg" alt="Bear (Honey Pot) before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Bear (Honey Pot)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card122">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/big-brother-after.jpg" alt="Big Brother &amp; Sister after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/big-brother-before.jpg" alt="Big Brother &amp; Sister before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Big Brother &amp; Sister</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card8">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Big-wheel-after.jpg" alt="Big Wheel after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Big-wheel-before.jpg" alt="Big Wheel before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Big Wheel</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card123">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/birdbath-after.jpg" alt="Birdbath with Doves after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/birdbath-before.jpg" alt="Birdbath with Doves before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Birdbath with Doves</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card9">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Broken-ear-rabbit-after.jpg" alt="Broken Ear Rabbit after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Broken-ear-rabbit-before.jpg" alt="Broken Ear Rabbit before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Broken Ear Rabbit</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card10">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Broken-head-gnome-front-after.jpg" alt="Broken Head Gnome after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Broken-head-gnome-front-before.jpg" alt="Broken Head Gnome before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Broken Head Gnome</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card11">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Buddha-after.jpg" alt="Buddha after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Buddha-Before.jpg" alt="Buddha before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Buddha</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card12">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Bull-dog-front-after.jpg" alt="Bull Dog Front after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Bull-dog-front-before.jpg" alt="Bull Dog Front before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Bull Dog (Front)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card13">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Bull-dog-rt-side-after.jpg" alt="Bull Dog Right Side after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Bull-dog-rt-side-before.jpg" alt="Bull Dog Right Side before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Bull Dog (Right Side)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card124">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/cabbage-patch-after.jpg" alt="Cabbage Patch Girl after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/cabbage-patch-before.jpg" alt="Cabbage Patch Girl before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Cabbage Patch Girl</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card125">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/cabbage-patch-kids-after.jpg" alt="Cabbage Patch Kids after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/cabbage-patch-kids-before.JPG" alt="Cabbage Patch Kids before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Cabbage Patch Kids</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card14">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Chair-after.png" alt="Chair after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Chair-before.png" alt="Chair before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Chair</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card15">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Chef-after.jpg" alt="Chef after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Chef-before.jpg" alt="Chef before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Chef</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card16">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Chef-after-primed.jpg" alt="Chef (Primed) after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Chef-before-%20primed.jpg" alt="Chef (Primed) before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Chef (Primed)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card17">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/chipped-reindeer-after.png" alt="Chipped Reindeer after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/chipped-reindeer-before.png" alt="Chipped Reindeer before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Chipped Reindeer</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card18">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Clay-sun-moon-after.jpg" alt="Clay Sun Moon after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Clay-sun-moon-before.jpg" alt="Clay Sun Moon before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Clay Sun Moon</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card19">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/clown-after.jpg" alt="Clown after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Clown-before.JPEG" alt="Clown before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Clown</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card20">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Concrete-bunny-after.JPG" alt="Concrete Bunny after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/concrete-bunny-before.jpg" alt="Concrete Bunny before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Concrete Bunny</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card21">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Concrete-USMC-stone-after.jpg" alt="Concrete USMC Stone after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Concrete-USMC-Stone-Before.jpg" alt="Concrete USMC Stone before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Concrete USMC Stone</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card22">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Cone-shaped-buddha-after.jpg" alt="Cone Shaped Buddha after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/cone-shaped-buddha-before.jpg" alt="Cone Shaped Buddha before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Cone Shaped Buddha</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card23">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Cop-lamp-after.jpg" alt="Cop Lamp after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Cop-lamp-before.png" alt="Cop Lamp before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Cop Lamp</p>
  </div>
  <div class="card card-wide">
    <div class="slider3-wrap" id="cardDach">
      <img class="s3-img s3-img3" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/dashound-final.JPG" alt="Dachshund final" loading="lazy">
      <div class="s3-clip s3-clip2">
        <img class="s3-img" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/dashound-fixed.jpg" alt="Dachshund fixed" loading="lazy">
      </div>
      <div class="s3-clip s3-clip1">
        <img class="s3-img" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/dashound-before-fixing.jpg" alt="Dachshund before" loading="lazy">
      </div>
      <div class="s3-divider s3-div-a"></div>
      <div class="s3-divider s3-div-b"></div>
      <div class="s3-handle s3-handle-a"><span class="arrow left">&#8249;</span><span class="arrow right">&#8250;</span></div>
      <div class="s3-handle s3-handle-b"><span class="arrow left">&#8249;</span><span class="arrow right">&#8250;</span></div>
      <div class="s3-labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl s3-lbl-mid">Fixed</span>
        <span class="lbl lbl-after">Final</span>
      </div>
    </div>
    <p class="card-title">Dachshund (before &middot; fixed &middot; final)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card24">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Dopey-gnome-back-after.jpg" alt="Dopey Gnome Back after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Dopey-gnome-back-before.jpg" alt="Dopey Gnome Back before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Dopey Gnome (Back)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card25">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Dopey-gnome-front-after.jpg" alt="Dopey Gnome Front after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Dopey-gnome-front-before.jpg" alt="Dopey Gnome Front before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Dopey Gnome (Front)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card109">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/double-mushrooms-after.jpg" alt="Double Mushrooms after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/double-mushrooms-before.jpg" alt="Double Mushrooms before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Double Mushrooms</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card26">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Fairy-after.jpg" alt="Fairy after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/fairy-before.jpg" alt="Fairy before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Fairy</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card27">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/fisher-boy-after.jpg" alt="Fisher Boy after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/fisherboy-before.jpg" alt="Fisher Boy before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Fisher Boy</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card110">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/fisherman-gnome-after.jpg" alt="Fisherman Gnome after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/fisherman-gnome-before.jpg" alt="Fisherman Gnome before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Fisherman Gnome</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card111">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/close-up-fisherman-gnome-after.jpg" alt="Fisherman Gnome Close-up after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/close-up-fisherman-gnome-before.jpg" alt="Fisherman Gnome Close-up before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Fisherman Gnome (Close-up)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card115">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/fox-after.jpg" alt="Fox after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/fox-before.jpg" alt="Fox before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Fox</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card28">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/forg-reading-after.jpg" alt="Frog Reading after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/frog-reading-before.jpg" alt="Frog Reading before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Frog Reading</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card29">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Frogs-on-bench-after.png" alt="Frogs on Bench after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Frogs-on-bench-before.png" alt="Frogs on Bench before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Frogs on Bench</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card30">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/frontside-lantern-gnome-after.jpg" alt="Frontside Lantern Gnome after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Frontside-lantern-gnome-before.jpg" alt="Frontside Lantern Gnome before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Frontside Lantern Gnome</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card31">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Gingerbreadhouse-after.jpg" alt="Gingerbread House after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/gingerbreadhouse-before.jpg" alt="Gingerbread House before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Gingerbread House</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card32">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Girl-statue-w-windmill-after.jpg" alt="Girl Statue w/ Windmill after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Girl-statue-w-windmill-before.jpg" alt="Girl Statue w/ Windmill before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Girl Statue w/ Windmill</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card33">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Girl-with-flowers-after.png" alt="Girl with Flowers after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Girl-with-flowers-before.jpg" alt="Girl with Flowers before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Girl with Flowers</p>
  </div>
  <div class="card card-wide">
    <div class="slider3-wrap" id="cardGnomePair">
      <img class="s3-img s3-img3" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/set2-gnomes-after.jpg" alt="Gnome Pair Red and Orange" loading="lazy">
      <div class="s3-clip s3-clip2">
        <img class="s3-img" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/set-gnomes-after.jpg" alt="Gnome Pair Blue and Green" loading="lazy">
      </div>
      <div class="s3-clip s3-clip1">
        <img class="s3-img" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/gnome-before.jpg" alt="Gnome original unpainted" loading="lazy">
      </div>
      <div class="s3-divider s3-div-a"></div>
      <div class="s3-divider s3-div-b"></div>
      <div class="s3-handle s3-handle-a"><span class="arrow left">&#8249;</span><span class="arrow right">&#8250;</span></div>
      <div class="s3-handle s3-handle-b"><span class="arrow left">&#8249;</span><span class="arrow right">&#8250;</span></div>
      <div class="s3-labels">
        <span class="lbl lbl-before">Original</span>
        <span class="lbl s3-lbl-mid">Blue &amp; Green</span>
        <span class="lbl lbl-after">Red &amp; Orange</span>
      </div>
    </div>
    <p class="card-title">Gnome Pair (original &middot; blue &amp; green &middot; red &amp; orange)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card34">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Gnome-with-cane-front-after.jpg" alt="Gnome with Cane after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Gnome-with-cane-front-before.jpg" alt="Gnome with Cane before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Gnome with Cane</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card35">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Grandpa-gnome-front-view-after.jpg" alt="Grandpa Gnome after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Granpa-gnome-front-view-before.png" alt="Grandpa Gnome before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Grandpa Gnome</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card36">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/green-gnome-backview-after.jpg" alt="Green Gnome (Back) after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/green-gnome-backview-before.jpg" alt="Green Gnome (Back) before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Green Gnome (Back)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card37">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/green-gnome-frontview-after.jpg" alt="Green Gnome (Front) after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/green-gnome-frontview-before.jpg" alt="Green Gnome (Front) before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Green Gnome (Front)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card38">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/guitar-gnome-backview-after.jpg" alt="Guitar Gnome (Back) after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Guitar-gnome-backview-before.jpg" alt="Guitar Gnome (Back) before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Guitar Gnome (Back)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card39">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Guitar-gnome-front-after.jpg" alt="Guitar Gnome (Front) after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Guitar-gnome-front-before.jpg" alt="Guitar Gnome (Front) before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Guitar Gnome (Front)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card40">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/gun-parking-backside-after.jpg" alt="Gun Parking (Back) after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/gun-parking-backside-before.jpg" alt="Gun Parking (Back) before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Gun Parking (Back)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card41">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Gun-parking-front-after.jpg" alt="Gun Parking (Front) after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Gun-parking-front-before.jpg" alt="Gun Parking (Front) before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Gun Parking (Front)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card42">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Horse-after.png" alt="Horse after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Horse-before.jpg" alt="Horse before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Horse</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card43">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Kids-backside-after.jpg" alt="Kids Backside after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Kid-backside-before.jpg" alt="Kids Backside before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Kids Backside</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card44">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Kids-frontside-after.jpg" alt="Kids Frontside after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Kids-frontside-before.jpg" alt="Kids Frontside before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Kids Frontside</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card45">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/kids-hiding-eyes-after.jpg" alt="Kids Hiding Eyes after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Kids-hiding-eyes-before.jpg" alt="Kids Hiding Eyes before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Kids Hiding Eyes</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card46">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Kids-hiding-eyes-backside-after.jpg" alt="Kids Hiding Eyes (Back) after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Kids-hiding-eyes-backside-before.jpg" alt="Kids Hiding Eyes (Back) before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Kids Hiding Eyes (Back)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card47">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/kids-on-bench-after.jpg" alt="Kids on Bench after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/kids-on-bench-before.jpg" alt="Kids on Bench before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Kids on Bench</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card48">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Kids-on-tricycle-front-view-after.jpg" alt="Kids on Tricycle (Front) after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Kids-on-tricyle-front-view-before.jpg" alt="Kids on Tricycle (Front) before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Kids on Tricycle (Front)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card49">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Kids-on-tricycle-side-view-after.jpg" alt="Kids on Tricycle (Side) after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Kids-on-tircycle-side-view-before.jpg" alt="Kids on Tricycle (Side) before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Kids on Tricycle (Side)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card50">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/kids-playing-after.png" alt="Kids Playing after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Kids-playing-before.png" alt="Kids Playing before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Kids Playing</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card51">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Kissing-kids-after.png" alt="Kissing Kids after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Kissing-kids-before.png" alt="Kissing Kids before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Kissing Kids</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card52">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Knight-bust-after.jpeg" alt="Knight Bust after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Knight-bust-before.jpg" alt="Knight Bust before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Knight Bust</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card53">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/labrador-after.jpg" alt="Labrador after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/labrador-before.png" alt="Labrador before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Labrador</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card54">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Large-Buddha-after.jpg" alt="Large Buddha after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Large-Buddha-before.jpg" alt="Large Buddha before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Large Buddha</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card55">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Large-buddha-head-after.jpg" alt="Large Buddha Head after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Large-Buddha-head-before.jpg" alt="Large Buddha Head before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Large Buddha Head</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card56">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Large-Deer-after.jpg" alt="Large Deer after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Large-deer-before.jpg" alt="Large Deer before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Large Deer</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card57">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Large-Deer-restored-and-primed.jpg" alt="Large Deer (Restored) after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Large-deer-restored-not-primed.jpg" alt="Large Deer (Restored) before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Large Deer (Restored)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card58">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Large-Mary-Column-after.jpg" alt="Large Mary Column after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Large-Mary-Column-before.jpg" alt="Large Mary Column before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Large Mary Column</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card59">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Large-Virgin-Mary-after.jpg" alt="Large Virgin Mary after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Large-Virgin-Mary-before.jpg" alt="Large Virgin Mary before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Large Virgin Mary</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card60">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/lying-gnome-after.jpg" alt="Lying Gnome after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/lying-gnome-before.jpg" alt="Lying Gnome before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Lying Gnome</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card61">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/lying-statues-after.jpg" alt="Lying Statues after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/lying-statues-before.jpg" alt="Lying Statues before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Lying Statues</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card62">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Mary-fron-after.jpg" alt="Mary Front after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Mary-front-before.jpg" alt="Mary Front before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Mary (Front)</p>
  </div>
  <div class="card card-wide">
    <div class="slider3-wrap" id="cardMarySnake">
      <img class="s3-img s3-img3" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Mary-on-a-snake-fixed-painted-after.jpg" alt="Mary on a Snake final" loading="lazy">
      <div class="s3-clip s3-clip2">
        <img class="s3-img" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Mary-on-a-snake-fixed-before-paint.jpg" alt="Mary on a Snake fixed" loading="lazy">
      </div>
      <div class="s3-clip s3-clip1">
        <img class="s3-img" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Mary-on-a-snake-before-fixed.jpg" alt="Mary on a Snake before" loading="lazy">
      </div>
      <div class="s3-divider s3-div-a"></div>
      <div class="s3-divider s3-div-b"></div>
      <div class="s3-handle s3-handle-a"><span class="arrow left">&#8249;</span><span class="arrow right">&#8250;</span></div>
      <div class="s3-handle s3-handle-b"><span class="arrow left">&#8249;</span><span class="arrow right">&#8250;</span></div>
      <div class="s3-labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl s3-lbl-mid">Fixed</span>
        <span class="lbl lbl-after">Final</span>
      </div>
    </div>
    <p class="card-title">Mary on a Snake (before &middot; fixed &middot; final)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card63">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/mermaid-after.jpg" alt="Mermaid after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/mermaid-before.jpg" alt="Mermaid before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Mermaid</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card64">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Mets-rock-after.jpg" alt="Mets Rock after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Mets-rock-before.JPG" alt="Mets Rock before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Mets Rock</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card65">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Milkcan-after.jpg" alt="Milk Can after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Milkcan-before.jpg" alt="Milk Can before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Milk Can</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card66">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/mini-buddhas-after.jpg" alt="Mini Buddhas after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/mini-buddhas-before.jpg" alt="Mini Buddhas before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Mini Buddhas</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card67">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Mini-dutch-statues-after.png" alt="Mini Dutch Statues after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Mini-dutch-statues-before.JPG" alt="Mini Dutch Statues before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Mini Dutch Statues</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card126">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Mother-banner-after.jpg" alt="Mother (Quilt Banner) after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Mother-banner-before.jpg" alt="Mother (Quilt Banner) before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Mother (Quilt Banner)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card68">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/mushroom-after.jpg" alt="Mushroom after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/mushroom-before.jpg" alt="Mushroom before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Mushroom</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card69">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Nefertiti-after.jpg" alt="Nefertiti after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Nefertitti-before.JPG" alt="Nefertiti before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Nefertiti</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card70">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/One-Eye-Gnome-After.png" alt="One Eye Gnome after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/One-Eye-Gnome-Before.png" alt="One Eye Gnome before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">One Eye Gnome</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card112">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Paddington-bear-back-after.jpg" alt="Paddington Bear Back after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Paddington-bear-back-before.jpg" alt="Paddington Bear Back before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Paddington Bear (Back)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card113">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Paddington-bear-front-after.jpg" alt="Paddington Bear Front after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Paddington-bear-front-before.jpg" alt="Paddington Bear Front before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Paddington Bear (Front)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card71">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/parrots-after.png" alt="Parrots after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/parrots-before.jpg" alt="Parrots before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Parrots</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card72">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Piggy-back-kids-after.jpg" alt="Piggyback Kids after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Piggy-Back-kids-before.jpg" alt="Piggyback Kids before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Piggyback Kids</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card73">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Pug-after.png" alt="Pug after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/pug-before.png" alt="Pug before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Pug</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card74">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/punk-frog-after.jpg" alt="Punk Frog after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Punk-frog-before.jpg" alt="Punk Frog before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Punk Frog</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card127">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/raggedy-ann-after.jpg" alt="Raggedy Ann after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/raggedy-ann-before.jpg" alt="Raggedy Ann before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Raggedy Ann</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card118">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/raggedy-dolls-after.jpg" alt="Raggedy Ann and Andy after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/raggedy-dolls-before.jpg" alt="Raggedy Ann and Andy before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Raggedy Ann &amp; Andy</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card75">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Resin-buddha-bust-after.png" alt="Resin Buddha Bust after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Resin-Buddha-bust-before.png" alt="Resin Buddha Bust before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Resin Buddha Bust</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card76">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Saint-Fatima-after.png" alt="Saint Fatima after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Saint-Mary-before.jpg" alt="Saint Fatima before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Saint Fatima</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card77">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/santa-gnome-after.jpg" alt="Santa Gnome after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/santa-gnome-before.jpg" alt="Santa Gnome before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Santa Gnome</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card78">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/serving-monkey-after.jpg" alt="Serving Monkey after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/serving-monkey-before.png" alt="Serving Monkey before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Serving Monkey</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card79">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/small-bunnies-after.jpg" alt="Small Bunnies after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/small-bunnies-before.JPG" alt="Small Bunnies before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Small Bunnies</p>
  </div>

  <div class="card card-wide">
    <div class="slider3-wrap" id="cardDeer">
      <img class="s3-img s3-img3" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/small-deer-after.jpg" alt="Small Deer after" loading="lazy">
      <div class="s3-clip s3-clip2">
        <img class="s3-img" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/small-deer-primed.jpg" alt="Small Deer primed" loading="lazy">
      </div>
      <div class="s3-clip s3-clip1">
        <img class="s3-img" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Small-deer-before.jpg" alt="Small Deer before" loading="lazy">
      </div>
      <div class="s3-divider s3-div-a"></div>
      <div class="s3-divider s3-div-b"></div>
      <div class="s3-handle s3-handle-a"><span class="arrow left">&#8249;</span><span class="arrow right">&#8250;</span></div>
      <div class="s3-handle s3-handle-b"><span class="arrow left">&#8249;</span><span class="arrow right">&#8250;</span></div>
      <div class="s3-labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl s3-lbl-mid">Primed</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Small Deer (before &middot; primed &middot; after)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card80">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/small-grotto-backside-after.jpg" alt="Small Grotto (Back) after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/small-grotto-backside-before.jpg" alt="Small Grotto (Back) before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Small Grotto (Back)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card81">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/small-grotto-frontview-after.jpg" alt="Small Grotto (Front) after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/small-grotto-frontview-before.jpg" alt="Small Grotto (Front) before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Small Grotto (Front)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card82">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/small-lighthouse-after.JPG" alt="Small Lighthouse after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/small-lighthouse-before.jpg" alt="Small Lighthouse before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Small Lighthouse</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card83">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/small-St.Francis-back-after.jpg" alt="Small St. Francis (Back) after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/small-St.Francis-back-before.jpg" alt="Small St. Francis (Back) before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Small St. Francis (Back)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card84">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/small-St.francis-front-after.jpg" alt="Small St. Francis (Front) after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/small-St.Francis-front-before.png" alt="Small St. Francis (Front) before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Small St. Francis (Front)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card85">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Small-Virgin-Mary-after.jpg" alt="Small Virgin Mary after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Small-Virgin-Mary-before.jpg" alt="Small Virgin Mary before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Small Virgin Mary</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card86">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/snail-gnome-back-after.jpg" alt="Snail Gnome Back after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Snail-gnome-back-before.jpg" alt="Snail Gnome Back before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Snail Gnome (Back)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card87">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/snail-gnome-fornt-after.jpg" alt="Snail Gnome Front after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Snail-gnome-front-before.jpg" alt="Snail Gnome Front before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Snail Gnome (Front)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card119">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/squirrel-after.jpg" alt="Squirrel after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/squirrel-before.jpg" alt="Squirrel before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Squirrel</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card120">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/squirrel-girl-after.jpg" alt="Squirrel Girl after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/squirrel-girl-before.jpg" alt="Squirrel Girl before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Squirrel Girl</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card88">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/St.Anthony-after.jpg" alt="St. Anthony after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/St.Anthony-before.JPG" alt="St. Anthony before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">St. Anthony</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card89">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/St.Francis-after.jpg" alt="St. Francis after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/St.Francis-before.jpg" alt="St. Francis before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">St. Francis</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card90">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/St.francis-head-after.jpg" alt="St. Francis Head after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/St.Francis-head-before.jpg" alt="St. Francis Head before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">St. Francis Head</p>
  </div>
  <div class="card card-wide">
    <div class="slider3-wrap" id="cardStFrancisDove">
      <img class="s3-img s3-img3" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/StFrancis-w-dove-after.jpg" alt="St. Francis with Doves final" loading="lazy">
      <div class="s3-clip s3-clip2">
        <img class="s3-img" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Stfrancis-w-dove-fixed-before-paint.jpg" alt="St. Francis with Doves fixed" loading="lazy">
      </div>
      <div class="s3-clip s3-clip1">
        <img class="s3-img" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/StFrancis-w-dove-before-fixed.jpg" alt="St. Francis with Doves before" loading="lazy">
      </div>
      <div class="s3-divider s3-div-a"></div>
      <div class="s3-divider s3-div-b"></div>
      <div class="s3-handle s3-handle-a"><span class="arrow left">&#8249;</span><span class="arrow right">&#8250;</span></div>
      <div class="s3-handle s3-handle-b"><span class="arrow left">&#8249;</span><span class="arrow right">&#8250;</span></div>
      <div class="s3-labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl s3-lbl-mid">Fixed</span>
        <span class="lbl lbl-after">Final</span>
      </div>
    </div>
    <p class="card-title">St. Francis with Doves (before &middot; fixed &middot; final)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card91">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/starwheel-after.jpg" alt="Starwheel after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Starwheel-before.jpg" alt="Starwheel before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Starwheel</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card92">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/sunbathing-frogs-after.png" alt="Sunbathing Frogs after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/sun-bathing-frogs-before.jpg" alt="Sunbathing Frogs before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Sunbathing Frogs</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card93">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Sunflowers-after.jpg" alt="Sunflowers after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Sunflowers-before.jpg" alt="Sunflowers before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Sunflowers</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card94">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Tables-after.jpg" alt="Tables after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Tables-before.png" alt="Tables before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Tables</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card95">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Thonking-gnome-after.png" alt="Thinking Gnome after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Thinking-gnome-before.jpg" alt="Thinking Gnome before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Thinking Gnome</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card96">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Tiki-man-after.png" alt="Tiki Man after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Tiki-man-before.jpg" alt="Tiki Man before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Tiki Man</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card97">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Tiki-pole-after.jpg" alt="Tiki Pole after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Tiki-pole-before.jpg" alt="Tiki Pole before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Tiki Pole</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card98">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Tiki-statue-after.jpg" alt="Tiki Statue after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Tiki-statue-before.jpg" alt="Tiki Statue before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Tiki Statue</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card99">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/tree-monkey-after.png" alt="Tree Monkey after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/tree-monkey-before.jpg" alt="Tree Monkey before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Tree Monkey</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card100">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Turtle-after.png" alt="Turtle after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Turtle-before.png" alt="Turtle before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Turtle</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card101">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/ugly-toad-after.JPG" alt="Ugly Toad after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/ugly-toad-before.jpg" alt="Ugly Toad before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Ugly Toad</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card102">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Virgin-Mary-on-Stone-after.jpg" alt="Virgin Mary on Stone after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Virgin-Mary-on-Stone-before.jpg" alt="Virgin Mary on Stone before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Virgin Mary on Stone</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card103">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Waiter-frog-after.jpg" alt="Waiter Frog after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Waiter-frog-before.PNG" alt="Waiter Frog before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Waiter Frog</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card104">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Wally-after.jpg" alt="Wally after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Wally-before.jpg" alt="Wally before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Wally</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card105">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Wally-backside-after.jpg" alt="Wally (Back) after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Wally-backside-before.jpg" alt="Wally (Back) before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Wally (Back)</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card106">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Welcome-friends-after.jpg" alt="Welcome Friends after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/welcome-friends-before.jpg" alt="Welcome Friends before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Welcome Friends</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card121">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Winged-flower-girl-after.jpg" alt="Winged Flower Girl after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Winged-flower-girl-before.jpg" alt="Winged Flower Girl before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Winged Flower Girl</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card107">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/yankees-rock-after.jpg" alt="Yankees Rock after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/Yankees-rock-before.JPG" alt="Yankees Rock before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Yankees Rock</p>
  </div>
  <div class="card">
    <div class="slider-wrap" id="card108">
      <img class="img-after" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/yellow-latern-gnome-front-after.jpg" alt="Yellow Lantern Gnome after" loading="lazy">
      <div class="img-before-wrap">
        <img class="img-before" src="https://pub-c8708b3adfd04595b59a44d4c345dc1e.r2.dev/Final/yellow-lantern-gnome-front-before.jpg" alt="Yellow Lantern Gnome before" loading="lazy">
      </div>
      <div class="divider"></div>
      <div class="handle">
        <span class="arrow left">&#8249;</span>
        <span class="arrow right">&#8250;</span>
      </div>
      <div class="labels">
        <span class="lbl lbl-before">Before</span>
        <span class="lbl lbl-after">After</span>
      </div>
    </div>
    <p class="card-title">Yellow Lantern Gnome</p>
  </div>
  
  <p class="no-results" id="no-results">No pieces match your search.</p>
</div>

<footer style="position:relative;z-index:1;">
  Each piece painted by hand &mdash; Rosey's Trinkets &amp; Treasures<br>
  <a href="https://roseystrinketsandtreasures.com" style="color:var(--rose);text-decoration:none;font-style:italic;">roseystrinketsandtreasures.com</a>
</footer>

<!-- Floating back-to-top: a genuine full-bloom rose (open, layered petals), distinct from the header's closed cottage motif -->
<button id="to-top" aria-label="Back to top" title="Back to top">
  <svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
    <circle cx="26" cy="26" r="25" fill="#FEF6F7" stroke="#ECD9E0" stroke-width="1.5"/>
    <!-- Leaves -->
    <path d="M26 39 C20 38, 15 40, 13 44 C19 45.5, 24 43, 26 40 Z" fill="#8AA898"/>
    <path d="M26 39 C32 38, 37 40, 39 44 C33 45.5, 28 43, 26 40 Z" fill="#8AA898"/>
    <!-- Outer petal ring (6 rounded petals radiating from center) -->
    <g fill="#C0728A">
      <ellipse cx="26" cy="12" rx="6.5" ry="9" transform="rotate(0 26 22)"/>
      <ellipse cx="26" cy="12" rx="6.5" ry="9" transform="rotate(60 26 22)"/>
      <ellipse cx="26" cy="12" rx="6.5" ry="9" transform="rotate(120 26 22)"/>
      <ellipse cx="26" cy="12" rx="6.5" ry="9" transform="rotate(180 26 22)"/>
      <ellipse cx="26" cy="12" rx="6.5" ry="9" transform="rotate(240 26 22)"/>
      <ellipse cx="26" cy="12" rx="6.5" ry="9" transform="rotate(300 26 22)"/>
    </g>
    <!-- Inner petal ring, offset rotation, slightly darker -->
    <g fill="#A55A72">
      <ellipse cx="26" cy="16" rx="4.6" ry="6.4" transform="rotate(30 26 22)"/>
      <ellipse cx="26" cy="16" rx="4.6" ry="6.4" transform="rotate(90 26 22)"/>
      <ellipse cx="26" cy="16" rx="4.6" ry="6.4" transform="rotate(150 26 22)"/>
      <ellipse cx="26" cy="16" rx="4.6" ry="6.4" transform="rotate(210 26 22)"/>
      <ellipse cx="26" cy="16" rx="4.6" ry="6.4" transform="rotate(270 26 22)"/>
      <ellipse cx="26" cy="16" rx="4.6" ry="6.4" transform="rotate(330 26 22)"/>
    </g>
    <!-- Open bloom center -->
    <circle cx="26" cy="22" r="4.5" fill="#9A4A62"/>
    <circle cx="26" cy="22" r="2" fill="#F2D4DC" fill-opacity="0.8"/>
  </svg>
</button>

<script>
  // ── Slider logic ──
  function initSliders() {
    document.querySelectorAll('.slider-wrap').forEach(wrap => {
      const beforeWrap = wrap.querySelector('.img-before-wrap');
      const beforeImg  = wrap.querySelector('.img-before');
      const divider    = wrap.querySelector('.divider');
      const handle     = wrap.querySelector('.handle');
      let dragging = false;

      const SPRITE_COLORS = ['#C0728A','#8AA898','#B899C4','#F2D4DC','#A0C4B8'];
      let lastPct = 50;
      let spriteCooldown = false;

      function spawnSprites(wrapEl, pctNow) {
        if (spriteCooldown) return;
        spriteCooldown = true;
        setTimeout(() => { spriteCooldown = false; }, 60);
        const count = 3 + Math.floor(Math.random() * 3);
        for (let s = 0; s < count; s++) {
          const sprite = document.createElement('div');
          sprite.className = 'sprite';
          const size = 4 + Math.random() * 6;
          const xPct = pctNow + (Math.random() - 0.5) * 6;
          const yPct = 20 + Math.random() * 60;
          const moveDir = pctNow > lastPct ? 1 : -1;
          const tx = (moveDir * (20 + Math.random() * 40)).toFixed(1) + 'px';
          const ty = (-(30 + Math.random() * 50)).toFixed(1) + 'px';
          const dur = (0.9 + Math.random() * 0.7).toFixed(2) + 's';
          const color = SPRITE_COLORS[Math.floor(Math.random() * SPRITE_COLORS.length)];
          sprite.style.cssText = `width:${size}px;height:${size}px;left:${xPct}%;top:${yPct}%;background:${color};box-shadow:0 0 ${size*1.5}px ${color};--tx:${tx};--ty:${ty};--dur:${dur};`;
          wrapEl.appendChild(sprite);
          sprite.addEventListener('animationend', () => sprite.remove());
        }
        lastPct = pctNow;
      }

      // setPos moves the slider and returns the current pct (0–100) so onMove can pass it to spawnSprites
      function setPos(x) {
        const rect = wrap.getBoundingClientRect();
        const fullW = rect.width;
        const pctRaw = Math.max(0, Math.min(1, (x - rect.left) / fullW));
        const pxPct = (pctRaw * 100).toFixed(2) + '%';
        beforeWrap.style.width = pxPct;
        beforeImg.style.width  = fullW + 'px';
        divider.style.left     = pxPct;
        handle.style.left      = pxPct;
        return pctRaw * 100; // 0–100 for spawnSprites
      }

      // Single named handler so we can cleanly remove it on mouseup/touchend
      function onMove(e) {
        const x = e.touches ? e.touches[0].clientX : e.clientX;
        const currentPct = setPos(x);
        spawnSprites(wrap, currentPct); // ← this is what makes the sparkles fire while dragging
      }

      function onUp() {
        dragging = false;
        wrap.classList.remove('dragging');
        window.removeEventListener('mousemove', onMove);
        window.removeEventListener('mouseup', onUp);
        window.removeEventListener('touchmove', onMove);
        window.removeEventListener('touchend', onUp);
      }

      wrap.addEventListener('mousedown', e => {
        e.preventDefault();
        dragging = true;
        wrap.classList.add('dragging');
        setPos(e.clientX);
        window.addEventListener('mousemove', onMove);
        window.addEventListener('mouseup', onUp);
      });

      wrap.addEventListener('touchstart', e => {
        dragging = true;
        wrap.classList.add('dragging');
        setPos(e.touches[0].clientX);
        window.addEventListener('touchmove', onMove, { passive: true });
        window.addEventListener('touchend', onUp);
      }, { passive: true });
    });
  }

  // ── Search logic ──
  const searchInput  = document.getElementById('search');
  const cards        = document.querySelectorAll('.card');
  const noResults    = document.getElementById('no-results');

  searchInput.addEventListener('input', () => {
    const q = searchInput.value.trim().toLowerCase();
    let visible = 0;
    cards.forEach(card => {
      const title = card.querySelector('.card-title')?.textContent.toLowerCase() || '';
      if (!q || title.includes(q)) {
        card.classList.remove('hidden');
        visible++;
      } else {
        card.classList.add('hidden');
      }
    });
    noResults.style.display = visible === 0 ? 'block' : 'none';
  });

  initSliders();

  // ── Idle petal drift + wand cursor ───────────────────────────────────────
  //
  // After 4 seconds of no activity:
  //   1. Cursor is replaced by a wand SVG (body gets class 'wand-mode')
  //   2. Soft petals drift up from the bottom in rose/sage/lavender palette
  //   3. Each petal is clickable — clicking one bursts it into sprites
  //      and ends idle mode, restoring the normal cursor
  //
  // Any mouse/touch/scroll/key activity also ends idle mode immediately.
  // ─────────────────────────────────────────────────────────────────────────

  const PETAL_COLORS = ['#C0728A', '#8AA898', '#D4A0B0', '#B899C4', '#F2D4DC', '#A0C4B8'];

  let idleTimer  = null;
  let petalIval  = null;
  let idleActive = false;

  // ── Wand cursor tracking ──
  const wandEl = document.getElementById('wand-cursor');
  document.addEventListener('mousemove', function(e) {
    wandEl.style.left = e.clientX + 'px';
    wandEl.style.top  = e.clientY + 'px';
  });

  // ── Petal burst (when you click a petal) ──
  function burstPetal(petalEl, cx, cy) {
    // Spawn a quick burst of sprites at the click position
    const burstColors = ['#C0728A','#8AA898','#F2D4DC','#B899C4','#A0C4B8'];
    for (let i = 0; i < 8; i++) {
      const b = document.createElement('div');
      const sz = 4 + Math.random() * 6;
      const angle = (i / 8) * Math.PI * 2;
      const dist  = 20 + Math.random() * 40;
      const tx = Math.cos(angle) * dist;
      const ty = Math.sin(angle) * dist;
      const color = burstColors[Math.floor(Math.random() * burstColors.length)];
      b.className = 'sprite';
      b.style.cssText =
        'position:fixed;border-radius:50%;pointer-events:none;z-index:99999;mix-blend-mode:screen;' +
        'width:' + sz + 'px;height:' + sz + 'px;' +
        'left:' + cx + 'px;top:' + cy + 'px;' +
        'background:' + color + ';' +
        'box-shadow:0 0 ' + (sz*1.5) + 'px ' + color + ';' +
        '--tx:' + tx.toFixed(1) + 'px;--ty:' + ty.toFixed(1) + 'px;--dur:0.7s;' +
        'animation:sprite-drift 0.7s ease-out forwards;';
      document.body.appendChild(b);
      b.addEventListener('animationend', function() { b.remove(); });
    }
    petalEl.remove();
    endIdleMode();
  }

  // ── Spawn one petal ──
  function spawnPetal() {
    const size     = 8 + Math.random() * 14;
    const color    = PETAL_COLORS[Math.floor(Math.random() * PETAL_COLORS.length)];
    const shapeIdx = Math.floor(Math.random() * 3);

    let svgInner;
    if (shapeIdx === 0) {
      svgInner = '<circle cx="' + (size/2) + '" cy="' + (size/2) + '" r="' + (size/2) + '" fill="' + color + '" opacity="0.7"/>';
    } else if (shapeIdx === 1) {
      svgInner = '<ellipse cx="' + (size/2) + '" cy="' + (size*0.55) + '" rx="' + (size*0.38) + '" ry="' + (size*0.45) + '" fill="' + color + '" opacity="0.65"/>';
    } else {
      const angle = Math.random() * 40 - 20;
      svgInner = '<ellipse cx="' + (size/2) + '" cy="' + (size/2) + '" rx="' + (size*0.3) + '" ry="' + (size*0.5) + '" fill="' + color + '" opacity="0.6" transform="rotate(' + angle + ' ' + (size/2) + ' ' + (size/2) + ')"/>';
    }

    const el = document.createElement('div');
    el.className = 'idle-petal';
    const leftVw = 5 + Math.random() * 90;
    el.style.cssText =
      'position:fixed;z-index:9999;' +
      'width:' + size + 'px;height:' + size + 'px;' +
      'left:' + leftVw + 'vw;bottom:-' + (size + 10) + 'px;' +
      (Math.random() < 0.3 ? 'filter:blur(1px);' : '');

    el.innerHTML = '<svg width="' + size + '" height="' + size + '" viewBox="0 0 ' + size + ' ' + size + '" xmlns="http://www.w3.org/2000/svg">' + svgInner + '</svg>';
    document.body.appendChild(el);

    // Click to burst
    el.addEventListener('click', function(e) {
      burstPetal(el, e.clientX, e.clientY);
    });

    const duration = 4000 + Math.random() * 5000;
    const swayX    = (Math.random() - 0.5) * 120;
    const rota     = (Math.random() - 0.5) * 360;
    const startT   = performance.now();
    let alive      = true;

    el._kill = function() { alive = false; el.remove(); };

    function tick(now) {
      if (!alive) return;
      const progress = Math.min((now - startT) / duration, 1);
      const eased = progress < 0.5
        ? 2 * progress * progress
        : -1 + (4 - 2 * progress) * progress;

      const riseY   = eased * (window.innerHeight + size + 40);
      const swayNow = Math.sin(progress * Math.PI * 2) * swayX;
      const opacity = progress < 0.1
        ? progress * 10
        : progress > 0.85
          ? (1 - progress) / 0.15
          : 1;

      el.style.transform = 'translateY(-' + riseY + 'px) translateX(' + swayNow + 'px) rotate(' + (rota * progress) + 'deg)';
      el.style.opacity   = (opacity * 0.75).toFixed(3);

      if (progress < 1) {
        requestAnimationFrame(tick);
      } else {
        el.remove();
      }
    }
    requestAnimationFrame(tick);
  }

  // ── Start / end idle mode ──
  function startIdleMode() {
    if (idleActive) return;
    idleActive = true;
    document.body.classList.add('wand-mode');   // swap cursor to wand
    // Stagger first burst
    spawnPetal();
    setTimeout(spawnPetal, 600);
    setTimeout(spawnPetal, 1300);
    petalIval = setInterval(spawnPetal, 800);
  }

  function endIdleMode() {
    if (!idleActive) return;
    idleActive = false;
    document.body.classList.remove('wand-mode'); // restore normal cursor
    clearInterval(petalIval);
    petalIval = null;
    // Petals in flight keep rising and fade out — no hard remove
  }

  function resetIdleTimer() {
    if (idleActive) endIdleMode();
    clearTimeout(idleTimer);
    idleTimer = setTimeout(startIdleMode, 4000);
  }

  // Only intentional actions (click, scroll, key, touch) end idle and reset timer.
  // mousemove is intentionally excluded — moving the mouse while idle just moves
  // the wand cursor, it does NOT end idle mode or restart the timer.
  ['mousedown', 'touchstart', 'touchmove', 'scroll', 'keydown'].forEach(function(evt) {
    window.addEventListener(evt, resetIdleTimer, { passive: true });
  });

  // mousemove only resets the timer when NOT in idle mode (so the 4s clock
  // restarts if you're actively moving around the page)
  document.addEventListener('mousemove', function() {
    if (!idleActive) resetIdleTimer();
  }, { passive: true });

  // Start the clock on page load
  resetIdleTimer();

  // ── 3-stage slider (Dachshund) ─────────────────────────────────────────────
  // Separate from initSliders() on purpose: it targets .slider3-wrap, not
  // .slider-wrap, so the two-image slider logic that runs every other card is
  // never touched. Two handles; each clamps between its neighbors.
  (function init3Stage() {
    document.querySelectorAll('.slider3-wrap').forEach(wrap => {
      const clip1  = wrap.querySelector('.s3-clip1');   // before (leftmost)
      const clip2  = wrap.querySelector('.s3-clip2');   // fixed  (middle)
      const divA   = wrap.querySelector('.s3-div-a');
      const divB   = wrap.querySelector('.s3-div-b');
      const handA  = wrap.querySelector('.s3-handle-a');
      const handB  = wrap.querySelector('.s3-handle-b');
      const innerImgs = wrap.querySelectorAll('.s3-clip .s3-img');

      let posA = 33.33, posB = 66.66;
      let active = null;

      function sizeInner() {
        const w = wrap.getBoundingClientRect().width;
        innerImgs.forEach(img => { img.style.setProperty('--s3-w', w + 'px'); });
      }
      sizeInner();
      window.addEventListener('resize', sizeInner);

      function apply() {
        clip1.style.width = posA + '%';
        clip2.style.width = posB + '%';
        divA.style.left   = posA + '%';
        divB.style.left   = posB + '%';
        handA.style.left  = posA + '%';
        handB.style.left  = posB + '%';
      }

      function pctFromEvent(e) {
        const rect = wrap.getBoundingClientRect();
        const x = e.touches ? e.touches[0].clientX : e.clientX;
        return Math.max(0, Math.min(100, ((x - rect.left) / rect.width) * 100));
      }

      function onMove(e) {
        if (!active) return;
        let p = pctFromEvent(e);
        if (active === 'a') {
          posA = Math.max(4, Math.min(p, posB - 4));
        } else {
          posB = Math.min(96, Math.max(p, posA + 4));
        }
        apply();
      }
      function onUp() {
        active = null;
        window.removeEventListener('mousemove', onMove);
        window.removeEventListener('mouseup', onUp);
        window.removeEventListener('touchmove', onMove);
        window.removeEventListener('touchend', onUp);
      }
      function startDrag(which) {
        return function(e) {
          e.preventDefault();
          active = which;
          window.addEventListener('mousemove', onMove);
          window.addEventListener('mouseup', onUp);
          window.addEventListener('touchmove', onMove, { passive: false });
          window.addEventListener('touchend', onUp);
        };
      }
      handA.addEventListener('mousedown', startDrag('a'));
      handA.addEventListener('touchstart', startDrag('a'), { passive: false });
      handB.addEventListener('mousedown', startDrag('b'));
      handB.addEventListener('touchstart', startDrag('b'), { passive: false });

      apply();
    });
  })();

  // ── Rose-bud back-to-top ────────────────────────────────────────────────────
  const toTop = document.getElementById('to-top');
  function toTopVisibility() {
    if (window.scrollY > 600) toTop.classList.add('show');
    else toTop.classList.remove('show');
  }
  window.addEventListener('scroll', toTopVisibility, { passive: true });
  toTopVisibility();
  function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); }
  toTop.addEventListener('click', scrollToTop);

</script>
</body>
</html>