.services-popup-wrapper {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(#000, 0.7);
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
	z-index: 999;

	&:not([aria-expanded='true']) {
		opacity: 0;
		visibility: hidden;
	}
}

.services-popup-container {
	width: 100%;
	max-width: $width-desktop;
	max-height: calc(100svh - 166px + 16px);
	padding: calc(16px + 15px) 0 37px;
	margin: 0 auto;
	box-sizing: border-box;
	overflow: auto;
}

.services-popup-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	width: 100%;
	max-width: 602px;
}

.services-popup-grid__item {
	height: 136px;
	padding: 20px;
	border-radius: 32px;
	background-color: $color-white;
	font-weight: 700;
	letter-spacing: -0.03em;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-position: right bottom;

	@include desktop {
		transition:
			color 0.3s ease,
			background-position 0.3s ease;

		&:hover {
			color: $color-green;
			background-position: right -8px bottom -8px;
		}
	}

	&--1 {
		background-size: 141px 121px;
		background-image: url('/images/services-icons/si-1.png');

		@include retina {
			background-image: url('/images/services-icons/si-1@2x.png');
		}
	}

	&--2 {
		background-size: 120px 116px;
		background-image: url('/images/services-icons/si-2.png');

		@include retina {
			background-image: url('/images/services-icons/si-2@2x.png');
		}
	}

	&--3 {
		background-size: 168px 136px;
		background-image: url('/images/services-icons/si-3.png');

		@include retina {
			background-image: url('/images/services-icons/si-3@2x.png');
		}
	}

	&--4 {
		background-size: 146px 130px;
		background-image: url('/images/services-icons/si-4.png');

		@include retina {
			background-image: url('/images/services-icons/si-4@2x.png');
		}
	}

	&--5 {
		background-size: 136px 125px;
		background-image: url('/images/services-icons/si-5.png');

		@include retina {
			background-image: url('/images/services-icons/si-5@2x.png');
		}
	}

	&--6 {
		background-size: 132px 116px;
		background-image: url('/images/services-icons/si-6.png');

		@include retina {
			background-image: url('/images/services-icons/si-6@2x.png');
		}
	}
}