.wp-block-coblocks-media-card {

	&__wrapper {
		align-items: center;
		display: grid;
		grid-template-areas: "media-text-media media-text-content";
		grid-template-columns: 55% auto;
		grid-template-rows: auto;
		margin-left: auto;
		margin-right: auto;
		padding: 0 !important;
		position: relative;
	}

	&.is-style-right &__wrapper {
		grid-template-areas: "media-text-content media-text-media";
		grid-template-columns: auto 55%;
	}

	&__inner {
		color: inherit !important;
	}

	&__media {
		grid-area: media-text-media;
		margin: 0;
		position: relative;

		.has-no-media & {
			align-items: center;
			background: $dark-opacity-light-200;
			display: flex;
			height: 70vw;
			justify-content: center;
			margin-bottom: 0;
			margin-top: 0;
			max-height: 600px;

			@include break-small() {
				width: 100%;
			}
		}

		.has-no-media.alignfull &,
		.has-no-media.alignwide & {
			max-height: 700px;
		}

		svg {
			height: 30px;
			opacity: 0.15;
			position: relative;
			top: -30px;
			width: 30px;

			@include break-small() {
				height: 50px;
				width: 50px;
			}
		}
	}

	&__content {
		grid-area: media-text-content;
		margin-left: -50%;
		position: relative;
		word-break: break-word;
		z-index: 1;

		@include break-small() {
			margin-left: -100px;
		}

		p:last-of-type {
			margin-bottom: 0;
		}

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			margin-top: 0 !important;
		}
	}

	&.is-style-right &__content {
		margin-left: 0;
		margin-right: -50%;

		@include break-small() {
			margin-right: -100px;
		}
	}

	&__wrapper > figure > img,
	&__wrapper > figure > video {
		max-width: unset;
		vertical-align: middle;
		width: 100%;
	}

	@include break-small-max() {

		&.is-stacked-on-mobile &__wrapper {
			grid-template-areas: "media-text-media" "media-text-content";
			grid-template-columns: 100% !important;
		}

		&.is-stacked-on-mobile.is-style-right &__content {

			@include break-small() {
				margin-right: -100px;
			}
		}

		&.is-stacked-on-mobile &__media {

			@include break-small() {
				position: inherit;
			}
		}

		&.is-stacked-on-mobile &__content {
			margin-left: 5%;
			margin-right: 5%;
			margin-top: -33%;

			@include break-small() {
				grid-area: media-text-content;
				margin-left: -100px;
			}

			p:last-of-type {
				margin-bottom: 0;
			}
		}
	}
}

// IE 10+ Support
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

	.wp-block-coblocks-media-card {

		.wp-block-coblocks-media-card__wrapper {
			display: flex;

			.wp-block-coblocks-row__inner {
				flex-grow: 1;
			}
		}

		&.is-style-right {

			figure {
				order: 2;
			}

			.wp-block-coblocks-row__inner {
				order: 1;
			}
		}
	}
}

body.rtl {

	.is-style-left {

		.wp-block-coblocks-media-card {

			&__wrapper {
				grid-template-areas: "media-text-content media-text-media" "resizer resizer" !important;
				grid-template-columns: auto 55% !important;

			}

			&__content {
				margin-left: 0;
				margin-right: -100px;

			}
		}
	}

	.is-style-right {

		.wp-block-coblocks-media-card {

			&__wrapper {
				grid-template-areas: "media-text-media media-text-content" "resizer resizer" !important;
				grid-template-columns: 55% auto !important;
			}

			&__content {
				margin-left: -100px;
				margin-right: 0;

			}
		}
	}
}

// Import style tweaks for core WordPress themes
@import "theme";
