.govuk-metadata {
  @include core-14;
  @extend %contain-floats;

  &.direction-rtl {
    direction: rtl;
    text-align: start;
  }

  dt {
    float: left;
    clear: left;
    width: auto;
    min-width: 120px;

    @include media(tablet){
      padding-right: $gutter-one-third;
    }
  }
  &.direction-rtl dt {
    float: right;
    clear: right;
    @include media(tablet){
      padding-left: $gutter-one-third;
      padding-right: 0;
    }
  }

  dd {
    float: left;
    width: 55%;

    @include media(tablet){
      width: 70%;
    }
  }
  &.direction-rtl dd {
    float: right;
  }
}

.govuk-metadata {
  @include core-14;
  @include responsive-bottom-margin;
  @extend %contain-floats;

  &.direction-rtl {
    direction: rtl;
    text-align: start;
  }

  dt {
    float: left;
    clear: left;
    width: auto;
    min-width: 120px;

    @include media(tablet){
      padding-right: $gutter-one-third;
    }
  }
  &.direction-rtl dt {
    float: right;
    clear: right;
    @include media(tablet){
      padding-left: $gutter-one-third;
      padding-right: 0;
    }
  }

  dd {
    float: left;
    width: 55%;

    @include media(tablet){
      width: 70%;
    }
  }
  &.direction-rtl dd {
    float: right;
  }
}

Add default bottom margin to metadata
Add default bottom margin to metadata

Metadata component should have a default margin as a different type of
content usually follows. Follow the government-frontend example and use
a responsive margin.

Component is also used by specialist-frontend and finder-frontend.
Specialist front-end needs to be updated before this change is applied.
