.box {
  /*background-color: #e4e4e4;*/
  background-color: var(--secondary-color);
}

.box__heading {
  /*padding: 15px 20px;*/
  padding-top: 15px; padding-bottom: 15px;
  padding-left: 30px; padding-right: 30px;
  background-color: rgba(0, 0, 0, 0.15);
 
}
.box__heading h1,
.box__heading h2,
.box__heading h3,
.box__heading h4,
.box__heading h5,
.box__heading h6 {
  margin: 0;

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.box__body {
  /*padding: 15px 20px;*/
  padding: 30px;

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.box table {width: 100%; }
.box a {position: initial;padding-right: initial; }
.box a:after {display: none; }
.box .box {margin-left: -30px;margin-right: -30px; }
.box--primary { background-color: var(--primary-color); }

.box-border-l {border-left: 4px solid var(--gray-color-200);}