커버 레이아웃

<div class="frame">
  <div class="cover" id="cover">
    <header id="chdr">Header</header>
    <div class="centered">Centered</div>
    <footer id="cftr">Footer</footer>
  </div>
</div>

.frame{width:min(58%,200px);height:min(92%,290px);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.12);background:var(--bg)}
.cover{display:flex;flex-direction:column;min-height:100%;padding:10px;gap:0}
.cover header,.cover footer{background:var(--surface);border:1px solid var(--line);border-radius:6px;
  padding:8px;text-align:center;font-size:10px;font-weight:700;color:var(--muted);flex-shrink:0;transition:opacity .4s}
.centered{margin-block:auto;background:var(--accent);color:#fff;border-radius:8px;padding:14px;text-align:center;
  font-size:12px;font-weight:800}

const chdr = document.getElementById('chdr');
const cftr = document.getElementById('cftr');
const states = [
  [true, true],
  [false, true],
  [true, false],
  [false, false],
];
let i = 0;
function apply() {
  const [h, f] = states[i % states.length];
  chdr.style.display = h ? 'block' : 'none';
  cftr.style.display = f ? 'block' : 'none';
  i++;
}
apply();
setInterval(apply, 1700);