컨테이너 쿼리

<div class="box" id="box">
  <div class="card">
    <div class="thumb"></div>
    <div class="text"><i class="ln l1"></i><i class="ln l2"></i></div>
  </div>
</div>

.box{width:200px;max-width:92%;height:min(78%,220px);border:2px dashed var(--muted);border-radius:10px;
  padding:10px;container-type:inline-size;transition:width 2.4s cubic-bezier(.4,0,.2,1);overflow:hidden}
.card{height:100%;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column}
.thumb{flex:1;background:linear-gradient(135deg,var(--accent),var(--accent-3));min-height:40%}
.text{padding:10px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.ln{display:block;height:8px;border-radius:3px;background:var(--line)}
.l1{width:70%}.l2{width:46%}
@container (min-width: 340px){
  .card{flex-direction:row}
  .thumb{min-height:100%;width:42%}
  .text{flex:1}
}

const box = document.getElementById('box');
box.style.width = '200px';
let wide = false;
function toggle() {
  wide = !wide;
  box.style.width = wide ? '460px' : '200px';
  setTimeout(toggle, 2600);
}
setTimeout(toggle, 2200);