header {
  padding: var(--content-margin) 0;
}

header .content-wrap {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    'title title title'
    'navigation navigation navigation'
    'status none search';
  align-items: center;
  gap: var(--content-margin);
}

header .title-wrapper {
  grid-area: title;
}

header .club-status-wrapper {
  grid-area: status;
}

header .search-wrapper {
  grid-area: search;
}

header .navigation-wrapper {
  grid-area: navigation;
}

header .title {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--content-margin);
}

header img {
  width: auto;
  height: 3rem;
}

header a {
  color: var(--color-main-text);
  text-decoration: none;
}

@media (min-width: 400px) {
  header .content-wrap {
    grid-template-rows: auto auto;
    grid-template-columns: auto auto auto auto auto;
    grid-template-areas:
      'title title title status status'
      'navigation navigation navigation navigation search';
  }
}

@media (min-width: 400px) and (max-width: 959px) {
  header .club-status-wrapper {
    justify-self: end;
  }

  header .search-wrapper {
    justify-self: end;
  }
}

@media (min-width: 960px) {
  header .content-wrap {
    grid-template-rows: auto;
    grid-template-columns: auto auto 1fr auto auto;
    grid-template-areas:
      'title status none navigation search';
  }
}