프레임 레이아웃

<div class="frame-box" id="fb">
  <div class="art"></div>
  <span class="badge" id="badge">16 / 9</span>
</div>

.frame-box{position:relative;width:min(72%,260px);aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);transition:aspect-ratio .9s cubic-bezier(.4,0,.2,1);background:var(--surface)}
.art{position:absolute;top:50%;left:50%;width:260px;height:260px;transform:translate(-50%,-50%);
  background:
    radial-gradient(circle at 50% 50%,transparent 0,transparent 30px,var(--accent) 31px,var(--accent) 46px,transparent 47px,transparent 70px,var(--accent-3) 71px,var(--accent-3) 84px,transparent 85px),
    conic-gradient(from 0deg,var(--accent-2),var(--accent),var(--accent-3),var(--accent-2))}
.badge{position:absolute;right:6px;bottom:6px;font:700 10px/1 ui-monospace,monospace;background:rgba(0,0,0,.55);
  color:#fff;padding:3px 7px;border-radius:4px}

const fb = document.getElementById('fb');
const badge = document.getElementById('badge');
const ratios = [
  ['16 / 9', '16 / 9'],
  ['1 / 1', '1 / 1'],
  ['3 / 4', '3 / 4'],
  ['21 / 9', '21 / 9'],
];
let i = 0;
setInterval(() => {
  const r = ratios[i % ratios.length];
  fb.style.aspectRatio = r[0];
  badge.textContent = r[1];
  i++;
}, 1900);