.wrapper {
  @apply box-border rounded-customerCard relative flex flex-col;
  width: 421px;
  height: 266px;
  margin-bottom: 42px;
  box-shadow: 0px 21px 64px 0px #4e4e4e;
  perspective: 1000px;
}

ui-icon {
  color: #f70400;
}

.icons {
  @apply absolute;
  right: 21px;
  top: 19px;
}

.headline {
  @apply text-wild-blue-yonder mt-px-15 text-sm font-bold;
}

.card-number,
.points {
  @apply text-white -mt-px-15 font-bold;
  font-size: 3.5rem;
}

.card-number {
  @apply -mt-px-10 text-4xl;
}

.button {
  @apply border-none outline-none bg-brand text-white font-bold text-cta-l px-px-25 py-px-15 rounded-full mt-px-15;
}

.barcode-field {
  @apply bg-white mt-px-10 box-border;
  width: 201px;
  height: 80px;
}

.barcode {
  @apply mt-px-15;
}

.barcode-button {
  @apply box-border w-full flex flex-col items-center justify-items-center;
}

.customer-name {
  @apply w-full text-left font-bold ml-px-20;
}

.logo {
  @apply w-full text-right;
  margin-top: 13px;
  margin-right: 16px;
  margin-bottom: 14px;
}

.logo-picture {
  width: 101px;
  height: 22px;
}

.card-main {
  @apply box-border rounded-t-customerCard flex flex-col bg-onyx;
  width: 421px;
  height: 217px;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.card-bottom {
  @apply box-border rounded-b-customerCard flex flex-row items-center text-black;
  width: 421px;
  height: 49px;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.icon-barcode,
.icon-back {
  @apply bg-transparent border-none outline-none;
}
