.cards-stage {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 1.25rem auto;
  padding: 1.25rem;
  max-width: 900px;
  border-radius: 16px;
  background: linear-gradient(145deg, #0e5a2b, #0a3f20);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15);
}

.playing-card {
  inline-size: 130px;
  aspect-ratio: 13 / 19;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #d7d7d7;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  padding: 0.5rem;
}

.corner {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}

.corner-top {
  justify-self: start;
}

.corner-bottom {
  justify-self: end;
  align-self: end;
  transform: rotate(180deg);
}

.pip {
  justify-self: center;
  align-self: center;
  font-size: 2.3rem;
  line-height: 1;
}

.heart,
.diamond {
  color: #b3002d;
}

.spade,
.club {
  color: #1a1a1a;
}

@media (max-width: 560px) {
  .playing-card {
    inline-size: 105px;
  }

  .pip {
    font-size: 1.9rem;
  }
}