.BenefitPoint {
  position: relative;
  background: var(--colorBrand);
  color: hsl(0, 0%, calc((var(--colorBrand-l) - 60) * -100%));
  margin: 0 auto var(--sizeModuleHorizontalOffset);
  padding: 3.5rem 0;
}

.BenefitPoint:before {
  bottom: 100%;
}

.BenefitPoint:after {
  top: 100%;
}

.BenefitPoint-title {
  color: inherit;
}

.BenefitPoint-frame {
  display: grid;
  gap: 3rem;
}

@media (min-width: 32.01rem) {
  .BenefitPoint-frame {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64.01rem) {
  .BenefitPoint-frame {
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
  }
}

@media (min-width: 80.01rem) {
  .BenefitPoint-frame {
    gap: clamp(2rem, 7vw, 12rem);
  }
}

/*# sourceMappingURL=benefit-point.min.css.map */