/* https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Media_objects */ .mbox { align-items: center; display: flex; flex-direction: row; flex-wrap: nowrap; margin-bottom: 1rem; } .mbox-reply { padding-left: 4ch; } .mbox .mbox-img { align-self: center; flex-basis: 4ch; height: 4ch; margin-right: 1rem; max-width: 4ch; } .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: 96ch; }