Front-end-Design-Project/static/css/card.css

.grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); 
  gap: 25px; 
}

.card { 
  background: white; 
  border-radius: 15px; 
  overflow: hidden; 
  box-shadow: 0 10px 20px rgba(0,0,0,0.05); 
}

.card img { 
  width: 100%; 
  height: 320px; 
  object-fit: cover; 
}

.content { 
  padding: 15px; 
}

.badge { 
  padding: 4px 10px; 
  border-radius: 20px; 
  color: white; 
  font-size: 0.7rem; 
  font-weight: bold; 
}

.book-badge { 
  background: var(--book-color); 
}

.show-badge { 
  background: var(--show-color); 
}

.genre-list { 
  display: block; 
  color: #888; 
  font-size: 0.8rem; 
  margin: 5px 0; 
}

dialog{
  border:none;
  border-radius: 8px;
  padding: 20px;
  width: 300px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

dialog::backdrop {
  background: rgba(0,0,0,0.5);
}

form  {
  display: flex;
  flex-direction: column;
  gap: 10px;
}