@import "settings.colors";
@import "mixins/tools.mixins";

.c-article-table {
  width: 100%;
  max-width: rem(380);
  margin: 0 auto;
  border: none;
  border-spacing: 0;
  background-color: $color-stone-150;
  @include font-gm-sans;
  color: $color-grey-660;
}

.c-article-table caption {
  padding: rem(10);
  background-color: $color-stone-300;
  text-align: left;
  text-transform: uppercase;
  @include font-gm-sans-bold;
  font-size: rem(12);
  line-height: line-height(12, 12);
  letter-spacing: rem(1);
}

.c-article-table tr {
  font-size: rem(14);
}

.c-article-table tr:first-of-type {
  th[scope="row"],
  td {
    padding-top: rem(8);
  }
}

.c-article-table tr:last-of-type {
  th[scope="row"],
  td {
    padding-bottom: rem(15);
  }
}

.c-article-table th[scope="row"],
.c-article-table tr td {
  vertical-align: top;
  padding: rem(5) rem(10);
  text-align: left;
  line-height: line-height(14, 14);
  letter-spacing: rem(0.3);
}

.c-article-table th[scope="row"] {
  color: $color-grey-660;
  @include font-gm-sans-bold;
  width: 27%;
}
