.header {
   position: sticky;
   top: 0;
   z-index: 2;
   display: flex;
   justify-content: space-between;
   align-items: center;
   box-shadow: 0 4px 6px -1px var(--tisc-box-shadow);
   flex-wrap: wrap;
   background: var(--tisc-bg-secondary);
   padding: 20px;
   color: var(--tisc-text-primary);

   .left, .right{
      max-width: 10%;
      display: flex;
      justify-content: flex-start;
   }

   .centre{
      width: 75%;
   }

   .right{
      justify-content: flex-end;
   }
}

.site-logo {
   font-size: 20px;
   font-weight: 700;
   text-transform: uppercase;
   display: flex;
   color: inherit;
   align-items: center;
   text-decoration: none;

   &:hover {
      text-decoration: none;
   }

   &__image {
      padding-right: 10px;
      width: 50px;
      height: 50px;
   }

   &__name {
      text-transform: uppercase;
      margin-top: 0.75rem;
      font-family: 'Montserrat', Helvetica, sans-serif;
      font-size: 24px;
      font-weight: 700;
      letter-spacing: 2.4px;

      &:hover {
         text-decoration: none;
      }
   }
}