.cardCanvas {
  position: absolute;
  z-index: 99999;
  outline: none;
  box-sizing: border-box;
  width: max(25vw, 350px);
  height: calc(max(25vw, 350px) * 640 / 460);
  pointer-events: none;
  background-color: #666666;
}

.scrollCardBlank {
  position: absolute;
  z-index: 9999;
  outline: none;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cardFull {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cardUI {
  position: absolute;
  z-index: 99999999;
  outline: none;
  box-sizing: border-box;
  width: max(25vw, 350px);
  height: calc(max(25vw, 350px) * 640 / 460);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  padding: 40px;
  font-size: 16px;
  pointer-events: auto;
}

.cardTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.cardNumber {
  font-weight: 400;
  color: #f2f0ec;
  line-height: 22.4px;
}

.cardChange {
  font-weight: 400;
  color: #f2f0ec;
  line-height: 22.4px;
  text-decoration: underline;
  cursor: pointer;
}

.cardBottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.cardTitle {
  font-weight: 500;
  color: #f2f0ec;
  line-height: 22.4px;
}

.cardDescription {
  font-weight: 400;
  color: #bababa;
  line-height: 22.4px;
}/*# sourceMappingURL=card.css.map */