/* Center the title */
header {
  text-align: center;
}

h1 {
  text-align: center;
}

/* Three cards on top, two centered below */
#playing-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 560px;
  margin: 0 auto;
  padding: 35px 10px;
}

/* Smaller cards */
.card {
  display: flex;
  justify-content: space-between;
  width: 160px;
  height: 230px;
  background-color: white;
  border: 2px solid #e4d3df;
  border-radius: 12px;
  padding: 5px;
  overflow: hidden;
  box-shadow: 0 6px 15px rgba(0,0,0,0.12);
  transition: transform 0.3s ease;
}

/* Card images */
.middle img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 218px;
  object-fit: contain;
}

@media (max-width: 600px) {
  #playing-cards {
    max-width: 100%;
  }

  .card {
    width: 140px;
    height: 205px;
  }
}

/* Updated title */
header,
header h1 {
  text-align: center;
}

/* Force 3 cards on top and 2 underneath */
#playing-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  padding: 30px 10px;
}


/* Three cards on top, two underneath */
#playing-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  padding: 30px 10px;
}


/* Three cards on top, two centered below */
#playing-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 30px 10px;
}

/* Bigger cards */
#playing-cards .card {
  display: flex;
  justify-content: space-between;
  flex: 0 0 210px;
  width: 210px;
  height: 300px;
  padding: 5px;
}

/* Keep images inside cards */
#playing-cards .middle img {
  width: 100%;
  max-height: 285px;
  object-fit: contain;
}

/* Keep title centered */
header,
header h1 {
  text-align: center;
}

/* Adapt layout for smaller screens */
@media (max-width: 700px) {
  #playing-cards {
    max-width: 100%;
  }
}