/**
 * Mobile Base CSS that should be included on every site as a starting point
 *
 * @package TWI_Base
 */

/*
 * NOTE: `@media Media_Query::Mobile_Only` is the media query for this entire
 * file.
 */

.float-left {
	float: none;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--paragraph-spacing);
}

.float-right {
	float: none;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--paragraph-spacing);
}

/* TODO: Legacy Global Styles will be phased out. */
.gb-image-float-left {
	float: none;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--paragraph-spacing);
}

/* TODO: Legacy Global Styles will be phased out. */
.gb-image-float-right {
	float: none;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--paragraph-spacing);
}

/*
 * TODO: Legacy Global Styles will be phased out
 * (just the .gb-image-float-* parts).
 */
:where(figure,picture):has(:where(.float-left,.float-right,.gb-image-float-left,.gb-image-float-right)) {
	display: block;
	width: 100%;
	text-align: center;
}