.meta {
  @include line-height('normal');

  dt {
    margin-bottom: $spacing-2xs;
  }

  &__item {
    margin-bottom: $spacing-md;
  }
}

.meta--inline-dd {
  dd {
    display: inline;
    margin-right: $spacing-xs;

    &:before {
      content: '•';
      margin-right: $spacing-xs;
      font-weight: bold;
      color: $secondary;
    }

    &:first-of-type {
      &:before {
        display: none;
      }
    }
  }
}

.meta--inline {
  @include line-height('compact');

  .meta__item {
    margin-bottom: $spacing-xs;
  }

  dt {
    display: inline-block;
    margin-right: $spacing-xs;
  }

  dd {
    display: inline;
    margin-right: $spacing-2xs;

    &:before {
      content: '•';
      margin-right: $spacing-xs;
      font-weight: bold;
      color: $secondary;
    }

    &:first-of-type {
      &:before {
        display: none;
      }
    }
  }
}

.meta--table {
  display: table;
  border-collapse: collapse;

  .meta__item {
    display: table-row;
    border-bottom: 1px solid $grey--borders;
  }

  .meta__title,
  .meta__desc {
    @media (min-width: 30em) {
      display: table-cell;
    }
  }

  .meta__title {
    padding: $spacing-sm $spacing-lg $spacing-2xs 0;

    @media (min-width: 30em) {
      padding: $spacing-xs $spacing-lg $spacing-xs 0;
    }
  }

  .meta__desc {
    padding: 0 0 $spacing-sm 0;

    @media (min-width: 30em) {
      padding: $spacing-xs 0;
    }
  }

  dt {
    margin: 0;
  }
}

.meta--columns {
  columns: 10em;
  column-gap: calc($grid-gutter + 5vw);

  .meta__item {
    break-inside: avoid;
    margin-bottom: 0;
    padding-bottom: $spacing-md;
  }
}