body {
  background-image: radial-gradient(var(--font-color) 0.6000000000000001px, var(--background-color) 0.6000000000000001px);
  background-size: 15px 15px;
}


.card {
  --border-radius: 12px;
  --border-color: #fff4;
  --hover-size: 18rem;
  transition: 0.3s ease-out;
  border-radius: var(--border-radius, 12px);
  position: relative;
  color: var(--font-color);
}

.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.card, .card * {
  box-sizing: border-box;
  max-width: 30rem;
}

.card > .back {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border-radius: inherit;
  contain: content;
  z-index: -1;
}
.card > .back > div {
  transition: 0.2s ease-out;
  opacity: 0;
  width: var(--hover-size, 12rem);
  height: var(--hover-size, 12rem);
  border-radius: 50%;
  filter: blur(calc(var(--hover-size, 12rem) / 1.4));
  background: var(--main-element, #4DA3FF);
}
.card:hover > .back div {
  opacity: 1;
}