.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  height: 60px;
  color: #fff;
  background-color: #222;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16),
              0 3px 6px rgba(0,0,0,0.23);
}

.header .logo {
  display: flex;
  align-items: center;
  font-weight: 900;
}

.header .logo img {
  display: block;
  margin-right: .8rem;
  width: 1.9rem;
}

.header nav { height: 100%; }

.header .nav-section {
  position: relative;
  height: 100%;
}

.header .nav-section-title {
  display: flex;
  align-items: center;
  padding: 0.5rem 1.5rem;
  height: 100%;
}

.header .nav-section-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  display: none;
  grid-gap: 1rem;
  grid-template-columns: 1fr 1fr;
  padding: 2rem;
  width: 640px;
  background-color: whitesmoke;
  box-shadow: 0 5px 6px rgba(0,0,0,0.16),
              0 5px 6px rgba(0,0,0,0.23);
}

.header .nav-section:hover .nav-section-dropdown {
  display: grid;
}

.header .nav-section-dropdown a {
  display: block;
  padding: 0.5rem 0.75rem;
  background-color: #fff;
}