/* Work model steps (workflow.php). --step-gap is also used to place the arrows. */

.home-workflow__steps {
  --step-gap: clamp(48px, 7vw, 96px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--step-gap);
  margin: 0;
  padding: 56px 0 0;
  list-style: none;
}

.home-workflow__step { position: relative; }
.home-workflow__step:hover .home-workflow__card { transform: translateY(-6px); }

.home-workflow__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 72px 20px 28px;
  border-radius: var(--radius-lg);
  background: var(--gradient-primary);
  color: #fff;
  text-align: center;
  box-shadow: var(--shadow-primary);
  transition: transform .3s var(--ease);
}

.home-workflow__badge {
  position: absolute;
  top: -52px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary);
  box-shadow: 0 10px 24px rgba(34, 24, 18, .12);
  transform: translateX(-50%);
}

.home-workflow__number {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
}

.home-workflow__step-title {
  margin: 4px 0 0;
  color: #fff;
}

.home-workflow__text {
  margin: 22px 8px 0;
  color: var(--color-muted);
  text-align: center;
}

.home-workflow__arrow {
  position: absolute;
  top: 70px;
  right: calc(var(--step-gap) / -2);
  fill: #dcd9d6;
  transform: translateX(50%);
}

@media (max-width: 899.98px) {
  .home-workflow__steps {
    grid-template-columns: 1fr;
    gap: 88px;
    max-width: 420px;
    margin-inline: auto;
  }

  .home-workflow__arrow {
    top: auto;
    bottom: -64px;
    right: 50%;
    transform: translateX(50%) rotate(90deg);
  }
}