.service-wrapper {
	font-size: 1rem;
    line-height: 2rem;
	font-weight: 300;
}

.services .service-content {
	background-color: var(--wp--preset--color--light);
}

.service .diamond {
	text-transform: uppercase;
	position: relative;
	font-weight: bold;
	background-color:  var(--wp--preset--color--secondary);
	padding-top: 1rem;
	padding-bottom: 1rem;
}

@media ( min-width: 768px ) {
	.service-wrapper {
		--service-wrapper-height: 291px;
		height: var(--service-wrapper-height);
	}

	.services .diamond {
		width: var(--service-wrapper-height);
		height: var(--service-wrapper-height);
		padding-top: 0;
		padding-bottom: 0;
	}

	.service--odd .service-image,
	.service--even .service-wrapper {
		margin-left: auto;
	}

	.service--even .service-wrapper {
		flex-direction: row-reverse;
	}
}

@media ( min-width: 1024px ) {
	.service-wrapper {
		margin-top: 70px;
	}
    .services .diamond {
		container-type: size;
		width: var(--service-wrapper-height);
		height: var(--service-wrapper-height);
		background-color: transparent;
	}
        
	.services .diamond__inner {
		@apply flex content-center justify-center bg-center bg-no-repeat bg-contain;
		height: 100cqw;
		width: 100%;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 273.76 273.76'%3E%3Cpath d='M40.09 40.09h193.58v193.58H40.09z' style='fill:%23ceb04e;stroke-width:0' transform='rotate(-45 136.879 136.883)'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
	}

	.services .diamond:before {
		content: '';
		background-color: var(--wp--preset--color--light);
		width: 51%;
		height: 100%;
		right: -1%;
		position: absolute;
	}

	.services .service--even .diamond:before {
		left: -1%;
		right: unset;
	}
}