.nh-feature-header {
  text-align: center;
  margin: 0 0 3.2rem;
}

.nh-feature-header .nahleh-eyebrow {
  margin-bottom: 1.4rem;
}

.nh-feature-heading {
  font-size: 2.8rem;
  font-weight: 900;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--nh-charcoal);
}

.nh-feature-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.nh-feature-row {
  display: grid;
  /* Two equal halves whatever their content (minmax: a column never grows to fit its content). */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--nh-white);
  border-radius: var(--nh-radius-xl);
  overflow: hidden;
  box-shadow: var(--nh-shadow-soft);
}

/* The image panel is one square at every width, and the image covers it edge to edge. The panel has its
   size before the (lazy) image arrives, so nothing moves when it loads; its tint shows until then. Beside
   longer text it stretches to the row's height and the image still covers it. The slight zoom trims the
   thin dark frame some uploads carry, so every row's image meets the panel's edge the same way. */
.nh-feature-row__media {
  order: 2;
  position: relative;
  overflow: hidden;
  /* The column sets the width; the ratio is the row's minimum height. Without the width, a panel stretched
     to taller text would take its width from that height and spill out of its column. */
  width: 100%;
  aspect-ratio: 1 / 1;
  align-self: stretch;
}

.nh-feature-row__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  transform: scale(1.04);
}

/* No image: the row is its text alone, never an empty panel. */
.nh-feature-row--no-media {
  grid-template-columns: minmax(0, 1fr);
}

.nh-feature-row__content {
  order: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.6rem 4.4rem;
}

.nh-feature-row--reverse .nh-feature-row__media {
  order: 1;
}

.nh-feature-row--reverse .nh-feature-row__content {
  order: 2;
}

.nh-feature-row__eyebrow {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 0.8rem;
}

.nh-feature-row__heading {
  font-size: 2.2rem;
  font-weight: 900;
  margin: 0 0 1.4rem;
  letter-spacing: -0.02em;
  color: var(--nh-charcoal);
}

.nh-feature-row__text {
  color: var(--nh-body);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.8;
}

.nh-feature-row__text p {
  margin: 0;
}

.nh-feature-row--tint-0 .nh-feature-row__media {
  background: var(--nh-sand);
}

.nh-feature-row--tint-0 .nh-feature-row__eyebrow {
  color: var(--nh-amber-deep);
}


.nh-feature-row--tint-1 .nh-feature-row__media {
  background: var(--nh-sage-tint);
}

.nh-feature-row--tint-1 .nh-feature-row__eyebrow {
  color: var(--nh-sage);
}


.nh-feature-row--tint-2 .nh-feature-row__media {
  background: var(--nh-blush);
}

.nh-feature-row--tint-2 .nh-feature-row__eyebrow {
  color: var(--nh-coral);
}


@media screen and (max-width: 749px) {
  .nh-feature-row {
    grid-template-columns: 1fr;
  }

  /* Stacked into one column, the desktop side-alternation would put two
     images back-to-back between rows — keep every row text-first here. */
  .nh-feature-row--reverse .nh-feature-row__content {
    order: 1;
  }

  .nh-feature-row--reverse .nh-feature-row__media {
    order: 2;
  }


  .nh-feature-row__content {
    padding: 2.8rem 2.4rem;
  }

  .nh-feature-heading {
    font-size: 2.2rem;
  }
}