.of-header-main {
    position: fixed;
    top: 0;
    min-height: 72px;
    z-index: 10000;
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    align-items: center;
    grid-template-areas:
    "brand search search"
    "nav nav nav";
    
    @media (min-width: $ov--breakpoint--lg) {
        display: flex;
        align-items: center;
    }

    background: var(--of--color-black--300);
    width: 100%;
    .of-brand {
        grid-area: brand;
        display: flex;
        margin: var(--of--spacer--sm);
        
        @media (min-width: $ov--breakpoint--lg) {
          &__picture {
            min-width: 177px;
          }
            margin: 0 var(--of--spacer--xl);
        }
    }
    .of-header-main__search {
        grid-area: search;
        width: 80%;
        display: flex;
        align-items: center;
        justify-self: center;
        @media (min-width: $ov--breakpoint--lg) {
          width: auto;
            margin: 0 var(--of--spacer--lg) 0 auto;
        }
        &__input {
            border-radius: var(--of--BorderRadius--lg);
            border: none;
            width: 100%;
            // padding: 0 var(--of--spacer--sm);
            background: var(--of--color-white--100);
        }
    }
}

.of-nav-main {
    grid-area: nav;
  width: 100%;
  @media (min-width: $ov--breakpoint--lg) {
    width: auto;
}
&__items {
  display: flex;
  justify-content: space-around;

}
    .of-link-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: min-content min-content;
        @media (min-width: $ov--breakpoint--lg) {
            display: flex; 
            margin: 0;   
        }
        
        &__li {
            @media (min-width: $ov--breakpoint--lg) {
                border: none;
            }
            border: 1px solid var(--of--color-black--200);
            &:nth-of-type(even),&:nth-of-type(odd) {
                border-left: none;
            }
            &:nth-of-type(even) {
                border-right: none;
            }
            &:not(:last-of-type):not(:nth-last-child(-n+2)){
                border-bottom: none;
            }
                
        }
        &__a {
            width: 100%;            
            display: inline-block;
            position: relative;
            padding: var(--of--spacer--xs) var(--of--spacer--md);
            transition: background .25s linear;
            color: var(--of--color-white--100);
            min-height: 45px;
            @media (min-width: $ov--breakpoint--lg) {
                width: auto;
                padding: var(--of--spacer--lg) .9vw;
                &.of-m-active, &:focus, &:hover {
                  text-decoration: none;
                  background: var(--of--color-brand--100);
              }
            }
            // &.has-dropdown {
            //   grid-area: link;
            // }
            
        }
    }
}