.card {
  height: calc(8 * 4rem);
  width: calc(12 * 4rem);
  background: linear-gradient(120deg, #ff8064, #725bdc);
  color: black;
  border-radius: calc(0.5 * 4rem);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4rem;

  position: fixed;
  margin: calc(2 * 4rem) calc(5 * 4rem) calc(5 * 4rem)
  calc(5 * 4rem);
}
footer {
  z-index: 500;
  width: 100%;
  height: 550px;
  justify-content: space-evenly;
  align-items: flex-end;
  position: relative;
}

footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(0, 0, 0, 0) 5%,
    rgba(0, 0, 0, 0.3) 20%,
    rgba(0, 0, 0, 0.6) 30%,
    rgba(0, 0, 0, 0.8) 40%,
    rgba(0, 0, 0, 1) 50%,
    rgb(0, 0, 0)
  );
  z-index: -7;
}

.backdrop {
  z-index: -5;
  position: absolute;
  inset: 0;

  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);

  mask-image: linear-gradient(
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.5) 10%,
    rgba(0, 0, 0, 0.8) 20%,
    rgba(0, 0, 0, 1) 30%,
    rgb(0, 0, 0)
  );

  -webkit-mask-image: linear-gradient(
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.5) 10%,
    rgba(0, 0, 0, 0.8) 20%,
    rgba(0, 0, 0, 1) 30%,
    rgb(0, 0, 0)
  );
}

.card-box {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: calc(0.3 * 4rem) calc(0.8 * 4rem);
  background-color: #121212;
  border-radius: calc(0.5 * 4rem);
}
