/* A single card body. Artwork contains no baked border, chip or logos. */
.card-rig {
  --card-depth: 4px;
  --light-x: 28%;
  --light-y: 12%;
  --specular: .14;
  aspect-ratio: 85.6 / 53.98;
}
.card-face, .card-back, .card-edge {
  border-radius: 3.72% / 5.9%;
}
.card-edge {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(128deg, #9cb8ba, #344d60 20%, #101e29 49%, #588080 74%, #152a34);
  transform: translateZ(calc(var(--card-depth) * var(--layer)));
}
.card-face {
  transform: translateZ(calc(var(--card-depth) * .5));
  transform-style: flat;
  background: #071324;
  box-shadow: 0 26px 36px -20px #0009;
}
.card-surface {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: saturate(.86);
  border-radius: inherit;
}
.linkpay .card-surface { filter: hue-rotate(31deg) saturate(.67); }
.card-brand {
  left: 8.5%;
  top: 10.5%;
  width: 30.5%;
  filter: none;
}
.card-chip {
  position: absolute;
  left: 9%;
  top: 41%;
  width: 13.6%;
  height: auto;
  filter: drop-shadow(0 .6px .5px #000b);
}
.card-contactless {
  position: absolute;
  left: 26%;
  top: 43%;
  width: 3.4%;
  opacity: .8;
}
.card-network {
  position: absolute;
  right: 8.5%;
  bottom: 9%;
  width: 17%;
  height: auto;
}
.card-network.mastercard { width: 13%; bottom: 8.5%; }
.card-sheen {
  inset: 0;
  background:
    radial-gradient(ellipse at var(--light-x) var(--light-y), #e2efff 0%, #a5cbe659 26%, transparent 64%);
  background-size: 100% 100%;
  opacity: var(--specular);
  box-shadow: none;
}
.card-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset .65px .8px .3px #dcf6ff73, inset -.7px -.8px .3px #3c869858;
  pointer-events: none;
}
.card-back {
  transform: rotateY(180deg) translateZ(calc(var(--card-depth) * .5));
  border: 0;
  filter: none;
  background:
    radial-gradient(ellipse at 85% 0, #41658055, transparent 65%),
    linear-gradient(130deg, #142736, #0c1b28);
  box-shadow: inset .6px .8px #bfd8dc70, inset -.6px -.8px #6a929651;
}
.linkpay .card-back {
  background:
    radial-gradient(ellipse at 85% 0, #68598855, transparent 65%),
    linear-gradient(130deg, #28253c, #121b2a);
}
.back-row {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.back-row strong { font-size: clamp(14px, 1.3vw, 23px); }
.back-row small { font-size: clamp(8px, .83vw, 14px); color: #b6cacc; }
.back-bottom { margin-top: 0; padding-top: 4%; }
.folio-caption { color: #b0c7c8; }
.folio-focus { color: #8dada9; }
.card-illustration-note { color: #8ba5a8; font-size: 9px; }
.card-shadow { transform: translate3d(0, 22px, -18px); opacity: .55; }
@media (max-width: 800px) {
  .back-row strong { font-size: 12px; }
  .back-row small { font-size: 7px; line-height: 1.3; }
  .back-bottom { padding-top: 2%; }
  .card-illustration-note { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .card-edge { display: none; }
  .card-face { transform: none; }
}