.wp-block-media-text {
	margin-bottom: 2rem;
}

#main .wp-block-media-text__content>*:first-child {
	margin-top: 0;
}

#main .wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content {
	padding-right: 0;
}

#main .has-media-on-the-right .wp-block-media-text__content {
	padding-left: 0;
}

#main .wp-block-media-text__media {
  padding-top: 6%;
  padding-left: 8.7%;
	margin-bottom: 1rem;
	position: relative;
	max-width: 70vw;
  margin-left: auto;
	margin-right: auto;
}

#main .has-media-on-the-right  .wp-block-media-text__media {
	padding-right: 8.7%;
	padding-left: unset;
}

#main .wp-block-media-text__media img {
	border-radius: 50%;
}

.wp-block-media-text__media::before,
.wp-block-media-text__media::after {
	content: '';
	width: 100%;
	aspect-ratio: 392/380;
	background: url('../images/media-wave-before-left.svg');
	background-size: cover;
	position: absolute;
	top: 0;
	right: 0;
}

.wp-block-media-text__media::after {
	background-image: url('../images/media-wave-after-left.svg');
}


.has-media-on-the-right .wp-block-media-text__media::before,
.has-media-on-the-right .wp-block-media-text__media::after {
	left: unset;
	right: 0;
	background-image: url('../images/media-wave-before-right.svg');
}

.has-media-on-the-right .wp-block-media-text__media::after {
	background-image: url('../images/media-wave-after-right.svg');
}


@media (prefers-reduced-motion:no-preference) {
	.wp-block-media-text__media {
		opacity: 0;
		transition: opacity 300ms;
	}

	.js-intersected.wp-block-media-text__media,
	.js-intersected .wp-block-media-text__media {
		opacity: 1;
	}

/* ::before and ::after setup */
	.wp-block-media-text__media::before,
	.wp-block-media-text__media::after {
		transform: rotate(-45deg);
  	opacity: 0;
  	transition: 
    	transform 700ms ease,
    	opacity 700ms ease;
			transition-delay: 300ms;
	}

		.wp-block-media-text__media::after {
			transition-delay: 550ms;
		}

	.has-media-on-the-right .wp-block-media-text__media::before,
	.has-media-on-the-right .wp-block-media-text__media::after {
		transform: rotate(45deg);
	}

/* ::before and ::after triggered */
	.wp-block-media-text__media.js-intersected::before,
	.wp-block-media-text__media.js-intersected::after,
	.js-intersected	.wp-block-media-text__media::before,
	.js-intersected	.wp-block-media-text__media::after {
		transform: rotate(0deg);
  	opacity: 1;
	}
}

@media (min-width: 37.51em) {
	#main .wp-block-media-text__media {
		position: sticky;
		top: 1rem;
	}
}

@media (min-width: 68.5em) {
	.entry-content .wp-block-media-text:not(:last-child) {
		margin-bottom: 4.5rem !important;
	}

	body:has(header.show-sticky) .wp-block-media-text__media {
		top: 4rem;
	}
}