<script>
	export let imageSpec;
	export let direction;
</script>

<section class="direction-card" class:reverse={direction === 'right'}>
	<div class="direction-card__row row my-2">
		<div class="direction-card__media col-md-4">
			<img
				class="img-fluid rounded shadow"
				src={imageSpec.image}
				alt={imageSpec.alt}
				loading="lazy"
				decoding="async"
			/>
		</div>
		<div class="direction-card__content col-md-8 card">
			<slot />
		</div>
	</div>
</section>

<style>
	.direction-card__row {
		align-items: center;
	}

	.direction-card__media {
		max-width: 420px;
		margin-inline: auto;
	}

	@media (min-width: 768px) {
		.direction-card__media {
			max-width: none;
		}

		.reverse .direction-card__media {
			order: 2;
		}

		.reverse .direction-card__content {
			order: 1;
		}
	}

	.direction-card :global(img) {
		max-height: 520px;
		object-fit: cover;
	}
</style>
