/* ------------------------------------------------------------------
   Feature strip: five trust signals sitting directly under the hero.

   Dividers are drawn as inline-start borders and suppressed on the first
   item of each row. Which item that is changes with the breakpoint, since
   the strip runs 2-up on phones, 3-up on tablets and 5-up on desktop.
   ------------------------------------------------------------------ */

/* Vertical padding lives here rather than in Bootstrap py-* utilities so the
   strip's rhythm is tunable in one place. Section + item padding are chosen
   together to put an equal 32px of clear space above the icons and below the
   captions. */
.feature-strip{
  padding-block:1.25rem;
  background:#fff;
  border-bottom:1px solid #eef1f5;
}

.feature-strip-item{
  height:100%;
  padding:.75rem 1rem;
}

.feature-strip-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:.75rem;
  font-size:1.9rem;
  line-height:1;
  color:#f70e88;
}

.feature-strip-title{
  margin-bottom:.25rem;
  font-size:1rem;
  font-weight:700;
  line-height:1.3;
  color:#2d343e;
}

.feature-strip-text{
  margin-bottom:0;
  font-size:.9375rem;
  color:#6a747b;
}

/* --- dividers: 2-up (default) --- */
.feature-strip .col{ border-inline-start:1px solid #e6eaf0; }
.feature-strip .col:nth-child(2n+1){ border-inline-start:0; }

/* --- 3-up --- */
@media (min-width:768px){
  .feature-strip .col:nth-child(n){ border-inline-start:1px solid #e6eaf0; }
  .feature-strip .col:nth-child(3n+1){ border-inline-start:0; }
}

/* --- 5-up --- */
@media (min-width:992px){
  .feature-strip .col:nth-child(n){ border-inline-start:1px solid #e6eaf0; }
  .feature-strip .col:nth-child(5n+1){ border-inline-start:0; }
}

/* Breathing room between wrapped rows, which only happen below 5-up. */
@media (max-width:991.98px){
  .feature-strip .col{ margin-bottom:.5rem; }
}

/* On the 2-up layout the fifth item lands alone on the final row; centre it
   so the strip does not end lopsided. */
@media (max-width:767.98px){
  .feature-strip .col:last-child:nth-child(odd){
    margin-inline:auto;
    border-inline-start:0;
  }
}
