.grid-items {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.services-grid .container {
	padding-left: 0;
	padding-right: 0;
}
.services-grid a {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #ffffff;
	text-decoration: none;
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.5;
	transition: all 0.3s ease;
}

.services-grid .grid-item-content {
	background-color: var(--color-brand-blue);
	padding: .75rem 2rem .75rem 1rem;
	clip-path: polygon(0 0, 100% 0%, 90% 100%, 0 100%);
	transition: all 0.3s ease;
}

.services-grid h3, 
.services-grid p {
	color: #ffffff;
	margin: 0;
}

.services-grid h3 {
	font-size: 1.125rem;
	font-weight: 700;
	padding:0;
	transition: all 0.3s ease;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="32" viewBox="0 0 21 32" fill="none"><path d="M9.9561 0L21 16L9.95539 32H0L11.0432 16L0 0H9.9561Z" fill="white"/></svg>');
	background-repeat: no-repeat;
	background-position: -40px center;
	background-size: 21px 32px;
}

.services-grid p {
	font-size: 1rem;
	font-weight: 400;
	margin-bottom: 0;
}

.services-grid a:hover .grid-item-content {
	background-color: var(--color-light-blue);
}

@media (max-width: 767px) {
	.services-grid a {
		background-image: none!important;
	}

	.services-grid a::after {
		content: '';
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: calc(100% + .25rem);
		width: 16px;
		height: 24px;
		background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="24" viewBox="0 0 16 24" fill="none"><path d="M7.5856 0L16 12L7.58506 24H0L8.41385 12L0 0H7.5856Z" fill="%23007FD4"/></svg>');
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}

	.services-grid p {
		display: none;
	}
}

@media (min-width: 768px) {
	.services-grid {
		/* Styles */
		.grid-items {
			gap: 1.5rem;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: stretch;
		}
	}

	.services-grid a {
		aspect-ratio: 1/1;
		overflow: hidden;
		flex: 1 1 calc(50% - 1.5rem);
	}

	.services-grid .grid-item-content {
		padding: 2rem 1rem 1rem;
		background-color: var(--color-brand-blue);
		clip-path: polygon(0 0, 100% 28px, 100% 100%, 0 100%);
		overflow: hidden;
		position: relative;
	}


	.services-grid p {
		max-height: 0;
		margin-top: .5rem;
		overflow: hidden;
		transition: all 0.3s ease;
	}
	.services-grid a:hover p {
		max-height: 3em;
	}
	.services-grid a:hover h3 {
		background-position: 0% center;
		padding-left: 32px;
	}

	.services-grid a:hover .grid-item-content {
		bottom: 0;
	}
}
@media (min-width: 1024px) {
	.services-grid a {
		flex: 0 0 calc(25% - 1.125rem);
	}
}