/*
 * Äußerer Block: nutzt die gesamte verfügbare Breite.
 * Links: 60 % | Rechts: 40 %
 */
.sw-mtm-v3,
.sw-mtm-v3-editor {
	display: grid;
	grid-template-columns: 3fr 2fr;
	width: 100%;
	max-width: 100%;
	gap: 32px;
	align-items: start;
	box-sizing: border-box;
}

.sw-mtm-v3 > .wp-block,
.sw-mtm-v3-editor > .block-editor-inner-blocks {
	min-width: 0;
	width: 100%;
}

.sw-mtm-v3-editor > .block-editor-inner-blocks,
.sw-mtm-v3-editor > .block-editor-inner-blocks > .block-editor-block-list__layout {
	width: 100%;
	max-width: none;
}

.sw-mtm-v3-editor > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 32px;
	align-items: start;
}

.sw-mtm-v3-textbereich,
.sw-mtm-v3-medienbereich {
	min-width: 0;
	width: 100%;
	margin: 0 !important;
	box-sizing: border-box;
}


/*
 * Rechte Seite:
 * Bilder und Texte können beliebig miteinander kombiniert werden.
 */
.sw-mtm-v3-medienbereich > .wp-block-image {
	margin-top: 0;
	margin-bottom: 20px;
}

.sw-mtm-v3-medienbereich > .wp-block-image img {
	display: block;
	max-width: 100%;
	height: auto;
}

.sw-mtm-v3-medienbereich > .wp-block-image:last-child {
	margin-bottom: 0;
}


/*
 * Gutenberg-Editor:
 * Verhindert unerwünschte zusätzliche Breitenbegrenzungen.
 */
.sw-mtm-v3-editor .block-editor-inner-blocks {
	box-sizing: border-box;
}

.sw-mtm-v3-editor .block-editor-block-list__layout {
	box-sizing: border-box;
}


/*
 * Mobil:
 * Rechte Seite (Bilder + Text) zuerst,
 * danach der linke Textbereich.
 */
@media (max-width: 768px) {

	.sw-mtm-v3 {
		display: flex;
		flex-direction: column;
		gap: 25px;
	}

	.sw-mtm-v3-editor > .block-editor-inner-blocks > .block-editor-block-list__layout {
		display: flex;
		flex-direction: column;
		gap: 25px;
	}

	.sw-mtm-v3-editor .sw-mtm-v3-medienbereich {
		order: 1;
	}

	.sw-mtm-v3-editor .sw-mtm-v3-textbereich {
		order: 2;
	}

	.sw-mtm-v3 .sw-mtm-v3-medienbereich {
		order: 1;
	}

	.sw-mtm-v3 .sw-mtm-v3-textbereich {
		order: 2;
	}
}