.expertise {
	list-style: none;
	margin: 0;
	padding: 0;
	
	color: #FFF;
}
.expertise > .field {
	position: relative;
	overflow: hidden;
	
	box-shadow: 0px 0px 8px rgba(0,0,0,.25);
	
	isolation: isolate;
}
.expertise > .field:after {
	content: '';
	position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2;

	background-color: #000;

	opacity: 0;
	pointer-events: none;
}
.loaded .expertise > .field:after { transition: opacity .2s ease-out; }
.expertise > .field:hover:after { opacity: .4; }
.expertise > .field > .background {
	position: absolute; top: 0; left: 0; z-index: 1;
	height: 100%; width: 100%;
}
.expertise > .field > .background > img {
	display: block; height: 100%; width: 100%;
	object-fit: cover;
	object-position: center;
}
.expertise > .field > .name {
	position: relative; z-index: 4;
	display: flex; height: 100%; width: 100%;
	flex-direction: column;
	justify-content: center;
	
	text-align: center;
	font-weight: 700;
}

@media (min-width: 900px) {
	.expertise > .field {
		height: 475px;
		border-radius: 30px;
	}
	.expertise > .field:not(:last-child) {
		padding-bottom: 100px;
		margin-bottom: -100px;
	}
	.expertise > .field:before {
		content: '';
		position: absolute; top: 50px; right: 50px; transform: rotate(-45deg); z-index: 3;
		display: block; height: 50px; width: 50px;

		background-color: #FFF;
		
		-webkit-mask-image: url("../../images/icons/handle.svg");
		mask-image: url("../../images/icons/handle.svg");
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-size: 80%;
		mask-size: 80%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
	}
	.loaded .expertise > .field:before {
		transition:
			background-color .2s ease-out,
			transform		 .2s ease-out;
	}
	.expertise > .field:hover:before {
		transform: rotate(0deg);
		background-color: var(--off-color);
	}
	.expertise > .field > .name {
		padding: 50px;
		font-size: 50px;
	}
}
@media (max-width: 899.99px) {
	.expertise > .field {
		height: 275px;
		border-radius: 10px;
	}
	.expertise > .field:not(:last-child) {
		padding-bottom: 80px;
		margin-bottom: -80px;
	}
	.expertise > .field > .name {
		padding: 25px;
		font-size: 30px;
	}
}