AugurProject/augur-ui

@import (reference) '~assets/styles/shared';

.MarketsHeader {
  font-size: 1rem;
  padding: 2.25rem 2rem 0.5rem;
}

.MarketsHeader__top {
  font-size: 1rem;
  padding: 1rem 2rem 0.5rem;
}

.MarketsHeader__heading {
  &:extend(.h1--heavy);

  color: @color-white;
  flex: 1;
  letter-spacing: 0.125rem;
  margin-bottom: 0;
}

.MarketsHeader__subheading {
  &:extend(.caps--large);

  color: @color-white;
  flex: 1;
  margin-bottom: 1rem;
}

.MarketsHeader__wrapper {
  align-items: flex-end;
  display: flex;
  flex-grow: 1;
  margin-top: 1.125rem;

  > article {
    display: flex;
    flex: 2;
    justify-content: flex-end;
  }

  > div:first-of-type {
    flex: 1;
  }
}

@media @breakpoint-mobile {
  .MarketsHeader {
    padding: 3.5rem 1rem 0.5rem;
  }
}

@media @breakpoint-mobile {
  .MarketsHeader__wrapper {
    //display: block;
    align-items: baseline;
    display: flex;
    flex-direction: column;
    margin-top: 2.25rem;
  }
}