.vprop {
  box-sizing: border-box;
  width: 100%;
  font-family: var(--font-family-base);
  font-optical-sizing: none;
}
.vprop *,
.vprop *::before,
.vprop *::after { box-sizing: border-box; }
.vprop p { margin: 0; }

.vprop__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  --bleed: var(--bleed-below-tablet);
}

.vprop__container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(
    var(--spacing-20) + var(--bp-tablet) * (var(--spacing-40) - var(--spacing-20))
  );
  width: 100%;
}

.vprop__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.vprop__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-16);
  width: 100%;
  max-width: 640px;
  text-align: center;
  word-break: break-word;
}

.vprop__eyebrow { width: 100%; color: var(--color-accent-400); }

.vprop__title {
  margin: 0;
  width: 100%;
  color: var(--color-gray-900);
  font-size: calc(
    var(--text-display-22-size) +
    var(--bp-tablet) * (var(--text-display-28-size) - var(--text-display-22-size))
  );
  line-height: calc(
    var(--text-display-22-line-height) +
    var(--bp-tablet) * (var(--text-display-28-line-height) - var(--text-display-22-line-height))
  );
  font-weight: var(--text-display-28-weight);
}

.vprop__subtitle { width: 100%; color: var(--color-gray-700); }

.vprop__benefits {
  width: 100%;
  max-width: 1296px;
  box-shadow: inset 0 1px 0 var(--color-gray-50);
}

.vprop__benefits-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(max-content, 1fr);
  gap: var(--spacing-24);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.vprop__benefits-track::-webkit-scrollbar { display: none; }

.vprop__benefit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  padding-block: var(--spacing-24);
  max-width: calc(
    var(--bp-tablet) * (100cqi - 4 * var(--spacing-24)) / 5 +
    (1 - var(--bp-tablet)) * 100cqi
  );
  color: var(--color-gray-900);
  white-space: nowrap;
}

.vprop__check {
  flex: none;
  display: block;
  width: 16px;
  height: 16px;
  color: var(--color-positive-400);
}

.vprop__list {
  padding-bottom: var(--spacing-20);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.vprop__list::-webkit-scrollbar { display: none; }

.vprop__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: calc((1 - var(--bp-tablet)) * 979px + var(--bp-tablet) * 100%);
  --vprop-gap: calc(
    var(--spacing-16) + var(--bp-desktop) * (var(--spacing-20) - var(--spacing-16))
  );
  gap: var(--vprop-gap);
}

.vprop__row .bcard {
  --vprop-cols: calc(4 - 2 * var(--bp-tablet) + 2 * var(--bp-desktop));
  flex: 0 0 calc(
    (100% - (var(--vprop-cols) - 1) * var(--vprop-gap)) / var(--vprop-cols)
  );
  min-width: 0;
}