/* ==========================================================================
   Component: Features strip (Wide Selection / Fast Delivery / …)
   Requires: common.css
   ========================================================================== */

.di-features {
  padding-block: 30px 10px;
}

.di-features__card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 22px 18px;
  border-radius: var(--di-radius);
  background-color: var(--di-cream);
}

.di-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  padding-inline: 8px;
}

.di-feature__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--di-white);
  box-shadow: var(--di-shadow-sm);
}

.di-feature__title {
  display: block;
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--di-text-muted);
}

.di-feature__text {
  display: block;
  margin: 0;
  font-size: var(--di-fs-sm);
  font-weight: 500;
  color: var(--di-text);
}

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

@media (max-width: 991.98px) {
  .di-features__card { grid-template-columns: repeat(2, 1fr); gap: 18px 10px; }
  .di-feature { justify-content: flex-start; }
}

@media (max-width: 575.98px) {
  .di-features { padding-block: 22px 6px; }
  .di-features__card { grid-template-columns: 1fr 1fr; padding: 16px 12px; gap: 14px 8px; }
  .di-feature { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-inline: 2px; }
  .di-feature__icon { width: 38px; height: 38px; }
  .di-feature__text { font-size: var(--di-fs-xs); }
}