Product feed quality

<div class="feed"><div class="fields"><div>title <b>Canvas tote</b></div><div>material <b id="mat">MISSING</b></div><div>availability <b id="stock">MISSING</b></div></div><div class="arrow">→</div><div class="card"><span class="shape"></span><b>CANVAS TOTE</b><small id="result">CHECK DATA</small></div></div>

.feed{display:flex;align-items:center;justify-content:center;gap:clamp(6px,2vmin,20px);width:94%;font:800 clamp(10px,max(1.6vmin,1vw),14px)/1.2 sans-serif}.fields{width:min(48%,220px);display:grid;gap:clamp(5px,1.3vmin,12px)}.fields>div{display:flex;justify-content:space-between;gap:5px;padding:clamp(5px,1.2vmin,10px);border:1px solid var(--line);color:var(--muted);background:var(--surface)}.fields b{color:var(--fg);text-align:right}.arrow{font-size:clamp(15px,4vmin,35px);color:var(--accent)}.card{width:min(38%,170px);height:clamp(112px,33vmin,220px);border:2px solid var(--fg);background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(5px,1.5vmin,12px);text-align:center}.shape{width:38%;aspect-ratio:1;background:linear-gradient(135deg,var(--accent-3),var(--accent))}.card small{color:var(--accent);font-size:clamp(10px,max(1.2vmin,1vw),12px)}

const m=document.querySelector('#mat'),s=document.querySelector('#stock'),r=document.querySelector('#result');function update(complete){m.textContent=complete?'COTTON':'MISSING';s.textContent=complete?'IN STOCK':'MISSING';r.textContent=complete?'READY TO LIST':'CHECK DATA'}update(false);setTimeout(()=>update(true),500);setInterval(()=>{update(false);setTimeout(()=>update(true),650)},4200);