/* https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Media_objects */ .mbox { align-items: center; display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 1rem; } .mbox .mbox-img { align-self: flex-start; flex-basis: 64px; height: 64px; margin-right: 1rem; width: 64px; } .mbox .mbox-header { flex-basis: calc(100% - 64px - 1rem); flex-grow: 0; flex-shrink: 1; margin-top: 0; } .mbox .mbox-body { color: var(--color-accent); flex-basis: calc(100% - 64px - 1rem); flex-grow: 0; flex-shrink: 1; max-width: 84ch; }