.header {
  display: grid;
  grid-template-columns:
    minmax(var(--grid-padding), 1fr) repeat(
      var(--grid-columns),
      minmax(0, calc(var(--max-content-width) / var(--grid-columns)))
    )
    minmax(var(--grid-padding), 1fr);
}

.header > * {
  grid-column: 2/-2;
}

.header {
  position: absolute;
  top: 35px;
  left: 0;
  z-index: 2;
  width: 100%;
  background-color: transparent;
}

.header--dark {
  background-color: rgba(0, 0, 0, 1);
}

.topbar {
  display: grid;
  grid-template-columns:
    minmax(var(--grid-padding), 1fr) repeat(
      var(--grid-columns),
      minmax(0, calc(var(--max-content-width) / var(--grid-columns)))
    )
    minmax(var(--grid-padding), 1fr);
  align-items: center;
  height: var(--topbar-height);
  font-size: var(--fs-small);
  font-family: var(--ff-base);
}

.topbar > * {
  grid-column: 2/-2;
}

.topbar__left > * {
  margin: 0;
}

.topbar__right {
  display: none;
}

.topbar--dark {
  color: var(--clr-white);
  background-color: var(--clr-black);
}

.topbar--dark a {
  color: var(--clr-white);
}

.topbar .socialmedia {
  justify-content: flex-end;
}

@media (min-width: 992px) {
}

@media (max-width: 1199px) {
  .topbar__left {
    text-align: center;
  }
}

@media (min-width: 1200px) {
  .topbar__left {
    grid-column: 2 / 8;
  }
  .topbar__right {
    grid-column: 8 / -2;
    display: block;
  }
}

@media (min-width: 1440px) {
}