.single-expertise {
	position: relative;
	overflow: hidden;
	
	border-radius: 30px;
	
	isolation: isolate;
}
.single-expertise:before {
	content: '';
	display: block;
}
@media (min-width: 900px)	 { .single-expertise:before { padding-top: 60%; } }
@media (max-width: 899.99px) { .single-expertise:before { padding-top: 130%; } }

/*---------------------------------------------------------------*/

.single-expertise > .cover {
	position: absolute; top: 0; left: 0; z-index: -1;
	height: 100%; width: 100%;
}

/*---------------------------------------------------------------*/

.single-expertise > .overlay {
	position: absolute; bottom: 0; left: 0;
	display: flex; width: 100%; max-height: 100%; overflow: hidden;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	row-gap: 5px;
	padding: 50px 25px 25px;
	
	background-image: linear-gradient(to top, rgba(0,0,0,.4) 50%, transparent);
	
	color: #FFF;
}
.single-expertise > .overlay > * {
	max-width: 500px;
	margin: 0;
}

/*---------------------------------------------------------------*/

.single-expertise > .overlay > .title {
	margin: 0;
	
	text-wrap: balance;
	line-height: 100%;
	font-weight: 500;
}
@media(min-width: 900px)	{ .single-expertise > .overlay > .title { font-size: 36px; } }
@media(max-width: 899.99px)	{ .single-expertise > .overlay > .title { font-size: 24px; } }

/*---------------------------------------------------------------*/

.single-expertise > .overlay > .summary {
	display: -webkit-box; overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	margin: 0;
	
	line-height: 130%;
	font-size: 15px;
	font-weight: 500;
	color: #E5E5E5;
}
@media(min-width: 900px)	{ .single-expertise > .overlay > .summary { font-size: 20px; } }
@media(max-width: 899.99px)	{ .single-expertise > .overlay > .summary { font-size: 14px; } }

/*---------------------------------------------------------------*/

.single-expertise > .overlay > .tags {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	column-gap: 5px;
	row-gap: 5px;
	margin-top: 10px;
}
.single-expertise > .overlay > .tags > .tag {
	padding: 0 15px;
	
	background-color: #FCFFAA;
	border-radius: 25px;
	border: solid 1px #000;
	
	white-space: nowrap;
	
	text-align: center;
	line-height: 25px;
	font-size: 12px;
	font-weight: 500;
	color: #000;
}

/*---------------------------------------------------------------*/

.single-expertise > .cta {
	position: absolute; top: 0; right: 0; z-index: 1;
	display: block; height: 100%; width: 100%;
	padding: 25px;
	
	text-align: right;
	
	pointer-events: auto;
	
	--btn-color-background: #1C3558;
	--btn-color-text: #FFF;
}