Template:Mbox/styles.css

.mbox {
	margin: 0.5rem 0;
	padding: 0 1rem;
	border: 1px solid var(--color-primary1);
	border-radius: 4px;
	display: flex;
	align-items: center;
}

.mbox-image-left {
	margin: 1rem 1rem 1rem 0;
	display: flex;
	flex-direction: column;
}

.mbox-image-right {
	margin: 1rem 0 1rem 1rem;
	display: flex;
	flex-direction: column;
}

.mbox-image-left img, .mbox-image-right img {
	margin: 0.25rem 0;
}

.mbox-body {
	flex: 1;
}

@media screen and (max-width: 750px) {
	.mbox {
		flex-direction: column;
	}
	
	.mbox-image-left {
		flex-direction: row;
		margin: 1rem 1rem 0;
	}
	
	.mbox-image-right {
		flex-direction: row;
		margin: 0 1rem 1rem;
	}
	
	.mbox-image-left img, .mbox-image-right img {
		margin: 0 0.25rem;
	}
}