/**
 * media-text.css
 *
 * Reusable text and media split layout.
 */

.mediaText--body {
	display: grid;
	gap: 2rem;
	align-items: start;
    padding-inline: var(--content-inset);
}

.mediaText--content {
	max-width: 28rem;
}

.mediaText--actions {
	margin: 2rem 0 0;
}

.mediaText--media {
	max-width: 25rem;
	width: 100%;
}

.mediaText--image {
	width: 100%;
	height: auto;
	border-radius: var(--radius-media);
}

@media screen and (min-width: 900px) {
	.mediaText--body {
		grid-template-columns: minmax(0, 28rem) minmax(20rem, 25rem);
		justify-content: space-between;
		gap: 2.75rem;
	}

	.mediaText--media {
		justify-self: end;
	}
}