.card {
  border: 1px solid var(--border-color);
  margin-bottom: 2rem;
}

.card__img img {
  display: block;
  width: 100%;
  height: auto;
}

.card__content {
  padding: 1rem;
  border-top: 1px solid var(--border-color);
  background-color: #fff;
}

.card__subtitle {
  margin-top: -1rem;
  margin-bottom: 1rem;
  color: var(--main-color);
  opacity: 0.6;
}

.card__description {
  margin-bottom: 1rem;
}

.card__footer {
  border-top: 1px solid var(--border-color);
  padding-top: 1rem;
  margin-bottom: 1rem;
}

.card__footer-text {
  margin: 0 auto;
  text-align: center;
}

.card__footer-button {
  margin-top: 1rem;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
  }
}

@media screen and (min-width: 1024px) {
  .cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
  }
}