.card {
  background: var(--Surface-Primary-Default);
  border-radius: var(--Corner-radius-lg);
  padding: var(--Space-x2) var(--Space-x4) var(--Space-x4);
  display: grid;
  justify-items: center;
  text-align: center;
  grid-template-areas:
    "icon"
    "content";
}

.title {
  color: var(--Text-Heading);
}

.content {
  grid-area: content;
  display: grid;
  gap: var(--Space-x1);
}

.icon {
  grid-area: icon;
}

@media screen and (min-width: 768px) {
  .card {
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon content";
    padding: var(--Space-x1) var(--Space-x4);
    justify-items: start;
    text-align: left;
    align-items: center;
    gap: var(--Space-x4);
  }
}