header {
  width: 100%;
  background: var(--b-color);

  .head {
    display: grid;
    grid-template-columns: 8rem calc(100% - 28rem) 20rem;
    max-width: 58rem;
    padding: 2rem 4rem;
    margin: 0 auto;

    .logo {
      width: 8rem;
      height: 2.25rem;
      margin: .25rem 0;

      img {
        max-width: 100%;
      }
    }

    .cta {
      list-style-type: none;
      white-space: nowrap;
      padding: 0;
      margin: 0;
    }
    
    .cta {
      grid-column: 3;

      .secondary {
        float: right;
        margin: 0;

        a {
          display: inline-block;
          font-size: 1.1rem;
          font-weight: 600;
          border-radius: var(--radius-full);
          padding: .75rem 1.15rem .75rem 1.15rem;
          margin: 0;
        }
      }

      .secondary a {
        color: var(--fs-color);
        
        &:hover {
          color: var(--w-color);
        }
      }
    }
  }
}