// header styles
// ======================================================================
.header {
  @include spacing-inner(t 3, h 4);
  text-align: center;

  &--light {
    @include spacing-inner(t 1, h 1);
    @include center;
    max-width: map-get($breakpoints, xl);
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  &__title {
    @include spacing(v 2);

    &--light {
      @include spacing(v 0, l 1);
      @include font-size(h5);
    }
  }

  &__state {
    @include spacing(r auto);
  }

  .number--square {
    visibility: hidden;
  }
}