.services{
	--widget-gap: clamp(1.6rem, 2vw, 3.2rem);
	gap: var(--widget-gap);
	height: min-content;
}

.services .widget {
	 aspect-ratio: 1;
	 width: 19.2rem;
}

.services .widget__inner{
	padding: calc(var(--site-padding) / 3) 2rem 
}

@media (min-width: 870px) {
	.services .widget__line {
		 background-color: var(--primary);
		 height: 2px;
		 width: calc(var(--widget-gap) - 1.5rem );
		 left: 100%;
		 transform: scaleX(0);
		 transform-origin: left;
		 animation: scale 300ms forwards;
	}
	.services .widget:nth-child(4) .widget__line {
		 width: 2px;
		 height: calc(var(--widget-gap) - 1.5rem )
		 left: unset;
		 top: 100%;
	}
	.services .widget:nth-child(5) .widget__line--2 {
		 left: unset;
		 bottom: calc(100% + 2px);
		 width: 2px;
		 height: calc(var(--widget-gap) - 1.5rem )
	}
	.services .no-animation .widget__line {
		 transform: none;
		 animation: none;
	}
}
 @media (min-width: 1024px) {
	.services .managed-services__container {
		 grid-template-columns: 2fr 1fr;
		 margin-top: -2.4rem;
	}
	.services .managed-services__container__section-1 {
		 grid-column: 2/3;
	}
	.services .managed-services__container__section-2 {
		 grid-row: 1;
	}
	.services .managed-services .widget {
		 width: var(--width);
		 height: var(--width);
		 font-size: calc(var(--width) * 0.08);
	}
}
 

@media (max-width: 1366px) {
	.services .widget__line {
		display: none;	 
	}

	.services .gap {
		--gap: 1.5rem;
		gap: var(--gap);
	}
}