footer {

  .top,
  .bottom {
    display: grid;
    max-width: 58rem;
    margin: 0 auto;
  }

  .top {
    grid-template-columns: 2fr repeat(3, 1fr);
    padding: 4rem 4rem 2rem 4rem;

    .links,
    .message {
      list-style-type: none;
      white-space:nowrap;
      padding: 0;
    }

    .message {
      margin: 0;

      .logo {
        width: 8rem;
        height: 2.25rem;
        
        img {
          max-width: 100%;
        }
      } 

      .social {
        padding: .75rem .3rem;

        .icon {
          display: inline-block;
          
          a {
            display: block;
            width: 2rem;
            height: 2rem;
            border: .1rem solid var(--br-color);
            border-radius: var(--radius);
            padding: .4rem .375rem;
            margin: 0 .25rem;
  
            span {
              font-size: 1.1rem;
            }
  
            &:hover {
              background: var(--brh-color);
            }
          }
        }

        .gab a {
          padding: .4rem .325rem;
        }

        .minds a {
          padding: .4rem .525rem;
        }

        .twitter,
        .dribbble,
        .rss {
          a {
            padding: .45rem .375rem;
          }
        }

        @-moz-document url-prefix() {

          .icon a {
            padding: .4rem .375rem;
            margin: 0 .25rem;
          }

          .gab a {
            padding: .4rem .325rem;
          }

          .minds a {
            padding: .4rem .525rem;
          }
  
          .discuss a {
            top: .05rem;
            
            span {
              font-size: 1.2rem;
            }
          }
        }
      }
    }
    
    .links {
      margin: 0;

      h4 {
        color: var(--ft-color);
        font-size: 1rem;
        font-weight: 500;
        padding: 0;
        margin: .2rem 0 1rem 0;
      }

      li {
        margin: .5rem 0;

        &:first-of-type { margin: 0 }

        a {
          color: var(--f-color);
          font-size: 1.1rem;
          font-weight: 600;

          &:hover { text-decoration: underline }
        }
      }
    }
  }

  .bottom {
    grid-template-columns: 2fr 1fr;
    padding: 2rem 4rem 4rem 4.5rem;

    p {
      color: var(--f-color);
    }

    .pitch {
      grid-row: 1;
      font-size: 1.25rem;
      font-weight: 600;
      margin: 0 0 .5rem 0;
    }

    .copy,
    .tagline {
      grid-row: 2;
      font-size: .85rem;
      font-weight: 500;
      margin: 0;
    }

    .copy {
      text-align: right;

      .icon-copyright {
        font-size: .7rem;
      }
    }
  }
}