.benefits-strip {
  --benefits-overlap: 82px;
  position: relative;
  z-index: 2;
  margin-top: calc(var(--benefits-overlap) * -1);
  padding: 0 0 var(--space-16);
  background: linear-gradient(to bottom, transparent 0 var(--benefits-overlap), var(--jaroni-white) var(--benefits-overlap) 100%);
}
.benefits-strip > .container { position: relative; }
.benefits-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row;
  width: 100%;
  overflow: visible;
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-15);
  background: var(--jaroni-white);
  box-shadow: 0 20px 48px rgba(4, 15, 9, .14);
}
.benefits-strip .benefits-strip__grid > [data-benefit-card] {
  display: grid;
  visibility: visible;
  opacity: 1;
}
.benefit-card {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-16);
  min-width: 0;
  min-height: 146px;
  padding: 27px clamp(20px, 2vw, 29px);
  color: #18211d;
  background: var(--jaroni-white);
  transition: box-shadow var(--duration-soft) ease, transform var(--duration-soft) ease, background var(--duration-soft) ease;
}
.benefit-card:first-child { border-radius: 14px 0 0 14px; }
.benefit-card:last-child { border-radius: 0 14px 14px 0; }
.benefit-card:not(:last-child) { border-right: 1px solid #e3e8e5; }
.benefit-card:hover {
  z-index: 1;
  background: #fcfdfc;
  box-shadow: 0 14px 30px rgba(4, 15, 9, .11);
  transform: translateY(-4px);
}
.benefit-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  background: transparent;
  transition: transform var(--duration-soft) ease;
}
.benefit-card:hover .benefit-card__icon { transform: translateY(-2px) scale(1.03); }
.benefit-card__image { display: block; width: 100%; height: 100%; object-fit: contain; }
.benefit-card__image[hidden] { display: none; }
.benefit-card__content { min-width: 0; }
.benefit-card__title { margin: 0; color: #151d19; font-size: clamp(.86rem, .92vw, .96rem); font-weight: var(--font-extrabold); line-height: 1.3; }
.benefit-card__text { margin: var(--space-7) 0 0; color: #53605a; font-size: clamp(.72rem, .76vw, .79rem); font-weight: var(--font-weight-450); line-height: 1.52; }

@media (max-width: 1100px) {
  .benefits-strip { --benefits-overlap: 62px; padding-bottom: var(--space-18); }
  .benefits-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefit-card { min-height: 124px; padding-block: 23px; }
  .benefit-card:first-child { border-radius: 14px 0 0; }
  .benefit-card:nth-child(2) { border-radius: 0 14px 0 0; }
  .benefit-card:nth-child(3) { border-radius: 0 0 0 14px; }
  .benefit-card:last-child { border-radius: 0 0 14px; }
  .benefit-card:not(:last-child) { border-right: 0; }
  .benefit-card:nth-child(odd) { border-right: 1px solid #e3e8e5; }
  .benefit-card:nth-child(-n+2) { border-bottom: 1px solid #e3e8e5; }
}

@media (max-width: 640px) {
  .benefits-strip { --benefits-overlap: 36px; padding-bottom: var(--space-16); }
  .benefits-strip > .container { width: min(calc(100% - 28px), var(--container-width)); }
  .benefits-strip__grid { grid-template-columns: 1fr; border-radius: var(--radius-12); box-shadow: 0 16px 38px rgba(4, 15, 9, .13); }
  .benefit-card { grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-14); min-height: 104px; padding: var(--space-18) var(--space-20); border-right: 0 !important; border-bottom: 1px solid #e3e8e5; border-radius: 0 !important; }
  .benefit-card:first-child { border-radius: 11px 11px 0 0 !important; }
  .benefit-card:last-child { border-bottom: 0; border-radius: 0 0 11px 11px !important; }
  .benefit-card:hover { transform: translateY(-2px); }
  .benefit-card__icon { width: 46px; height: 46px; }
  .benefit-card__title { font-size: var(--text-9); }
  .benefit-card__text { font-size: var(--text-75); }
}

@media (prefers-reduced-motion: reduce) {
  .benefit-card, .benefit-card__icon { transition-duration: .01ms; }
}