/* HERO SECTION VERTICAL */

:root {
  --benefits-font-size: 1rem;
  --benefits-pane-radius: var(--pane-radius);
  --benefits-color-primary: var(--color-primary);
  --benefits-color-secondary: var(--color-secondary);
  --benefits-font-display: var(--font-display);
}

/* BENEFITS CONTAINER */

.benefits__extra {
  display: flex;
  flex-direction: row;
}

/* BENEFITS TITLE */

.benefits__extra .benefits__title {
  color: white;
  font-size: 1.4em;
  font-weight: 400;
  text-transform: uppercase;
}

/* BENEFITS SUBTITLE */

.benefits__subtitle {
  margin: 0;
  color: white;
  font-weight: 400;
}

/* MAIN INNTER CONTAINER */

.benefits__extra {
  border-radius: 5px;
}

/* CONTENT CONTAINER */

.benefits__vertical {
  border-radius: var(--benefits-pane-radius);
  background-color: var(--benefits-color-primary);
  font-size: var(--benefits-font-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%
}

/* BULLET POINTS */

.benefits__points {
  color: white;
  -webkit-margin-before: 0em;
  margin-block-start: 0em;
  -webkit-margin-after: 0em;
  margin-block-end: 0em;
  -webkit-margin-start: 0px;
  margin-inline-start: 0px;
  -webkit-margin-end: 0px;
  margin-inline-end: 0px;
  -webkit-padding-start: 0px;
  padding-inline-start: 0px;
}

/* TARGET LIST ITEM TO OVERRIDE FONT FAMILY */

.benefits__points>li {
  font-family: var(--benefits-font-display);
  font-weight: 300;
}

.benefits__vertical>.wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80%;
}

.benefits .benefits__text {
  max-width: 30ch;
}

.benefits__vertical .benefits__text {
  text-align: center;
}

.benefits__vertical table {
  color: white;
  font-size: var(--benefits-font-size);
  border-spacing: 0;
}

.benefits__vertical table td {
  border-right: solid 1px white;
  padding-left: 0.2em;
  padding-right: 0.2em;
  font-family: var(--benefits-font-display);
  font-weight: 300;
}

.benefits__vertical table td:last-child {
  border: none;
}

@media all and (max-width: 782px) {
  .benefits__vertical {
    margin-top: 16px;
    padding-bottom: 16px;
  }
}