/* -------------------------------------------------------- */
/* 🔹 Features Section                                      */
/* -------------------------------------------------------- */
/* Phones side by side with a title under each — the         */
/* screenshots carry the explanation                         */

.features {
  padding-block: var(--website-section-spacing);
  background-color: var(--color-scaffold-bg);
}

.features .section-title {
  text-align: center;
}

/* Locked three-column grid — 3×2 regardless of viewport width */
.features__steps {
  display: grid;
  grid-template-columns: repeat(3, 225px);
  justify-content: center;
  /* Generous row gap — the titles need air before the next row of phones */
  gap: var(--website-section-spacing) var(--space-xl);
  margin-top: var(--space-xxxl);
}

.feature-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Bezel composite from optimize-images.js — the frame is in the image */
.feature-step img {
  width: 100%;
  height: auto;
}

.feature-step__title {
  font-size: var(--text-title-large);
  font-weight: var(--text-title-weight);
  color: var(--color-primary);
  margin-top: var(--space-l);
  max-width: 18ch;
  text-wrap: balance;
}


/* -------------------------------------------------------- */
/* 🔹 Responsive                                            */
/* -------------------------------------------------------- */

@media (max-width: 767px) {
  .features__steps {
    grid-template-columns: min(240px, 100%);
    gap: var(--space-xxxl);
  }

  .feature-step__title {
    font-size: var(--text-title-medium);
  }
}