.has-modal {
	cursor: pointer;
}

.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(40 40 40 / 0.95);
	z-index: 10;
}

.modal-img {
	/*margin: auto;*/
	/*display: block;*/
	/*width: 100%;*/
	/*max-width: 100vh;
    max-height: 100vw;*/
	/*object-fit: scale-down;*/
	max-height: 100%;
	max-width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1);
	transition: all 0.5s;
	padding: 10px;
	border: 3px solid var(--color-primary);
	margin: 10px;
}

.before-show {
	transform: translateX(1000%) scale(-10);
	transition: all 0.5s;
}

.close-modal {
	position: absolute;
	background: rgba(255 255 255 / 0.9);
	color: var(--color-primary);
	border-radius: 100%;
	right: 0;
	font-size: 3rem;
	cursor: pointer;
	margin: 3rem;
	line-height: 0;
	padding: 1px;
	transition: all 0.5;
}

.close-modal:hover {
	color: var(--color-primary-dark);
	text-shadow: 0 0 1px var(--color-primary-light);
	background: #fff;
}