슬라이드당 하나의 아이디어

<div class="slide" id="slide">
  <span class="badge" id="badge"></span>
  <div class="grid">
    <div class="card" data-k="0"><span class="ico"></span><span class="t" id="t0"></span></div>
    <div class="card" data-k="1"><span class="ico"></span><span class="t" id="t1"></span></div>
    <div class="card" data-k="2"><span class="ico"></span><span class="t" id="t2"></span></div>
    <div class="card" data-k="3"><span class="ico"></span><span class="t" id="t3"></span></div>
  </div>
</div>

.slide{position:absolute;inset:6%;border-radius:clamp(6px,1.6vmin,14px);background:var(--surface);border:1px solid var(--line);padding:8vmin}
.badge{position:absolute;top:4%;right:4%;z-index:2;font:800 clamp(10px,2.4vmin,14px)/1 system-ui;padding:.3em .7em;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--accent-2)}
.slide.good .badge{color:var(--accent-3)}
.grid{position:relative;height:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6%}
.card{border-radius:10px;background:var(--bg);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8%;transition:all .5s ease;padding:4vmin}
.ico{width:22%;aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-3))}
.t{font:700 clamp(9px,2.2vmin,12px)/1.2 -apple-system,sans-serif;color:var(--fg);text-align:center}
.slide.good .card{opacity:.32;transform:scale(.68)}
.slide.good .card[data-k="0"]{position:absolute;inset:0 0 26% 0;opacity:1;transform:none;border:2px solid var(--accent-3);background:var(--surface)}
.slide.good .card[data-k="0"] .ico{width:24%}
.slide.good .card[data-k="0"] .t{font-size:clamp(12px,3.2vmin,17px)}
.slide.good .card:not([data-k="0"]){position:absolute;bottom:0;width:22%;height:24%}
.slide.good .card[data-k="1"]{left:8%}
.slide.good .card[data-k="2"]{left:39%}
.slide.good .card[data-k="3"]{left:70%}

const el = (id) => document.getElementById(id);
const slide = el('slide');
const L = {
  ko: { badge: ['✕ 4개 뒤섞임', '✓ 1개만 남김'], t: ['매출', '마케팅', '채용', '제품'] },
  en: { badge: ['✕ 4 crammed in', '✓ 1 kept'], t: ['Sales', 'Marketing', 'Hiring', 'Product'] },
};
let n = 0;
function render() {
  const good = n % 2 === 1;
  const lang = n % 4 < 2 ? 'ko' : 'en';
  const t = L[lang];
  slide.classList.toggle('good', good);
  el('badge').textContent = good ? t.badge[1] : t.badge[0];
  t.t.forEach((v, i) => { el('t' + i).textContent = v; });
}
render();
setInterval(() => { n++; render(); }, 2000);