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

  .top {
    display: grid;
    grid-template-columns: 4fr 2fr 2fr 1fr;
    grid-gap: 2rem 0;
    padding: 4rem 4rem 2rem 4rem;

    .message {
      margin: 0 0.25rem;

      .logo {
        color: var(--f-color);
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1.55rem;
        margin: 0;
      }
  
      p {
        padding: 0;
        margin: .5rem 0 0 0;
      }
    }    
    
    ul {
      list-style-type: none;
      white-space:nowrap;
      padding: 0;
      margin: 0;

      h4 {
        color: var(--f-color);
        font-size: 1rem;
        font-weight: 600;
        padding: 0;
        margin: .1rem 0 1rem 0;
      }

      li {
        margin: .5rem 0;

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

        a {
          color: var(--f-color);
          font-size: .95rem;

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

      .catch a { color: var(--s-color) }
    }
  }

  .bottom {
    padding-bottom: 4rem;

    .legal,
    .social {
      display: inline-block;
      list-style-type: none;
      white-space: nowrap;
      margin: 0;
    }

    .legal {
      padding: 1.5rem 0 1.5rem 4.25rem;
      margin: 0;

      li {
        display: inline-block;
        margin: 0 .75rem;

        &:first-of-type {
          margin: 0 .725rem 0 0;
        }
        
        a {
          color: var(--f-color);
          font-size: .9rem;
  
          &:hover { text-decoration: underline }
        }

        p {
          color: var(--f-color);
          font-size: .9rem;
          margin: 0;

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

    .social {
      float: right;
      padding: 1.3rem 4rem 1.3rem 0;

      li {
        display: inline-block;
        margin: 0 .75rem;

        a {
          color: var(--f-color);
          font-size: 1.35rem;

          &:hover {
            .icon-git { color: #80cc33 }
            .icon-x { color: #1D9BF0 }
            .icon-gab { color: #21CF7A }
            .icon-dribbble { color: #EA4C89 }
            .icon-zap { color: #9556D5 }
          }
        }
      }
    }
  }
}

@media only screen and (--viewport-4) {
  footer {
    .top,
    .bottom .center {
      max-width: 100%;
      margin: 0 auto;
    }
  
    .top {
      display: grid;
      grid-template-columns: 1fr 1fr;
      padding: 2.5rem 2.25rem 1.5rem 2.25rem;

      .message {
        grid-column: 1/3;
        margin: 0;
      }
    }

    .bottom {
      padding: .5rem 2.25rem 4rem 2.25rem;

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

      .social {
        float: unset;
        padding: 1rem 0 2.5rem 0;

        li:first-of-type {
          margin: 0 .75rem 0 0;
        }
      }

      .legal {
        max-width: 100%;
        padding: 0;

        .copy {
          display: block;
          margin: .75rem 0;
        }
      }
    }
  }
}

@media only screen and (--viewport-3) {
  footer {  
    .top {
      padding: 2.5rem 1.5rem 1.5rem 1.5rem;
    }

    .bottom {
      padding: .5rem 1.5rem 4rem 1.5rem;
    }
  }
}