// For a 'Title, image, content' block
@use "sass:math";

.tic {
	@include clearfix;
	$tic__smallWidth: calc(33% - math.div($grid-gutter-large, 2));
	$tic__fullWidth: calc(50% - math.div($grid-gutter-large, 2));
	$tic__smallWidth-breakpoint: $third-breakpoint;
	$tic__fullWidth-breakpoint: $quart-breakpoint;
	margin: 0 0 $spacing-lg;

	&__title {
		margin-top: 0;
		margin-bottom: $spacing-md;

		> * {
			margin: 0 0 $spacing-xs;
		}

		@media (min-width: $tic__fullWidth-breakpoint) {
			float: left;
			width: $tic__fullWidth;
		}
	}

	&__figure {
		margin: 0 0 $spacing-lg;

		@media (min-width: $tic__smallWidth-breakpoint) {
			float: right;
			clear: right;
			max-width: $tic__smallWidth;
			box-sizing: border-box;
			margin-right: 0;
			margin-top: $spacing-xs;
			margin-left: $grid-gutter-large;
			margin-bottom: $spacing-md;
		}

		@media (min-width: $tic__fullWidth-breakpoint) {
			max-width: $tic__fullWidth;
		}
	}

	&__content {
		clear: left;
	}

	// reversed version

	&--reverse {
		.tic__title {
			@media (min-width: $tic__fullWidth-breakpoint) {
				float: right;
				width: $tic__fullWidth;
			}
		}

		.tic__figure {
			@media (min-width: $tic__smallWidth-breakpoint) {
				float: left;
				clear: none;
				max-width: $tic__smallWidth;
				box-sizing: border-box;
				margin-left: 0;
				margin-top: $spacing-xs;
				margin-right: $grid-gutter-large;
				margin-bottom: $spacing-md;
			}

			@media (min-width: $tic__fullWidth-breakpoint) {
				max-width: $tic__fullWidth;
			}
		}

		.tic__content {
			clear: right;

			@media (min-width: $tic__fullWidth-breakpoint) {
				float: right;
				width: $tic__fullWidth;
			}
		}
	}
}