/**
 * @file
 * Feature grid component styles.
 */

.feature-grid__section-title {
  text-align: center;
  margin-bottom: var(--space-5xl);
}

.feature-grid__items {
  gap: var(--grid-gap-md);
}

.feature-grid__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl);
  background: var(--color-surface);
}

.feature-grid__number {
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
}

.feature-grid__icon {
  margin-top: var(--space-base);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-size: 20px;
}

.feature-grid__item:nth-child(odd) .feature-grid__icon {
  background: var(--color-background-warm);
}

.feature-grid__item:nth-child(even) .feature-grid__icon {
  background: var(--color-background-gold);
}

.feature-grid__title {
  margin-top: var(--space-lg);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
}

.feature-grid__description {
  margin-top: var(--space-md);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .feature-grid__items {
    grid-template-columns: 1fr !important;
  }
}