shelving/ui/block/Image.module.css

Toolkit for using data in JavaScript.

@import "../style/base.css";

@layer components {
	.image,
	.prose img {
		display: block;
		inline-size: var(--image-width, 100%);
		margin-inline: 0;
		margin-block: var(--image-spacing, var(--spacing-paragraph));

		object-position: center center;
		object-fit: cover; /* Don't distort when resized. */
	}
}

@layer overrides {
	.image,
	.prose img {
		&:first-child {
			margin-block-start: 0;
		}
		&:last-child {
			margin-block-end: 0;
		}
	}
}