.header {
  height: 72px;
  background: var(--color-marengo1);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;

  &__logo {
    margin-left: 40px;

    & a {
      font-family: 'TT Norms', sans-serif;
      font-style: normal;
      font-weight: normal;
      font-size: 16px;
      line-height: 100%;
      text-decoration: none;
      color: #fff;
    }

    &-svg {
      max-height: 24px;
    }
  }
  &__navigation {
    margin-left: 20px;
    @media (max-width: 649px) {
      margin-left: 15px;
    }
  }
  &__title {
    text-align: center;
    padding-right: 40px;

    & a {
      font-family: 'TT Norms', sans-serif;
      font-style: normal;
      font-weight: normal;
      font-size: 16px;
      line-height: 100%;
      text-decoration: none;
      color: #fff;
    }
  }
  &__contact {
    height: 100%;
    & a {
      font-family: 'TT Norms', sans-serif;
      font-style: normal;
      font-weight: normal;
      font-size: 16px;
      line-height: 100%;
      text-decoration: none;
      color: #fff;
      height: 100%;
      display: flex;
      align-items: center;
      margin-right: 40px;
    }
  }
}
.header {
  grid-area: header;
  background: var(--color-marengo1);
  color: #ffffff;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas: "logo title title contact";
  font-size: 1.5rem;
  & a {
    color: #ffffff;
    text-decoration: none;
  }
  @include respond-max(tablet-sm) {
    font-size: 0.8rem;
  }
  @include respond-max(mobile-ml) {
    font-size: 0.8rem;
  }
  & a:hover {
    text-decoration: underline;
  }
  @include respond-max(mobile-ml) {
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr;
    grid-template-areas:
          "logo"
          "title"
          "title"
          "contact"
  ;
    grid-row-gap: 0.8rem;
  }
  &__logo {
    grid-area: logo;
  }
  &__contact {
    grid-area: contact;
    text-align: right;
    @include respond-max(mobile-ml) {
      text-align: left;
    }
    a {
      justify-content: end;
    }
  }
}
.header {
  height: auto;
}