footer {
  position: fixed;
  bottom: 0;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: white;
  z-index: 1000;
  font-family: 'Roboto', sans-serif;
  transition: transform 0.5s ease-in-out;
  padding: 7rem 12rem 2rem;

  @media (max-width: 768px) {
    padding: 3rem 2rem 2rem;
  }

  &.visible {
    transform: translateX(-50%) translateY(0);
  }

  .footer-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding-left: 25rem;
    padding-right: 25rem;
    align-items: end;

    .footer-left {
      text-align: left;
    }

    .footer-middle {
      display: flex;
      justify-content: center;
    }

    .footer-right {
      text-align: right;
    }

    @media (max-width: 1024px) {
      padding-left: 2rem;
      padding-right: 2rem;
    }

    @media (max-width: 768px) {
      grid-template-columns: 1fr;
      gap: 3rem;

      .footer-left {
        order: 3;
        text-align: center;
      }

      .footer-middle {
        order: 2;
      }

      .footer-right {
        order: 1;
        text-align: center;
      }
    }

    .footer-contact {
      .email_address {
        color: white;
        text-decoration: none;
      }
    }

    .copyright {
      color: white;
      span {
        color: grey;
      }

      a {
        color: white;
        text-decoration: none;
      }
    }

    .socials {
      display: flex;
      gap: 1.5rem;

      a {
        display: inline-block;
        width: 2rem;
        height: 2rem;
        position: relative;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: white;
          -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
          -webkit-mask-size: contain;
          mask-size: contain;
          -webkit-mask-position: center;
          mask-position: center;
        }

        &.instagram {
          &::before {
            -webkit-mask-image: url('../img/icons/socials/instagram.svg');
            mask-image: url('../img/icons/socials/instagram.svg');
          }
        }

        &.facebook {
          &::before {
            -webkit-mask-image: url('../img/icons/socials/facebook.svg');
            mask-image: url('../img/icons/socials/facebook.svg');
          }
        }

        &.youtube {
          &::before {
            -webkit-mask-image: url('../img/icons/videos/youtube.svg');
            mask-image: url('../img/icons/videos/youtube.svg');
          }
        }

        &.spotify {
          &::before {
            -webkit-mask-image: url('../img/icons/music/spotify.svg');
            mask-image: url('../img/icons/music/spotify.svg');
          }
        }

        &.youtube_music {
          &::before {
            -webkit-mask-image: url('../img/icons/music/youtube.svg');
            mask-image: url('../img/icons/music/youtube.svg');
          }
        }
      }
    }
  }
}