/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* content: */

.basic-content__content,
.basic-content__content p,
.basic-content__content li,
.basic-content__content blockquote {
	font-weight: 500;
}

.basic-content__content li {
	margin-bottom: 8px;
}

.basic-content__content blockquote {
	margin-left: 8px;
	padding-left: 16px;
	border-left: 2px solid var(--blue-lt);
}

.basic-content__header.section-header {
	margin-bottom: 20px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* buttons: */

.basic-content__buttons {
	margin-top: 20px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* images */

.basic-content__content img,
.basic-content__content .wp-caption {
	max-width: calc(100vw - 80px);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* side image: */

.basic-content--has-image {
	container-type: inline-size;
}

.basic-content--has-image .basic-content__inner {
	display: flex;
	gap: 40px;
	align-items: stretch;
}

.basic-content--image-right .basic-content__inner {
	flex-direction: row-reverse;
}

.basic-content__image {
	position: relative;
	flex: 0 0 40%;
	min-height: 280px;
	border-radius: var(--box-border-radius-sm);
	overflow: hidden;
}

/* absolute so the text column alone sets the row height */
.basic-content__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.basic-content--has-image .basic-content__text {
	flex: 1 1 0;
	min-width: 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* mobile */

@container (max-width: 715px) {
	.basic-content--has-image .basic-content__inner,
	.basic-content--image-right .basic-content__inner {
		flex-direction: column;
		gap: 24px;
	}

	.basic-content__image {
		flex: 0 0 auto;
		width: 100%;
		aspect-ratio: 3 / 2;
		min-height: 220px;
		max-height: 340px;
	}
}