Product recommendations

<div class="recommend"><div class="focus"><small>VIEWING</small><b id="focus">DESK LAMP</b></div><div class="lines">↘<br>→</div><div class="suggest"><small>YOU MAY ALSO NEED</small><div><span id="r1">LIGHT BULB</span><span id="r2">CABLE CLIP</span></div></div></div>

.recommend{display:flex;align-items:center;gap:clamp(4px,2vmin,18px);width:min(90%,520px);font:900 clamp(10px,max(1.6vmin,1vw),14px)/1.2 sans-serif}.focus{width:37%;height:clamp(110px,32vmin,210px);background:var(--accent);color:white;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(10px,2vmin,20px);box-sizing:border-box}.focus b{font-size:clamp(14px,3.5vmin,30px)}.lines{color:var(--accent);font-size:clamp(17px,4vmin,32px);line-height:2;animation:point 2s infinite}.suggest{flex:1;display:grid;gap:clamp(7px,2vmin,18px)}.suggest small{color:var(--muted)}.suggest div{display:grid;gap:clamp(6px,1.5vmin,12px)}.suggest span{padding:clamp(7px,1.5vmin,13px);border:2px solid var(--line);background:var(--surface);transition:.3s}@keyframes point{50%{transform:translateX(6px)}}small{font-size:max(.833em,10px,1vw)}

const f=document.querySelector('#focus'),a=document.querySelector('#r1'),b=document.querySelector('#r2');const sets=[['DESK LAMP','LIGHT BULB','CABLE CLIP'],['COFFEE DRIPPER','PAPER FILTER','GLASS SERVER']];let i=0;function render(){const s=sets[i];f.textContent=s[0];a.textContent=s[1];b.textContent=s[2]}setTimeout(()=>{i=1;render()},850);setInterval(()=>{i=1-i;render()},3400);