// Header
$title-font: 'bold';
$title-size: 9; // 46px

$header-height: k-px-to-rem(64px);
$border-bottom: map-get($k-colors, 'font-1');

.karl-Header {
  position: fixed;
  z-index: 2;

  height: $header-height;
  width: 100%;
  background-color: map-get($k-colors, 'primary-1');
}

.karl-Title {
  @include k-typographyFont($title-font);
  @include k-typographyFontSize($title-size);

  text-align: center;
  margin-top: k-px-to-rem(80px);

  &:after {
    display: block;
    margin: k-px-to-rem(30px) auto 0;
    width: k-px-to-rem(50px);
    border-bottom: k-px-to-rem(4px) solid $border-bottom;
    content: '';
  }
}