.illustrated-text {
	display: flex;
	align-items: flex-start;
	
	&:not(&--decorative) {
		@media (max-width: 30em) {
			flex-direction: column-reverse;
		}
	}
}

.illustrated-text__sidebar {
	width: 14em;
	margin-right: 2em;
	
	@media (max-width: 60em) {
		width: 10em;
		margin-right: 1.5em;
	}
	
	@media (max-width: 50em) {
		width: 5em;
		margin-right: 1em;
	}
	
	@media (max-width: 41em) {
		.illustrated-text--decorative & {
			display: none;
		}
	}
	
	@media (max-width: 30em) {
		width: 100%;
		margin-right: 0;
		margin-top: 1em;
	}
	
	* {
		width: 100%;
		display: block;
	}
}

.illustrated-text__main {
	flex: 1;
}