.roleslist--section {
	position: relative;
}

.roleslist--container {
	padding: 30px;
}

body .roleslist--list {
	margin-bottom: 30px;
}

@media (min-width: 992px) {
	.roleslist--container {
		padding: 60px 30px;
		min-height: calc((50vw - 60px) * 1.6);
	}
	
	.roleslist--image {
		position: absolute;
		bottom: 0;
		right: 0;
		width: calc(50vw - 60px);
		height: calc((50vw - 60px) * 1.6);
		clip-path: polygon(8% 29%, 41% 6%, 100% 0, 100% 100%, 10% 100%, 0 74%);
	}
	
	.roleslist--list {
		max-width: 55vw;
		position: relative;
		z-index: 1;
	}
}

@media (min-width: 1200px) {
	
	.roleslist--container {
		min-height: 720px;
	}
	
	.roleslist--image {
		width: 450px;
		height: 720px;
	}
	
	.roleslist--list {
		columns: 3;
		column-gap: 30px;
	}
	
	.roleslist--item {
		break-inside: avoid;
	}
}

@media (min-width: 1200px) {
	.roleslist--list-col {
        flex: 0 0 80%;
        max-width: 80%;
	}
}