.row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* Optional spacing between cards */
  }
  
.column {
  flex: 1 1 100%; /* Full width on small screens */
}

@media (min-width: 768px) {
  .column {
    flex: 1 1 25%; /* Four cards in a row on larger screens */
  }
}

.card {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 8px;
  text-shadow: 4px 4px 6px rgba(255, 209, 220, 1);
  box-shadow: 2px 2px 2px rgba(255, 209, 220, 1);;
  text-align: center;
  margin: 0.2em 0.2em;
}
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.column {
  flex: 1 1 250px; /* flexible column width */
  max-width: 300px;
}

.card-icon {
  width: 60px;
  height: auto;
  display: inline-block;
}

.card > p {
  margin: 5px;
}

@media (max-width: 600px) {
  .card-icon {
    width: 60px;
  }
  .card {
    padding: 5px;
  }
  .column {
    flex: 1 1 100%;
    max-width: 100%;
  }
}