:root {
  /* --header-height: 4.5rem; */

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: #afa19f;
  --first-color-bold: #9a8e8d;
  --second-color: #937d58;
  --first-gradient: linear-gradient(90deg, #a17c53, #b08f6c);
  --title-color: #020202;
  --text-color: hsl(225, 12%, 24%);
  --text-color-light: hsl(255, 4%, 70%);
  --body-color: hsl(0, 0%, 100%);
  --container-color: hsl(0, 0%, 100%);
  --white-color: hsl(0, 0%, 100%);
  --black-color: #020202;
  --gray-border: hsl(255, 6%, 90%);
  --black-border: hsl(255, 10%, 20%);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Playfair Display", serif;
  --text-font: "Lato", sans-serif;
  --big-font-size: 2.25rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;

  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-bold: 700;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 2em 1em;
  text-align: center;
}
.column {
  width: 100%;
  padding: 0.5em 0;
}
.h1 {
  width: 100%;
  text-align: center;
  font-size: 3em;
  color: var(--text-color);
}
.card {
  box-shadow: 0 0 2.4em rgba(25, 0, 58, 0.1);
  padding: 3.5em 1em;
  border-radius: 0.6em;
  color: var(--text-color);
  cursor: pointer;
  transition: 0.3s;
  background-color: #ffffff;
  transition: all .3s ease-in;
}
.card:hover {
  background: #fdfdfd;
  border: 1px solid var(--text-color);
}
.card .img-container {
  width: 8em;
  height: 8em;
  background-color: var(--first-color);
  /* padding: 0.5em; */
  border-radius: 50%;
  margin: 0 auto 2em auto;
  transition: all .3s ease;
}
.card img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.card h3 {
  font-weight: 500;
  font-size: 1.3rem;
}
.card p {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5rem;
  /* text-transform: uppercase; */
  margin: 0.5em 0 2em 0;
  /* letter-spacing: 2px; */
}
.icons {
  width: 50%;
  min-width: 180px;
  margin: auto;
  display: flex;
  justify-content: space-around;
}

.icons a:hover {
  color: #937d58;
}
.card a {
  text-decoration: none;
  color: inherit;
  font-size: 1.4em;
  transition: all .3s ease;
}

@media screen and (min-width: 768px) {
  section {
    padding: 1em 7em;
  }
}
@media screen and (min-width: 992px) {
  section {
    padding: 1em;
  }
  .card {
    padding: 5em 1em;
  }
  .column {
    flex: 0 0 33.33%;
    max-width: 33.33%;
    padding: 0 1em;
  }
}