/* =========================================================
   Mizunara Studio
   Component / Process
========================================================= */

.process-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 24px;

  margin-top: 50px;
}

/* =========================================================
   CARD
========================================================= */

.process-card {
  padding: 32px 24px;

  border-radius: 30px;

  text-align: center;

  transition:
    transform
    0.3s ease;
}

.process-card:hover {
  transform:
    translateY(-8px);
}

/* =========================================================
   NUMBER
========================================================= */

.process-card span {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 64px;
  height: 64px;

  margin:
    0
    auto
    18px;

  border-radius: 50%;

  background:
    var(--gold);

  color:
    white;

  font-size:
    1.5rem;

  font-weight:
    700;
}

/* =========================================================
   CONTENT
========================================================= */

.process-card h3 {
  margin-bottom: 10px;

  font-size: 1.35rem;
}

.process-card p {
  line-height: 1.6;

  opacity: 0.85;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

  .process-grid {
    grid-template-columns:
      1fr;
  }
}