.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* exactly 2 columns */
  grid-template-rows: repeat(2, auto); /* exactly 2 rows */
  gap: 1.5rem;
  max-width: 840px;
}

.grid > .card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(
    (100% - 1.5rem) / 2
  ); /* match one column width given the 1.5rem gap */
}

.card {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0.5px solid #d7dae2;
}

.card h3 {
  margin-bottom: 0.5rem;
}

.card p {
  text-align: center;
  color: #8d93a7;
  margin-top: 0px;
  font-size: 14px;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  color: white;
  margin-top: 0.5rem;
  width: 100%;
  text-align: center;
}