/**
 * How It Works Component Styles
 * Estilos para a seção "Como Funciona"
 *
 * @package Inkryptus
 */

/* How it works Container */
.how-it-works {
  padding: var(--spacing-xl) 0;
  position: relative;
  overflow: hidden;
}

/* Section Title */
.how-it-works .section-title {
  text-align: center;
  margin-bottom: var(--spacing-xl);
  font-size: 3.6rem;
  font-weight: var(--font-weight-bold);
  position: relative;
}

/* Steps Grid */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-xl);
  position: relative;
  z-index: 1;
}

/* Responsividade */
@media (max-width: 768px) {
  .steps-grid::before {
    display: none;
  }

  .how-it-works .section-title {
    font-size: 3rem;
  }
}

@media (max-width: 576px) {
  .how-it-works .section-title {
    font-size: 2.6rem;
  }
}