/*
** .header
*/

.header__horizontal {
  grid-template-columns: 1fr auto max-content;
  grid-template-rows: calc(75 * 100vw / var(--standard-width));
  grid-column-gap: calc(40 * 100vw / var(--standard-width));
  background-position: center left calc(625 * 100vw / var(--standard-width));;
}

.header__site-name {
  padding-left: calc(50 * 100vw / var(--standard-width));
  padding-right: calc(194 * 100vw / var(--standard-width));
}


/*
** .header__main-menu
*/

.header__main-menu {
  display: block;
}

.header__main-menu-list {
  display: flex;
  column-gap: calc(35 * 100vw / var(--standard-width));
}

.header__main-menu-list .menu-item a {
  position: relative;
  height: 100%;
}

.header__main-menu-list .menu-item a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 0;
  height: 2px;
  background-color: var(--dark);
  transition: all 0.15s ease-out;
}

.header__main-menu-list .menu-item a * {
  display: block;
  text-align: center;
  line-height: 1;
}

.header__main-menu-list .menu-item-label {
  font-weight: bold;
  color: var(--dark);
  margin-bottom: calc(5 * 100vw / var(--standard-width));
}

.header__main-menu-list .menu-item-description {
  font-family: var(--roboto);
  font-style: italic;
  font-size: calc(10 / var(--standard-font-size) * 1em);
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  .header__main-menu-list .menu-item a:hover::after {
    width: 100%;
  }
}


/*
** #menu-toggle
*/

#menu-toggle {
  width: calc(75 * 100vw / var(--standard-width));
  height: calc(75 * 100vw / var(--standard-width));
  font-size: calc(36 / var(--standard-font-size) * 1em);
}


/*
** .header__drawer-menu
*/

.header__drawer-menu {
  top: calc(75 * 100vw / var(--standard-width));
  height: calc(100vh - calc(75 * 100vw / var(--standard-width)));
}

.header[data-drawer="open"] .header__drawer-menu {
  animation-duration: 0.5s;
}

.header:not([data-drawer="open"]) .header__drawer-menu {
  animation-duration: 0.7s;
}

.header__drawer-menu-list {
  grid-row-gap: calc(15 * 100vw / var(--standard-width));;
}