1.flip-card {
2  background-color: transparent;
3  width: 240px;
4  height: 154px;
5  perspective: 1000px;
6}
7
8.heading_8264 {
9  position: absolute;
10  letter-spacing: .2em;
11  font-size: 0.5em;
12  top: 2em;
13  left: 18.6em;
14}
15
16.logo {
17  position: absolute;
18  top: 6.8em;
19  left: 11.7em;
20}
21
22.chip {
23  position: absolute;
24  top: 2.3em;
25  left: 1.5em;
26}
27
28.contactless {
29  position: absolute;
30  top: 3.5em;
31  left: 12.4em;
32}
33
34.number {
35  position: absolute;
36  font-weight: bold;
37  font-size: .6em;
38  top: 8.3em;
39  left: 1.6em;
40}
41
42.valid_thru {
43  position: absolute;
44  font-weight: bold;
45  top: 635.8em;
46  font-size: .01em;
47  left: 140.3em;
48}
49
50.date_8264 {
51  position: absolute;
52  font-weight: bold;
53  font-size: 0.5em;
54  top: 13.6em;
55  left: 3.2em;
56}
57
58.name {
59  position: absolute;
60  font-weight: bold;
61  font-size: 0.5em;
62  top: 16.1em;
63  left: 2em;
64}
65
66.strip {
67  position: absolute;
68  background-color: black;
69  width: 15em;
70  height: 1.5em;
71  top: 2.4em;
72  background: repeating-linear-gradient(
73    45deg,
74    #303030,
75    #303030 10px,
76    #202020 10px,
77    #202020 20px
78  );
79}
80
81.mstrip {
82  position: absolute;
83  background-color: rgb(255, 255, 255);
84  width: 8em;
85  height: 0.8em;
86  top: 5em;
87  left: .8em;
88  border-radius: 2.5px;
89}
90
91.sstrip {
92  position: absolute;
93  background-color: rgb(255, 255, 255);
94  width: 4.1em;
95  height: 0.8em;
96  top: 5em;
97  left: 10em;
98  border-radius: 2.5px;
99}
100
101.code {
102  font-weight: bold;
103  text-align: center;
104  margin: .2em;
105  color: black;
106}
107
108.flip-card-inner {
109  position: relative;
110  width: 100%;
111  height: 100%;
112  text-align: center;
113  transition: transform 0.8s;
114  transform-style: preserve-3d;
115}
116
117.flip-card:hover .flip-card-inner {
118  transform: rotateY(180deg);
119}
120
121.flip-card-front, .flip-card-back {
122  box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
123  position: absolute;
124  display: flex;
125  flex-direction: column;
126  justify-content: center;
127  width: 100%;
128  height: 100%;
129  -webkit-backface-visibility: hidden;
130  backface-visibility: hidden;
131  border-radius: 1rem;
132}
133
134.flip-card-front {
135  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
136  background-color: #171717;
137}
138
139.flip-card-back {
140  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
141  background-color: #171717;
142  transform: rotateY(180deg);
143}