Basket affinity

<div class="affinity"><div class="node a">COFFEE<br>DRIPPER</div><div class="link"><span id="count">2 SHARED ORDERS</span></div><div class="node b">PAPER<br>FILTERS</div><div class="orders">ORDER 01 · A+B<br>ORDER 02 · A+B<br><span id="extra">ORDER 03 · A+B</span></div></div>

.affinity{position:relative;width:min(88%,520px);height:clamp(130px,40vmin,260px);display:flex;align-items:center;justify-content:space-between;font:900 clamp(10px,max(1.6vmin,1vw),14px)/1.2 sans-serif}.node{width:25%;aspect-ratio:1;border:2px solid var(--fg);display:grid;place-items:center;text-align:center;background:var(--surface);z-index:1}.a{box-shadow:5px 5px 0 var(--accent-3)}.b{box-shadow:5px 5px 0 var(--accent)}.link{position:absolute;left:20%;right:20%;top:30%;height:clamp(3px,1vmin,9px);background:var(--accent);transition:height .5s;display:grid;place-items:center}.link span{position:absolute;top:clamp(9px,2vmin,18px);white-space:nowrap;color:var(--accent)}.affinity.more .link{height:clamp(8px,2vmin,16px)}.orders{position:absolute;bottom:0;left:20%;right:20%;text-align:center;color:var(--muted);line-height:1.5;font-size:clamp(10px,max(1.2vmin,1vw),12px)}#extra{opacity:.2;transition:opacity .4s}.affinity.more #extra{opacity:1}

const root=document.querySelector('.affinity'),count=document.querySelector('#count');setTimeout(()=>{root.classList.add('more');count.textContent='3 SHARED ORDERS'},800);setInterval(()=>{root.classList.toggle('more');count.textContent=root.classList.contains('more')?'3 SHARED ORDERS':'2 SHARED ORDERS'},3500);