Gestructureerde lijst: Met titel

$structured-list-title-font: $font-serif;
$structured-list-font-size: $fs-down-1;
$structured-list-title-weight: $fw-bold;
$structured-list-title-color: $green;
$structured-list-space-x: $space-xs;
$structured-list-space-y: $space-s;
$structured-list-border: 1px solid $grey-light;

dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  font-size: $structured-list-font-size;
}

dt,
dd {
  flex: 0 1 100%;
  padding: $structured-list-space-x $structured-list-space-y;
  &:first-letter {
    text-transform: capitalize;
  }
}

dt {
  font-family: $structured-list-title-font;
  font-weight: $structured-list-title-weight;
  color: $structured-list-title-color;

}

.dt--title {
  color: #4b4b4b; 
  
}

dd {
  border-bottom: $structured-list-border;
}

@media (min-width: $tablet-portrait) {

  dt {
    border-bottom: $structured-list-border;
    flex: 1 1 (math.div(4, 12) * 100%);
  }

  dt + dd {
    flex: 1 1 (math.div(8, 12) * 100%);
  }
}

@media (min-width: $desktop) {

  dt { 
    word-break: break-word;
  }

  .dt_fullwidth {
    flex-basis: 100%;
    max-width: 100%;
  }
}