.gcard { position: relative; aspect-ratio: 181 / 241; width: var(--gw, 100%); flex: none; isolation: isolate; overflow: hidden; }
.gcard > img { position: absolute; display: block; }
.gcard .gc-back, .gcard .gc-front, .gcard .gc-por { inset: 0; width: 100%; height: 100%; }
.gcard .gc-por { object-fit: cover; object-position: 50% 30%; }

.gcard .gc-race { left: 12.7%; top: 9.4%; width: 21%; height: auto; transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.gcard .gc-lvl { position: absolute; left: 1%; bottom: 2.5%; width: 42%; aspect-ratio: 72 / 38; background-size: 100% 100%;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: clamp(8px, calc(var(--gw-px, 180px) * 0.075), 14px);
  text-shadow: 0 1px 2px rgba(0,0,0,.9); line-height: 1; padding-top: 6%; }
.gcard.dim .gc-por, .gcard.dim .gc-back { filter: grayscale(.9) brightness(.6); }
.gcard.dim .gc-front { filter: grayscale(.7) brightness(.8); }