Как обрезать выступающий контент блока, если блок должен быть со скошенными краями?

Question

[nanny_ogg]

добрый вечер. Имеется такой вид блока

<div class="angled angled-both-right">
				<div class="content">
					<div class="text-wrapper">
						<h2>Для чего нужен организатор или координатор?</h2>
						<div class="text">
							<p>Вы когда-нибудь задумывались над вопросом: чем отличается организатор мероприятия от его координатора? Наверное, нет, потому что обе эти профессии часто совмещаются в одном лице. Организатор, как и следует ожидать, занимается организацией.</p>
						</div>
						<a class="button" href="#">ПОДРОБНЕЕ</a>
					</div>
					<div class="image">
						<img src="images/person_photo.png" alt="">
					</div>
				</div>
			</div>

.angled{
	position: relative;
	width: 100%;
	position: relative;
	background: linear-gradient(to left, #eceaeb 0%, #ebe9ea 100%);
	// overflow: hidden;

	.content{
		display: flex;
		flex-flow: row wrap;
		&.content-reverse{
			flex-direction: row-reverse;
		}
	}
	
	&.angled-both-right{
		height: 520px;
		position: relative;
		width: 100%;
		position: relative;
		background: linear-gradient(to left, #eceaeb 0%, #ebe9ea 100%);
		&:before, &:after{
			content: '';
			width: 100%;
			height: 100%;
			position: absolute;
			background: inherit;
			z-index: -1;
			transition: ease all .5s;
		}
		&:before{
			top: 0;
			transform-origin: left top;
			transform: skewY(-1deg);
		}
		&:after{
			bottom: 0;
			transform-origin: left bottom;
			transform: skewY(1deg);
		}
	}

Блок со скошенными углами, которые я сделала через before и after, все нормально. Проблема в том, что мне нужно, чтобы обрезалась картинка, выступающая за скошенные углы. Сейчас у меня получилось такое

Как можно решить эту проблему?