.image-placeholder { margin:0; padding:.75rem; color:var(--ink); background:var(--paper); border:1px solid; box-shadow:7px 7px 0 var(--cream); }
.image-placeholder__field { position:relative; min-height:18rem; padding:1.2rem; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; background:var(--cream); border:1px dashed rgba(17,18,15,.65); }
.image-placeholder__field::before,.image-placeholder__field::after { content:""; position:absolute; left:50%; top:50%; width:140%; border-top:1px solid rgba(17,18,15,.16); transform-origin:center; }
.image-placeholder__field::before { transform:translate(-50%,-50%) rotate(24deg); }
.image-placeholder__field::after { transform:translate(-50%,-50%) rotate(-24deg); }
.image-placeholder__field > span { position:relative; z-index:1; width:max-content; padding:.45rem .6rem; color:var(--paper); background:var(--ink); font:500 .5rem var(--mono); text-transform:uppercase; }
.image-placeholder__field > strong { position:relative; z-index:1; max-width:18ch; font-size:clamp(1.8rem,3vw,3.2rem); line-height:.94; letter-spacing:-.055em; }
.image-placeholder__field > i { position:absolute; z-index:1; right:1.2rem; bottom:1.2rem; width:3rem; aspect-ratio:1; border:1px solid; border-radius:50%; }
.image-placeholder__field > i::before,.image-placeholder__field > i::after { content:""; position:absolute; left:50%; top:50%; width:55%; border-top:1px solid; transform:translate(-50%,-50%); }
.image-placeholder__field > i::after { transform:translate(-50%,-50%) rotate(90deg); }
.image-placeholder figcaption { padding-top:.8rem; }
.image-placeholder figcaption > span { display:block; margin-bottom:.65rem; font:500 .5rem var(--mono); text-transform:uppercase; }
.image-placeholder dl { margin:0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid; border-left:1px solid; }
.image-placeholder dl > div { min-width:0; padding:.6rem; border-right:1px solid; border-bottom:1px solid; }
.image-placeholder dt { margin-bottom:.35rem; color:#6d6e67; font:500 .45rem var(--mono); text-transform:uppercase; }
.image-placeholder dd { margin:0; font:.5rem/1.45 var(--mono); }

@media(max-width:640px) {
    .image-placeholder dl { grid-template-columns:1fr 1fr; }
}