@import "settings.colors";

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

.c-election-key-riding {
  @include display-grid;
  @include grid-template-columns(0, 1fr auto);
  @include grid-template-rows(0, rem(20) auto);
  padding: rem(10);
  background-color: $color-stone-100;
}

.c-election-key-riding__indicator-icon {
  @include grid-column(2, 3);
  @include grid-row(1, 2);
  width: 0;
  height: 0;
  border-top: rem(21) solid $color-stone-700;
  border-left: rem(21) solid transparent;
  margin-top: rem(-10);
  margin-right: rem(-10);
}

.c-election-key-riding__title {
  @include grid-column(1, 2);
  @include grid-row(1, 2);
  @include font-gm-sans-bold;
  text-transform: uppercase;
  font-size: rem(12);
  letter-spacing: rem(1);
  line-height: 1;
  margin: 0 0 rem(10) 0;
  color: $color-grey-660;
}

.c-election-key-riding__body {
  @include grid-column(1, 2);
  @include grid-row(2, 3);
}

.c-election-key-riding__description {
  @include font-gm-sans;
  margin: 0 0 rem(20) 0;
  font-size: rem(15);
  letter-spacing: rem(0.5);
  line-height: line-height(15, 19);
  color: $color-grey-800;
}

.c-election-key-riding__byline {
  @include font-gm-sans;
  text-transform: uppercase;
  font-size: rem(12);
  letter-spacing: rem(1);
  line-height: line-height(12, 15);
  color: $color-grey-600;
}
