.close-modal {
	position: absolute;
	right: 10px;
	top: 6px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	margin: 0;
}

.x-icon:before,
.x-icon:after {
	content: '';
	position: absolute;
	bottom: 50%;
	right: 50%;
	width: 30px;
	height: 5px;
	border-radius: 1px;
	background-color: var(--black);
	transition: background-color 0.1s;
}

.close-modal:hover.x-icon:before,
.close-modal:hover.x-icon:after {
	background-color: var(--primary);
}

.x-icon:before {
	transform: translate(50%, 50%) rotate(-45deg);
}

.x-icon:after {
	transform: translate(50%, 50%) rotate(45deg);
}