.record-artwork { display: block; object-fit: cover; background: #e9eff4; border-radius: 1rem; }
.record-artwork--cover { width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 22rem; margin-bottom: 1.25rem; }
.record-artwork--thumbnail { width: 4rem; height: 4rem; flex: 0 0 4rem; border-radius: .75rem; }
.record-artwork--preview { width: min(100%, 24rem); aspect-ratio: 16 / 9; margin-bottom: 1rem; }
.record-artwork--placeholder { display: flex; align-items: center; justify-content: center; color: #627b91; background: linear-gradient(135deg, #edf4f8, #d9e8e1); }
.record-artwork--placeholder i { font-size: 1.6rem; }
.learning-card > .record-artwork--cover { max-height: 15rem; }
.artwork-editor .record-artwork { max-width: 100%; }
.hub-circle img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 480px) { .record-artwork--thumbnail { width: 3rem; height: 3rem; flex-basis: 3rem; } }
.row-item:has(> .record-artwork) > .row-main { flex: 1 1 10rem; }
.content-row-main:has(> .record-artwork) { align-items: center; }

.record-artwork[hidden] { display: none; }