/* Values grid */
.ebp-values-1 {
  box-sizing: border-box;
  padding-block: var(--spacing-20);
  color: var(--clr-ink);
  background-color: var(--clr-air);
  font-family: var(--font-primary);
}

.ebp-values-1 *,
.ebp-values-1 *::before,
.ebp-values-1 *::after {
  box-sizing: border-box;
}

.ebp-values-1__inner {
  width: 100%;
  /* padding-inline: var(--spacing-20); */
}

/* Flexbox centres an incomplete final row, producing the four-over-three
   arrangement in the supplied design without adding empty grid cells. */
.ebp-values-1__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: var(--spacing-28);
}

.ebp-values-1__card {
  min-width: 0;
  min-height: 15rem;
  flex: 0 0 25%;
  padding: var(--spacing-28);
  background-color: var(--clr-beige);
}

.ebp-values-1__card:nth-child(even) {
  background-color: var(--clr-tide);
}

/* The second row begins with green in the reference design, so its colour
   sequence runs in the opposite direction to the first row. */
.ebp-values-1__card:nth-child(n + 5):nth-child(odd) {
  background-color: var(--clr-tide);
}

.ebp-values-1__card:nth-child(n + 5):nth-child(even) {
  background-color: var(--clr-beige);
}

.ebp-values-1__heading {
  display: flex;
  gap: 0.35rem;
  margin: 0;
  color: inherit;
  font-family: var(--font-primary);
  font-size: var(--fs-12);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.ebp-values-1__content {
  max-width: 13rem;
  margin: var(--spacing-28) 0 0;
  font-size: var(--fs-14);
  line-height: 1.12;
}

@media (max-width: 767px) {
  .ebp-values-1__card {
    flex-basis: 50%;
  }

  /* Return to a simple alternating sequence when cards wrap more often. */
  .ebp-values-1__card:nth-child(n + 5):nth-child(odd) {
    background-color: var(--clr-beige);
  }

  .ebp-values-1__card:nth-child(n + 5):nth-child(even) {
    background-color: var(--clr-tide);
  }
}

@media (max-width: 575px) {
  .ebp-values-1__inner {
    padding-inline: var(--spacing-20);
  }

  .ebp-values-1__card {
    min-height: 0;
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ebp-values-1__card {
    visibility: visible !important;
    transform: none !important;
    opacity: 1 !important;
  }
}