body {
  height: 100vh;
  font-family: 'Roboto', sans-serif;
  background-color: #333333;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
}

.mb-none {
  margin-bottom: 0;
}

.fas,
.far,
.fal {
  font-size: 100px;
}

.card {
  height: 350px;
  width: 300px;
  min-width: 255px;
  margin: 1rem;

  --card-space: 2rem;
  --shadow: 45px;
  --transition-time: 1s;

  --bg-top: #f40357;
  --color-top: white;

  --bg-bottom: white;
  --color-bottom: black;

  --bg-default: #333;
  --color-default: #555;
}

.card:hover .card__top {
  transform: translateY(0);
  background-color: var(--bg-top);
  color: white;
}

.card:hover .card__bottom {
  transform: translateY(0);
  background-color: var(--bg-bottom);
}

.card__common {
  position: relative;
  padding: var(--card-space);
  height: 50%;
  background-color: var(--bg-default);
  box-shadow: 0px 0px var(--shadow) #111;
  transition: transform var(--transition-time),
    background var(--transition-time), color var(--transition-time);
}

.card__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-default);
  transform: translateY(50%);
  z-index: 200;
}

.card__bottom {
  transform: translateY(-50%);
  color: var(--color-bottom);
  z-index: 100;
}

.card__button {
  padding: 8px;
  font-weight: bold;
  background-color: transparent;
  border: solid 2px gray;
}