// Organism: Text-Image

$o-ti-bp1: 680;

.o-ti {
	@include vspacing(
		'margin-top' 1,
		'margin-bottom' 1
	);

	@include mq($o-ti-bp1) {
		display: flex;
		align-items: flex-start;
	}
}


//@include mq($max: $o-ti-bp1) {
	.o-ti__image {
		max-width: 480px;
		margin: space(4) auto 0;
		clip-path: polygon(28.125% 0%, 0% 100%, 71.875% 100%, 100% 0%);
	}
//}


@include mq($o-ti-bp1) {
	.o-ti__text {
		flex: 0 0 calc(#{column(6.5)});
		margin-right: column(0.5);
	}

	.o-ti__image {
		flex: 0 0 column(5, 12);
		margin-top: 0;
	}


	// Modifier for flipping the 2 blocks when they're beside each other
	.o-ti--reversed {
		flex-direction: row-reverse;

		.o-ti__text {
			margin-left: column(0.5);
			margin-right: 0;
		}
	}

}