mgkHover.css

:root {
	--bg-color: #070606;
	--card-color: rgb(31, 31, 31);
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bg-color);
	margin: 0px;
	padding: 0px;
}

#cards {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 921px;
	width: calc(100% - 20px);
	margin: 10px;
}

#cards:hover > .card > .card-border {
	opacity: 1;
}

.card {
	background-color:rgba(255, 255, 255, 0.12);
	/* border: 1px solid rgba(255, 255, 255, 0.1); */
	border-radius: 10px;
	cursor: pointer;
	box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 12px;
	height: 260px;
	width: 300px;
	position: relative;
}

.card:hover::before {
	opacity: 1;
}

.card::before, .card > .card-border {
	content: "";
	border-radius: inherit;
	height: 100%;
	left: 0px;
	opacity: 0;
	position: absolute;
	top: 0px;
	transition: opacity 500ms;
	width: 100%;
	z-index: 2;
}

.card::before {
	background: radial-gradient(400px circle at var(--mouse-x) var(--mouse-y),rgba(255,255,255,0.06),transparent 40%);
	z-index: 3;
}

.card > .card-border {
	background: radial-gradient(400px circle at var(--mouse-x) var(--mouse-y),rgba(255,255,255,0.3),transparent 40%);
	z-index: 1;
}

.card > .card-content {
	background-color: var(--card-color);
	border-radius: inherit;
	height: calc(100% - 2px);
	width: calc(100% - 2px);
	position: relative;
	margin: 1px;
	z-index: 2;
}

@media screen and (max-width: 992px) {	
	#cards {
		gap: 4px;
	}

	.card {
		border-radius: 8px;
		height: 200px;
		width: 260px;
	}
}