.smith {
  .tarotCard {
    background-color: none;
    background-size: cover;
    aspect-ratio: 195/332;
    width: 4.2em;
    height: auto;
  }

  .tarotCard:not(.undealt)::before,
  .tarotCard:not(.undealt)::after {
    opacity: 0;
  }

  .tarotCard.facedown {
    display: flex;
    justify-content: center;
    align-items: center;
    background: hsl(35 30% 60%);
    box-shadow: inset 0 0 0.4em hsl(35 30% 30%);
  }

  .tarotCard.facedown::before {
    content: "";
    position: absolute;
    inset: 0.7em 0.3em;
    z-index: 11;
    display: block;
    width: auto;
    height: auto;
    background: none;
    border-width: 2px 0;
    border-style: dotted;
    border-color: hsl(35 30% 40%);
  }

  .tarotCard.facedown::after {
    margin: 0;
    background-image: url("smith/smith.jpg");
    background-size: cover;
    opacity: 0.8;
    outline: 1px solid hsl(35 30% 30%);
    outline-offset: 0.2em;
    box-shadow: 0 0 2px 2px hsl(35 30% 30%);
  }

  #explanation .tarotCard {
    aspect-ratio: unset;
    background-image: none;
  }

  #explanation .tarotCard::before {
    opacity: 1;
  }

  #explanation .tarotCard::after {
    opacity: 1;
  }

  .tarotFool {
    background-image: url("smith/Fool.jpg");
  }
  .tarotMagi {
    background-image: url("smith/Magi.jpg");
  }
  .tarotHigh {
    background-image: url("smith/High.jpg");
  }
  .tarotEmpr {
    background-image: url("smith/Empr.jpg");
  }
  .tarotEmpe {
    background-image: url("smith/Empe.jpg");
  }
  .tarotHier {
    background-image: url("smith/Hier.jpg");
  }
  .tarotLove {
    background-image: url("smith/Love.jpg");
  }
  .tarotChar {
    background-image: url("smith/Char.jpg");
  }
  .tarotStre {
    background-image: url("smith/Stre.jpg");
  }
  .tarotHerm {
    background-image: url("smith/Herm.jpg");
  }
  .tarotWhee {
    background-image: url("smith/Whee.jpg");
  }
  .tarotJust {
    background-image: url("smith/Just.jpg");
  }
  .tarotHang {
    background-image: url("smith/Hang.jpg");
  }
  .tarotDeat {
    background-image: url("smith/Deat.jpg");
  }
  .tarotTemp {
    background-image: url("smith/Temp.jpg");
  }
  .tarotDevi {
    background-image: url("smith/Devi.jpg");
  }
  .tarotTowe {
    background-image: url("smith/Towe.jpg");
  }
  .tarotStar {
    background-image: url("smith/Star.jpg");
  }
  .tarotMoon {
    background-image: url("smith/Moon.jpg");
  }
  .tarotSun {
    background-image: url("smith/Sun.jpg");
  }
  .tarotJudg {
    background-image: url("smith/Judg.jpg");
  }
  .tarotWorl {
    background-image: url("smith/Worl.jpg");
  }
  .tarot1S {
    background-image: url("smith/1S.jpg");
  }
  .tarot2S {
    background-image: url("smith/2S.jpg");
  }
  .tarot3S {
    background-image: url("smith/3S.jpg");
  }
  .tarot4S {
    background-image: url("smith/4S.jpg");
  }
  .tarot5S {
    background-image: url("smith/5S.jpg");
  }
  .tarot6S {
    background-image: url("smith/6S.jpg");
  }
  .tarot7S {
    background-image: url("smith/7S.jpg");
  }
  .tarot8S {
    background-image: url("smith/8S.jpg");
  }
  .tarot9S {
    background-image: url("smith/9S.jpg");
  }
  .tarot10S {
    background-image: url("smith/10S.jpg");
  }
  .tarotPS {
    background-image: url("smith/PS.jpg");
  }
  .tarotTS {
    background-image: url("smith/TS.jpg");
  }
  .tarotQS {
    background-image: url("smith/QS.jpg");
  }
  .tarotKS {
    background-image: url("smith/KS.jpg");
  }
  .tarot1W {
    background-image: url("smith/1W.jpg");
  }
  .tarot2W {
    background-image: url("smith/2W.jpg");
  }
  .tarot3W {
    background-image: url("smith/3W.jpg");
  }
  .tarot4W {
    background-image: url("smith/4W.jpg");
  }
  .tarot5W {
    background-image: url("smith/5W.jpg");
  }
  .tarot6W {
    background-image: url("smith/6W.jpg");
  }
  .tarot7W {
    background-image: url("smith/7W.jpg");
  }
  .tarot8W {
    background-image: url("smith/8W.jpg");
  }
  .tarot9W {
    background-image: url("smith/9W.jpg");
  }
  .tarot10W {
    background-image: url("smith/10W.jpg");
  }
  .tarotPW {
    background-image: url("smith/PW.jpg");
  }
  .tarotTW {
    background-image: url("smith/TW.jpg");
  }
  .tarotQW {
    background-image: url("smith/QW.jpg");
  }
  .tarotKW {
    background-image: url("smith/KW.jpg");
  }
  .tarot1C {
    background-image: url("smith/1C.jpg");
  }
  .tarot2C {
    background-image: url("smith/2C.jpg");
  }
  .tarot3C {
    background-image: url("smith/3C.jpg");
  }
  .tarot4C {
    background-image: url("smith/4C.jpg");
  }
  .tarot5C {
    background-image: url("smith/5C.jpg");
  }
  .tarot6C {
    background-image: url("smith/6C.jpg");
  }
  .tarot7C {
    background-image: url("smith/7C.jpg");
  }
  .tarot8C {
    background-image: url("smith/8C.jpg");
  }
  .tarot9C {
    background-image: url("smith/9C.jpg");
  }
  .tarot10C {
    background-image: url("smith/10C.jpg");
  }
  .tarotPC {
    background-image: url("smith/PC.jpg");
  }
  .tarotTC {
    background-image: url("smith/TC.jpg");
  }
  .tarotQC {
    background-image: url("smith/QC.jpg");
  }
  .tarotKC {
    background-image: url("smith/KC.jpg");
  }
  .tarot1P {
    background-image: url("smith/1P.jpg");
  }
  .tarot2P {
    background-image: url("smith/2P.jpg");
  }
  .tarot3P {
    background-image: url("smith/3P.jpg");
  }
  .tarot4P {
    background-image: url("smith/4P.jpg");
  }
  .tarot5P {
    background-image: url("smith/5P.jpg");
  }
  .tarot6P {
    background-image: url("smith/6P.jpg");
  }
  .tarot7P {
    background-image: url("smith/7P.jpg");
  }
  .tarot8P {
    background-image: url("smith/8P.jpg");
  }
  .tarot9P {
    background-image: url("smith/9P.jpg");
  }
  .tarot10P {
    background-image: url("smith/10P.jpg");
  }
  .tarotPP {
    background-image: url("smith/PP.jpg");
  }
  .tarotTP {
    background-image: url("smith/TP.jpg");
  }
  .tarotQP {
    background-image: url("smith/QP.jpg");
  }
  .tarotKP {
    background-image: url("smith/KP.jpg");
  }
  .tarot {
    background-image: url("smith/.jpg");
  }
}