.Card {
  padding: 24px;
  max-width: 327px;
  display: grid;
  row-gap: 24px;
  justify-items: center;
}

.Profile {
  max-width: 384px;
  border-radius: 12px;
  background-color: var(--color-grey-800);
}

/* card header */
.Card__header,
.Card__body {
  width: 100%;
}

.Card__header {
  display: grid;
  row-gap: 24px;
  justify-items: center;
}

.Image {
  width: 88px;
  height: 88px;
  object-fit: cover;
}

.Profile__pic {
  border-radius: 999px;
}

.Card__title,
.Card__description {
  text-align: center;
}

.Card__mainTitle {
  font: var(--textpreset1-bold);
}

.Card__subtitle {
  font: var(--textpreset2-bold);
}

.Profile__address {
  color: var(--color-green);
}

/* card body */
/* List */
.List {
  width: 100%;
  display: grid;
  row-gap: 16px;
  align-items: center;
}

.List__item {
  min-height: 45px;
}

.Card__list {
  grid-template-columns: minmax(279px, 1fr);
}

.Profile__button {
  width: 100%;
  border: none;
  padding: 12px;
  border-radius: 8px;
  background-color: var(--color-grey-700);
  text-align: center;
  font: var(--textpreset2-bold);
  color: var(--color-white);
  cursor: pointer;
  transition: 0.4s ease-in-out;
}

.Profile__button:hover {
  background-color: var(--color-green);
  color: var(--color-grey-700);
}

@media (min-width: 768px) {
  .Card {
    padding: 40px;
  }
}