<a href="/" class="card-wrapper orange">
          <div class="front">
            <div class="row">
              <p>Credit</p>
              <img src="https://raw.githubusercontent.com/a-giuliano/credit-card-css/master/src/assets/mastercard.png" alt="logo" />
            </div>
            <div class="row">
               <p class="card-number">XXXX</p>
               <p class="card-number">XXXX</p>
               <p class="card-number">XXXX</p>
               <p class="card-number">XXXX</p>
            </div>
            <div class="row">
              <p class="cardholder">Joseph John Doe</p>
              <p class="exp-date">11/25</p>
            </div>
          </div>
          <div class="back">
            <p>Security Code</p>
            <p class="cvv">675</p>
          </div>
        </a>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

html,
body {
  font-family: 'Roboto', sans-serif;
}

:root {
  --font-color: #fff;

  --purple-gradient: linear-gradient(to right bottom, #a460f8, #4c48ff);
  --green-gradient: linear-gradient(to right bottom, #20e3b2, #0bc2c2);
  --orange-gradient: linear-gradient(to right bottom, #f9b523, #ff4e50);
}

.card-wrapper {
  display: block;
  width: fit-content;
  color: var(--font-color);
  text-decoration: none;
  position: relative;
  perspective: 3000px;
  
}

.front,
.back {
  width: 400px;
  height: 200px;
  padding: 20px;
  border-radius: 8px;
  font-size: 1.125rem;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 500ms;
  backface-visibility: hidden;
}

.front {
  justify-content: space-between;
}

.back {
  position: absolute;
  top: 0;
  left: 0;
  justify-content: flex-end;
  align-items: flex-end;
  transform: rotateY(-180deg);
}

.back::before {
  content: '';
  display: block;
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  width: 100%;
  height: 40px;
  background: rgba(0, 0, 0, 0.5);
}

.card-wrapper:hover .front,
.card-wrapper:focus .front {
  transform: rotateY(180deg);
}

.card-wrapper:hover .back,
.card-wrapper:focus .back {
  transform: rotateY(0deg);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-number {
  font-size: 1.75rem;
}

p {
  margin: 0;
  padding: 0;
}

img {
  height: 45px;
}

.purple {
  background: var(--purple-gradient);
}

.green {
  background: var(--green-gradient);
}

.orange {
  background: var(--orange-gradient);
}

// stencil wc article of interest
// https://ionicframework.com/blog/advanced-stencil-component-styling/