/*
 = ======== flexbox ========
*/
.cards {
   display: flex;
   flex-wrap: wrap;
  justify-content: center;
   align-items: center;
}

.card {
  flex: 0 0 250px;
}


/*
 = ====== visuals =========
*/

/*
* {
  box-sizing: border-box;
}
body {
  margin: 0
}

.cards {
  min-height: 100vh;
}
*/

.card {
  margin: 12px;
  /*background: #f2f2f2;*/
  /* background: #423222; */ /* maroon */
  background: whitesmoke;
  border: 1px solid darkslategray; /* --- */
  border-radius: 7px;
  padding: 0 0 50px 0

}
.card > header {
  background: darkslategray;
  height: 200px;
  border-radius:  7px 7px 0 0;

  display: flex; /* --- */
  justify-content: center;  /* --- */
  align-items: center;  /* --- */
  color: #fff;  /* --- */
}
.card > ul {
  list-style: none;
  padding: 0;

  text-align: center;
  color: #aaa;

}
.card > ul li {
  height: 20px;
  width: 90%;
  margin: 10px auto;
  /*background: rgba(#ff,#ff,#ff, 0.4);*/
  background: rgba(254,254,254,0.4);
  color: navy;
}
.card > button {
  width: 50%;
  height: 40px;
  border: 0;
  /* margin-left: 12px; */ /* before */
  margin-left: 25%;
  border-radius: 7px;

  background: darkslategray; /* --- */
  color: #bbb; /* --- #fff  */

  display: inline-block; /* --- */

  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); /* --- */
  text-shadow: none; /* --- */
  user-select: none;
  transition-property: box-shadow, transform; /* --- */
  will-change: box-shadow, transform; /* --- */

  transform-origin: center; /* --- */
  transition-duration: 100ms; /* --- */

}

.card > button:hover {
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2);
  transform: scale(1.02) translateY(-4px);
}

.card > button:active {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
  transform: scale(0.98) translateY(-2px);
}


.card--big {
  transform: scaleX(1.12)
}

.card > .contact {
  /*border: 1px solid red;*/
  display: flex; /* --- */
  justify-content: center;  /* --- */
  align-items: center;  /* --- */
}

/* ---
.card > .contact > .button {
  background: navy;
}
--- */