.ub_howto-step-image,
.ub_howto-yield-image {
	width: 100%;
	height: auto;
}

.ub_howto-supplies-list,
.ub_howto-tools-list {
	img {
		max-width: 200px;
	}
}

.ub_howto-section-display {
	margin-left: 1em;
}

.ub_howto figcaption {
	margin-top: 5px;
	text-align: center;
}

.ub_howto-step-display .ub_howto-step {
	list-style-position: outside;
}

.ub_howto-step {
	overflow: auto;
	> figure,
	> img {
		margin-bottom: 10px;
	}
}

.ub_howto-yield {
	overflow: auto;
}

@media screen and (max-width: 767px) {
	.ub_howto {
		.ub_howto-steps-list,
		.ub_howto-section .ub_howto-steps-list,
		.ub_howto-step-display,
		.ub_howto-section .ub_howto-step-display {
			.ub_howto-step > figure {
				width: 100%;
				float: none;
			}
		}
	}
}


@media screen and (min-width: 768px) {
	.ub_howto-section-display .ub_howto-section .ub_howto-step {
		figure, .ub_howto-step-image {
			width: var(--ub-howto-image-width);
			padding-left: var(--ub-howto-image-padding-left);
			padding-right: var(--ub-howto-image-padding-right);
			float: var(--ub-howto-image-float);
		}
	}

	.ub_howto-step-display .ub_howto-step {
		figure, .ub_howto-step-image {
			width: var(--ub-howto-image-width);
			padding-left: var(--ub-howto-image-padding-left);
			padding-right: var(--ub-howto-image-padding-right);
			float: var(--ub-howto-image-float);
		}
	}

	.ub_howto-yield {
		.ub_howto-yield-image-container, img {
			width: var(--ub-howto-image-width);
			padding-left: var(--ub-howto-image-padding-left);
			padding-right: var(--ub-howto-image-padding-right);
			float: var(--ub-howto-image-float);
		}
	}
}