.services {
	position: relative;
	z-index: 1;
	padding-top: 40px;
	padding-bottom: 17px;
}

.services:before {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	pointer-events: none;
	background: linear-gradient(116.03deg, rgba(37, 86, 103, 0.95) 40.91%, rgba(37, 86, 103, 0.1) 64.08%);
}

.services-info {
	position: relative;
	z-index: 1;
	max-width: 724px;
}

.services .sub-title {
	margin-bottom: 5px;
}

.services h2 {
	font-size: 3.125rem;
	line-height: 1.1;
	margin-bottom: 36px;
	color: var(--color-white);
}

.services-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.services-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.services-links a {
	display: block;
	padding: 17px 21px;
	font-size: 1.125rem;
	font-weight: 700;
	margin-bottom: 16px;
	text-decoration: none;
	color: var(--color-alternate);
	background-color: var(--color-white);
	border-left: 8px solid var(--color-secondary);
}

.services-links a:focus,
.services-links a:hover {
	background-color: var(--color-secondary);
}

@media screen and (min-width: 768px) {
	.services {
		padding-top: 100px;
		padding-bottom: 112px;
	}

	.services .sub-title {
		margin-bottom: 22px;
	}

	.services h2 {
		font-size: 3.75rem;
		line-height: 1;
		margin-bottom: 29px;
	}

	.services-links {
		display: grid;
		grid-column-gap: 26px;
		grid-template-columns: repeat(2, 1fr);
	}
}