.card {
  /* card */
  --card-border: 2px solid transparent;
  --card-border-radius: 20px;
  --card-bg: #e1f5ff;
  --card-paddings: 50px 50px 25px;
  --card-align: center;
  --card-image-offset-bottom: 20px;
  --card-text-align: center;
  --card-text-size: 30px;
  --card-text-weight: 400;
  --card-text-color: #333;

  /* card hover */
  --card-border-hover: 2px solid #70d5ff;
  --card-shadow-hover: 0 0 15px #70d5ff;
  --card-transform-hover: translateY(-5px);
  --card-bg-hover: #e1f5ff;

  font-family: "Futura PT", sans-serif;
}

.card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border: var(--card-border);
  align-items: var(--card-align);
  border-radius: var(--card-border-radius);
  background-color: var(--card-bg);
  padding: var(--card-paddings);
  transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s, border 0.3s, color 0.3s;
}

.card * {
  box-sizing: border-box;
}

.card:hover {
  border: var(--card-border-hover);
  box-shadow: var(--card-shadow-hover);
  transform: var(--card-transform-hover);
  background-color: var(--card-bg-hover);
}

.card__image {
  display: block;
  margin-bottom: var(--card-image-offset-bottom);
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.card__title {
  margin: 0;
  display: flex;
  justify-content: var(--card-text-align);
  font-size: var(--card-text-size);
  line-height: 1.2em;
  font-weight: var(--card-text-weight);
  color: var(--card-text-color);
}