.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.container .card {
  display: flex;
  position: relative;
  flex-direction: column;
  height: 250px;
  border-radius: 8px;
  margin: auto;
  padding: 40px;
  transition: all 2s ease;
  transform-style: preserve-3d;
  animation: card-isometric 10s infinite;
}
.container .card-layer {
  position: absolute;
  border-radius: 8px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.container .card .bank {
  position: absolute;
  top: 40px;
  right: 40px;
  text-align: right;
  font-size: 2em;
  line-height: 1em;
  transform: translateX(0px) translateY(0px) translateZ(30px);
}
.container .card .chip {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 60px;
  height: 40px;
  border-radius: 8px;
  mask-repeat: no-repeat;
  border: none;
  background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2082.6%2054.2%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23f9e75e%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Ecardchip%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M82.6%2011.7V3.5A3.54%203.54%200%200%200%2079.1%200H56l-4.4%204.4a1.49%201.49%200%200%201-.9.4%201.22%201.22%200%200%201-.9-.4%201.27%201.27%200%200%201%200-1.8L52.4%200H30.2l11.1%2011.2%203.8-3.8a1.27%201.27%200%200%201%201.8%201.8l-4.4%204.4v6.6a1.32%201.32%200%200%201-1.3%201.3H33v11.7h16.4V17.7a1.22%201.22%200%200%201%20.4-.9l4.7-4.7a1.49%201.49%200%200%201%20.9-.4z%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M82.6%2025.9V14.2H56l-4%204v7.7h30.6zM82.6%2040V28.4H52V36l4%204h26.6z%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M55.5%2042.5a1.22%201.22%200%200%201-.9-.4l-4.7-4.7a1.49%201.49%200%200%201-.4-.9v-1.1h-6.9v5.3L56%2054.1h23.1a3.54%203.54%200%200%200%203.5-3.5v-8.2H55.5z%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M30.2%2054.2h22.3L41.3%2043l-3.8%203.8a1.49%201.49%200%200%201-.9.4%201.22%201.22%200%200%201-.9-.4%201.27%201.27%200%200%201%200-1.8l4.4-4.4v-5.3h-6.9v1.1a1.22%201.22%200%200%201-.4.9L28.1%2042a1.49%201.49%200%200%201-.9.4H.1v8.2a3.54%203.54%200%200%200%203.5%203.5h23.1l4.4-4.4a1.27%201.27%200%200%201%201.8%201.8z%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M.1%2028.4V40h26.5l4-4v-7.6H.1zM26.6%2014.2H.1v11.7h30.5v-7.7l-4-4z%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M26.6%200H3.5A3.54%203.54%200%200%200%200%203.5v8.2h27.1a1.22%201.22%200%200%201%20.9.4l4.7%204.7a1.49%201.49%200%200%201%20.4.9v1.1H40v-5.3z%22%2F%3E%3C%2Fsvg%3E");
  transform: translateX(0px) translateY(0px) translateZ(30px);
}
.container .card .number {
  width: 100%;
  text-align: left;
  font-size: 2.19em;
  margin: auto;
  transform: translateX(0px) translateY(0px) translateZ(40px);
}
.container .card .name {
  position: absolute;
  bottom: 24px;
  left: 40px;
  font-size: 1.5em;
  margin-top: 20px;
  transform: translateX(0px) translateY(0px) translateZ(20px);
}
.container .card .expiry {
  position: absolute;
  bottom: 60px;
  left: 40px;
  text-transform: uppercase;
  transform: translateX(0px) translateY(0px) translateZ(20px);
}
.container .card .cvv {
  position: absolute;
  bottom: 60px;
  left: 240px;
  text-transform: uppercase;
  transform: translateX(0px) translateY(0px) translateZ(20px);
}

@keyframes card-isometric {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  50% {
    transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
  }
}
.pattern {
  width: 100%;
  height: 100%;
  --gap: 8em;
  --line: 1px;
  --color: rgba(128, 128, 128, 0.274);
  background-color: rgba(128, 128, 128, 0.137);

  background-image: linear-gradient(
      -90deg,
      transparent calc(var(--gap) - var(--line)),
      var(--color) calc(var(--gap) - var(--line) + 1px),
      var(--color) var(--gap)
    ),
    linear-gradient(
      0deg,
      transparent calc(var(--gap) - var(--line)),
      var(--color) calc(var(--gap) - var(--line) + 1px),
      var(--color) var(--gap)
    );
  background-size: var(--gap) var(--gap);
}
* {
  box-sizing: border-box;
}

.bg-light {
  top: 0;
  left: 0;
  /* width: 100vw; */
  z-index: -1;
  background:
      radial-gradient(circle at bottom left, rgba(173, 216, 230, 0.2) 0%, transparent 50%),
      radial-gradient(circle at bottom right, rgba(173, 216, 230, 0.4) 0%, transparent 50%),
      radial-gradient(circle at bottom center, rgba(255, 192, 203, 0.2) 0%, transparent 50%),
      radial-gradient(circle at bottom, rgba(230, 230, 250, 0.4) 0%, transparent 50%);
  background-repeat: no-repeat;
  background-size: cover;
  /* Scales the background to cover the element */
  background-position: bottom center;
  /* Anchors the background at the bottom */
  background-attachment: fixed;
  /* Keeps the background fixed relative to the viewport */
}