.container {
 display: flex;
 flex-wrap: wrap;
 gap: 20px;
 justify-content: center;
 width:100%;
}

.card {
 flex: 1 1 calc(50% - 20px);
 background-color: #fff;
 border-radius: 12px;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
 display: flex;
 flex-direction: column;
 overflow: hidden;
 min-width: 280px;
 /*max-width: 600px;*/
 transition: transform 0.2s ease;
}

 .card:hover {
  transform: translateY(-5px);
 }

 .card img {
  width: 100%;
  max-width:100%;
  /*height: 400px;*/
  /*object-fit: cover;*/
 }

.card-content {
 padding: 15px;
 display: flex;
 flex-direction: column;
 height: 100%;
}

.card h3 {
 margin: 0 0 10px 0;
 font-size: 1.3rem;
}

.card p {
 /*flex-grow: 1;*/
 font-size: 0.95rem;
 color: #444;
 margin: 0 0 15px 0;
}

.read-more {
 align-self: flex-start;
 margin-top: auto;
 font-weight: bold;
 color: #007BFF;
 text-decoration: none;
}

 .read-more:hover {
  text-decoration: underline;
 }

@media (max-width: 700px) {
 .card {
  flex: 1 1 100%;
 }
}