footer {
  margin-top: 1em;
  text-align: right;
  font-size: 0.8em;
}

  footer .social {
    overflow: hidden;
    margin-bottom: 1em;
  }

    footer .social .wrapper {
        float: left;
        box-sizing: border-box;
        padding: 0 1%;
        width: 33.333%;
    }

      footer .social .wrapper .box {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.5em;
        padding: 0.5em 0;
        text-align: center;

        transition: all 0.5s ease;
      }

        footer .social .wrapper .box:hover {
          text-decoration: none;
        }

        footer .social .wrapper .box.facebook {
            background: var(--color-social-facebook);
        }

            footer .social .wrapper .box.facebook:hover {
                background: var(--color-social-facebook-dark);
            }

        footer .social .wrapper .box.x {
            background: var(--color-social-x);
        }

            footer .social .wrapper .box.x:hover {
                background: var(--color-social-x-dark);
            }

        footer .social .wrapper .box.linkedin {
            background: var(--color-social-linkedin);
        }

            footer .social .wrapper .box.linkedin:hover {
                background: var(--color-social-linkedin-dark);
            }

        footer .social .wrapper .box svg {
            width: 1.5em;
            height: 1.5em;
        }

        footer .social .wrapper .box span {
            padding-left: 0;
            font-size: 1em;
            font-weight: bold;
            color: #ffffff;
        }