*,
*::before,
*::after {
	box-sizing: border-box;
}

:host {
	display: block;
}

.media-text {
	padding-block: var(--g-spacing-3xl);
	padding-inline: var(--g-spacing-md);
}

.media-text__container {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--g-spacing-3xl);
	align-items: center;
}

:host([reverse]) .media-text__container {
	direction: rtl;
}

:host([reverse]) .media-text__content,
:host([reverse]) .media-text__media {
	direction: ltr;
}

@media (max-width: 768px) {
	.media-text__container {
		grid-template-columns: 1fr;
		gap: var(--g-spacing-xl);
		direction: ltr;
	}
}

.media-text__image,
.media-text__video {
	inline-size: 100%;
	block-size: auto;
	display: block;
	border-radius: var(--g-border-radius-md, 0.5rem);
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.media-text__content {
	display: flex;
	flex-direction: column;
	gap: var(--g-spacing-lg);
}

.media-text__title {
	margin: 0;
	font: var(--g-typography-h4-font);
	color: var(--g-color-content-default);
}

.media-text__text {
	margin: 0;
	font: var(--g-typography-body-lg);
	color: var(--g-color-content-subtle);
}