@import "../../../../../../style/CommonStyle.module.less";
@import "../../../../../../style/utils.module.less";

.card {
  .size(@w: 402px, @h: 270px);
  background-image: url("../../../../../../../assets/images/mypagepanel/img-card-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: @COLOR_WHITE;
  border-radius: 12px;
  position: relative;

  .cardKnd {
    .font(@fontFamily: @baseFont, @fontSize: 36px);
    font-weight: bold;
  }

  .cardNo {
    font-size: 24px;
  }

  &:focus {
    &::after {
      .focused(@boxShadow: 22px, @borderRadius: 12px);
    }
  }
}
