.wp-block-media-text {
	display: grid;
	grid-template-areas: "media content";
	grid-template-columns: 1fr 1fr;
	gap: 1rem;

	&.has-media-on-the-right {
		grid-template-areas: "content media";
	}

	.wp-block-media-text__media {
		grid-area: media;
		padding: 0;
	}

	.wp-block-media-text__content {
		grid-area: content;
		margin-block-start: 0;
	}

	&.is-style-default {
		grid-template-areas: "media content";
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
		width: 100%;

		@media (width <= 767px) {
			grid-template-areas: "content" "media";
		}

		&.has-media-on-the-right {
			grid-template-areas: "content media";
		}

		&.is-stacked-on-mobile {
			@media (width <= 767px) {
				grid-template-areas: "content" "media";
				grid-template-columns: 1fr !important;
			}
		}
	}

	&.is-style-flow {
		grid-template-columns: 1fr 1.5fr;
		width: 100%;
		padding: 0;

		@media (width <= 767px) {
			grid-template-columns: 1fr;
			gap: 0;
			max-width: 100%;
		}

		&.has-media-on-the-right {
			grid-template-columns: 1.5fr 1fr;

			@media (width <= 767px) {
				grid-template-areas: "media" "content";
				grid-template-columns: 1fr;
				gap: 1rem;
			}

			.wp-block-media-text__media {
				@media (width <= 767px) {
					grid-row: 1;
				}
			}

			.wp-block-media-text__content {
				@media (width <= 767px) {
					grid-row: 2;
				}
			}
		}

		.wp-block-media-text__media {
			padding: 0;

			img {
				width: 100%;
			}
		}

		.wp-block-media-text__content {
			margin-block-start: 0;
		}
	}
}