.header .share-price {
  margin-top: $spacing--m;
  // viewport l
  @include viewport--l {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -$spacing--m;
    margin-top: $spacing--xl;

    &__current {
      width: 100%;
    }

    &__current,
    &__history {
      margin-right: 30px;
    }

    &__meta {
      display: flex;
      height: $share-price-meta-height; // provide height to reduce content jump for dynamically loaded content
      margin-top: $baseline * 1.5;
    }

    &__history,
    &__info {
      @include font-style('title--xs');
      display: flex;
      margin-top: 0;
    }

    &__value + &__value,
    &__date {
      margin-left: 20px;
    }
  }
  // viewport xl
  @include viewport--xl {
    &__current {
      width: auto;
    }
  }
}