:root {
  --hsd-deck-columns: 28%; /* 100% for 1 column, 48% for 2 columns, 28% for 3 */
  --hsd-deck-gap: 10px;
  --hsd-card-padding: 0px;
  --hsd-card-shadow: 0px 0px 7px grey;
}

.hsd-deck {
display: flex;
justify-content: center; /* use 'start' instead of 'center' for left-aligned cards */
flex-wrap: wrap;
}
.hsd-card {
box-shadow: var(--hsd-card-shadow);
width: var(--hsd-deck-columns);
margin:var(--hsd-deck-gap);
}
.hsd-card img {
  width:100%;
}

@media screen and (max-width: 650px) {
.hsd-card {
width: 100%;
}
.hsd-row {
display: block;
}
}