* {
  box-sizing: border-box;
}

@font-face {
    font-family: 'Dark Potion 27';
    src: url('/Dark\ Potion\ 27.ttf');
}

.card {
  width: 517px;
  height: 517px;
  perspective: 1000px;
  margin: 50 auto;
}

.card__inner {
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  position: relative;
  cursor: pointer;
}

.card__inner.is-flipped {
  transform: rotateY(180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.card__face--cover {
  background-size: cover;
  background-position: center;
  background-image: url('/deck/images/square/038.jpg');
  border: solid 3px;
  border-color: white;
}

.card__face--reveal {
    border: solid 3px;
    border-color: white;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: left;
  padding-bottom: 40px;
  background-size: cover;
  background-position: center;
  transform: rotateY(180deg);
}

/* Position text elements */
.card-text::after,
.card-suit::after {
  color: white;
  background-color: black;
  border: solid 3px;
  border-color: white;
  border-radius: 6px;
  padding: 10px;
  font-family: 'Dark Potion 27';
}

.card-text::after {
  position: absolute;
  font-size: 2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Dark Potion 27';
}

.card-suit::after {
  top: 91.5%;
  font-size: 1.5rem;
}

.card-001 .card__face--reveal {
  background-image: url("/deck/images/square/001.jpg");
}
.card-001 .card-text::after {
  content: "Kick";
}
.card-001 .card-suit::after {
  content: "Drum";
}

.card-002 .card__face--reveal {
  background-image: url("/deck/images/square/002.jpg");
}
.card-002 .card-text::after {
  content: "Snare";
}
.card-002 .card-suit::after {
  content: "Drum";
}

.card-003 .card__face--reveal {
  background-image: url("/deck/images/square/003.jpg");
}
.card-003 .card-text::after {
  content: "Tom";
}
.card-003 .card-suit::after {
  content: "Drum";
}

.card-004 .card__face--reveal {
  background-image: url("/deck/images/square/004.jpg");
}
.card-004 .card-text::after {
  content: "Clap";
}
.card-004 .card-suit::after {
  content: "Drum";
}

.card-005 .card__face--reveal {
  background-image: url("/deck/images/square/005.jpg");
}
.card-005 .card-text::after {
  content: "Hi-Hat";
}
.card-005 .card-suit::after {
  content: "Cymbal";
}

.card-006 .card__face--reveal {
  background-image: url("/deck/images/square/006.jpg");
}
.card-006 .card-text::after {
  content: "Open-Hat";
}
.card-006 .card-suit::after {
  content: "Cymbal";
}

.card-007 .card__face--reveal {
  background-image: url("/deck/images/square/007.jpg");
}
.card-007 .card-text::after {
  content: "Crash";
}
.card-007 .card-suit::after {
  content: "Cymbal";
}

.card-008 .card__face--reveal {
  background-image: url("/deck/images/square/008.jpg");
}
.card-008 .card-text::after {
  content: "Ride";
}
.card-008 .card-suit::after {
  content: "Cymbal";
}

.card-009 .card__face--reveal {
  background-image: url("/deck/images/square/009.jpg");
}
.card-009 .card-text::after {
  content: "Mineral";
}
.card-009 .card-suit::after {
  content: "Aux Perc";
}

.card-010 .card__face--reveal {
  background-image: url("/deck/images/square/010.jpg");
}
.card-010 .card-text::after {
  content: "Plant";
}
.card-010 .card-suit::after {
  content: "Aux Perc";
}

.card-011 .card__face--reveal {
  background-image: url("/deck/images/square/011.jpg");
}
.card-011 .card-text::after {
  content: "Creature";
}
.card-011 .card-suit::after {
  content: "Aux Perc";
}

.card-012 .card__face--reveal {
  background-image: url("/deck/images/square/012.jpg");
}
.card-012 .card-text::after {
  content: "Elec";
}
.card-012 .card-suit::after {
  content: "Aux Perc";
}

.card-013 .card__face--reveal {
  background-image: url("/deck/images/square/013.jpg");
}
.card-013 .card-text::after {
  content: "Strings";
}
.card-013 .card-suit::after {
  content: "String";
}

.card-014 .card__face--reveal {
  background-image: url("/deck/images/square/014.jpg");
}
.card-014 .card-text::after {
  content: "Aco Guitar";
}
.card-014 .card-suit::after {
  content: "String";
}

.card-015 .card__face--reveal {
  background-image: url("/deck/images/square/015.jpg");
}
.card-015 .card-text::after {
  content: "Elec Guitar";
}
.card-015 .card-suit::after {
  content: "String";
}

.card-016 .card__face--reveal {
  background-image: url("/deck/images/square/016.jpg");
}
.card-016 .card-text::after {
  content: "Woodwind";
}
.card-016 .card-suit::after {
  content: "Wind";
}

.card-017 .card__face--reveal {
  background-image: url("/deck/images/square/017.jpg");
}
.card-017 .card-text::after {
  content: "Brass";
}
.card-017 .card-suit::after {
  content: "Wind";
}

.card-018 .card__face--reveal {
  background-image: url("/deck/images/square/018.jpg");
}
.card-018 .card-text::after {
  content: "Vocal";
}
.card-018 .card-suit::after {
  content: "Wind";
}

.card-019 .card__face--reveal {
  background-image: url("/deck/images/square/019.jpg");
}
.card-019 .card-text::after {
  content: "Aco Piano";
}
.card-019 .card-suit::after {
  content: "Keys";
}

.card-020 .card__face--reveal {
  background-image: url("/deck/images/square/020.jpg");
}
.card-020 .card-text::after {
  content: "Elec Piano";
}
.card-020 .card-suit::after {
  content: "Keys";
}

.card-021 .card__face--reveal {
  background-image: url("/deck/images/square/021.jpg");
}
.card-021 .card-text::after {
  content: "Organ";
}
.card-021 .card-suit::after {
  content: "Keys";
}

.card-022 .card__face--reveal {
  background-image: url("/deck/images/square/022.jpg");
}
.card-022 .card-text::after {
  content: "Bass";
}
.card-022 .card-suit::after {
  content: "Other";
}

.card-023 .card__face--reveal {
  background-image: url("/deck/images/square/023.jpg");
}
.card-023 .card-text::after {
  content: "Synth";
}
.card-023 .card-suit::after {
  content: "Other";
}

.card-024 .card__face--reveal {
  background-image: url("/deck/images/square/024.jpg");
}
.card-024 .card-text::after {
  content: "SFX";
}
.card-024 .card-suit::after {
  content: "Other";
}

.card-025 .card__face--reveal {
  background-image: url("/deck/images/square/025.jpg");
}
.card-025 .card-text::after {
  content: "Cursor";
}
.card-025 .card-suit::after {
  content: "Object";
}

.card-026 .card__face--reveal {
  background-image: url("/deck/images/square/026.jpg");
}
.card-026 .card-text::after {
  content: "Join";
}
.card-026 .card-suit::after {
  content: "Object";
}

.card-027 .card__face--reveal {
  background-image: url("/deck/images/square/027.jpg");
}
.card-027 .card-text::after {
  content: "Separate";
}
.card-027 .card-suit::after {
  content: "Object";
}

.card-028 .card__face--reveal {
  background-image: url("/deck/images/square/028.jpg");
}
.card-028 .card-text::after {
  content: "Dial";
}
.card-028 .card-suit::after {
  content: "Continuous";
}

.card-029 .card__face--reveal {
  background-image: url("/deck/images/square/029.jpg");
}
.card-029 .card-text::after {
  content: "Frequency";
}
.card-029 .card-suit::after {
  content: "Continuous";
}

.card-030 .card__face--reveal {
  background-image: url("/deck/images/square/030.jpg");
}
.card-030 .card-text::after {
  content: "Time";
}
.card-030 .card-suit::after {
  content: "Continuous";
}

.card-031 .card__face--reveal {
  background-image: url("/deck/images/square/031.jpg");
}
.card-031 .card-text::after {
  content: "Switch";
}
.card-031 .card-suit::after {
  content: "Logic";
}

.card-032 .card__face--reveal {
  background-image: url("/deck/images/square/032.jpg");
}
.card-032 .card-text::after {
  content: "Routing";
}
.card-032 .card-suit::after {
  content: "Logic";
}

.card-033 .card__face--reveal {
  background-image: url("/deck/images/square/033.jpg");
}
.card-033 .card-text::after {
  content: "Process";
}
.card-033 .card-suit::after {
  content: "Logic";
}

.card-034 .card__face--reveal {
  background-image: url("/deck/images/square/034.jpg");
}
.card-034 .card-text::after {
  content: "Write";
}
.card-034 .card-suit::after {
  content: "Data";
}

.card-035 .card__face--reveal {
  background-image: url("/deck/images/square/035.jpg");
}
.card-035 .card-text::after {
  content: "Read";
}
.card-035 .card-suit::after {
  content: "Data";
}

.card-036 .card__face--reveal {
  background-image: url("/deck/images/square/036.jpg");
}
.card-036 .card-text::after {
  content: "Erase";
}
.card-036 .card-suit::after {
  content: "Data";
}

.card-037 .card__face--reveal {
  background-image: url("/deck/images/square/037.jpg");
}
.card-037 .card-text::after {
  content: "Unknown";
}
.card-037 .card-suit::after {
  content: "Theory";
}

.card-038 .card__face--reveal {
  background-image: url("/deck/images/square/038.jpg");
}
.card-038 .card-text::after {
  content: "Perspective";
}
.card-038 .card-suit::after {
  content: "Theory";
}

.card-039 .card__face--reveal {
  background-image: url("/deck/images/square/039.jpg");
}
.card-039 .card-text::after {
  content: "Unmixed";
}
.card-039 .card-suit::after {
  content: "Theory";
}

.card-040 .card__face--reveal {
  background-image: url("/deck/images/square/040.jpg");
}
.card-040 .card-text::after {
  content: "Wave";
}
.card-040 .card-suit::after {
  content: "Theory";
}

.card-041 .card__face--reveal {
  background-image: url("/deck/images/square/041.jpg");
}
.card-041 .card-text::after {
  content: "System";
}
.card-041 .card-suit::after {
  content: "Theory";
}

.card-042 .card__face--reveal {
  background-image: url("/deck/images/square/042.jpg");
}
.card-042 .card-text::after {
  content: "Bit";
}
.card-042 .card-suit::after {
  content: "Theory";
}

.card-043 .card__face--reveal {
  background-image: url("/deck/images/square/043.jpg");
}
.card-043 .card-text::after {
  content: "Creative";
}
.card-043 .card-suit::after {
  content: "Theory";
}

.card-044 .card__face--reveal {
  background-image: url("/deck/images/square/044.jpg");
}
.card-044 .card-text::after {
  content: "Fractal";
}
.card-044 .card-suit::after {
  content: "Theory";
}

.card-045 .card__face--reveal {
  background-image: url("/deck/images/square/045.jpg");
}
.card-045 .card-text::after {
  content: "Survival";
}
.card-045 .card-suit::after {
  content: "Theory";
}

.card-046 .card__face--reveal {
  background-image: url("/deck/images/square/046.jpg");
}
.card-046 .card-text::after {
  content: "Odds";
}
.card-046 .card-suit::after {
  content: "Theory";
}

.card-047 .card__face--reveal {
  background-image: url("/deck/images/square/047.jpg");
}
.card-047 .card-text::after {
  content: "Vibe";
}
.card-047 .card-suit::after {
  content: "Theory";
}

.card-048 .card__face--reveal {
  background-image: url("/deck/images/square/048.jpg");
}
.card-048 .card-text::after {
  content: "Fate";
}
.card-048 .card-suit::after {
  content: "Theory";
}

.row-of-cards {
    display: flex;
    width: 100%;
}