html {
  height: 100%;
}

body {
  min-height: 100%;
  background-color: var(--color-base);
}

.site-layout {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(28ch, 16%) 1fr;
  height: 100vh;
}

#btn-menu {
  opacity: 0%;
}

.site-layout .main {
  margin: 0 4%;
}

.site-layout .menu {
  background-color: hsl(from var(--color-base) h s calc(l - 5));
}

  .site-layout .menu img {
    margin-bottom: 1em;
    margin-inline: auto;
    width: 100%;
    height: auto;
  }

  .site-layout .menu ul {
    list-style-type: none;
    padding: 2em;
  }

  .site-layout .menu li > a {
    padding: 1.5em;
    border-top: .5px solid hsl(from var(--color-text) h s l / 0.1);
    font-size: 0.9em;
    color: hsl(from var(--color-text) h s calc(l + 5));
    white-space: nowrap;
  }

  .site-layout .menu li .heading {
    white-space:break-spaces;
    overflow-wrap:normal;
  }

  .site-layout .menu li:hover > a {
    background-color: hsl(from var(--color-base) h s calc(l - 1));
  }

  .site-layout .menu li .menu-icon {
    float: left;
    font-size: 1.6em;
    padding-right: 20px;
    opacity: 30%;
    width:32px;
  }





@media (max-width: 50em) {
  .site-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  #btn-menu {
    opacity: 100%;
  }

  .site-layout .main {
    margin: 1em;
    padding: 1em 0;
  }

  .site-layout .menu {
    display: none;
  }
}