footer {
  padding: 80px 0;
  background-color: var(--color-black);
  color: var(--color-white);

  @media (max-width: 1024px) {
    padding: 70px 0;
  }
  @media (max-width: 768px) {
    padding: 60px 0;
  }
  @media (max-width: 576px) {
    padding: 50px 0;
  }

  .container {
    .logo {
      display: flex;
      justify-content: center;
      margin-bottom: 36px;
      img {
        display: block;
        max-width: 100%;
        height: auto;
      }

      @media (max-width: 768px) {
        margin-bottom: 30px;
      }

      @media (max-width: 576px) {
        margin-bottom: 26px;
      }
    }
    .footer-navigation {
      margin-bottom: 34px;

      @media (max-width: 768px) {
        margin-bottom: 28px;
      }
      @media (max-width: 576px) {
        margin-bottom: 24px;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 40px;
        margin: 0;
        padding: 0;
        list-style: none;

        @media (max-width: 1024px) {
          gap: 30px;
        }
        @media (max-width: 768px) {
          gap: 20px 24px;
        }
        @media (max-width: 576px) {
          gap: 16px 20px;
        }
        li {
          position: relative;
          &::before {
            content: '';
            position: absolute;
            top: 50%;
            right: -24px;
            transform: translateY(-50%);
            width: 6px;
            height: 6px;
            background-color: var(--color-white);
            border-radius: 50%;
            opacity: 0.4;
          }

          @media (max-width: 1024px) {
            &::before {
              right: -18px;
            }
          }
          @media (max-width: 768px) {
            &::before {
              display: none;
            }
          }
          a {
            color: var(--color-white);
            text-decoration: none;
            font-size: var(--font-size-sm);
            transition: opacity 0.3s ease;

            @media (max-width: 768px) {
              font-size: var(--font-size-body);
            }
            @media (max-width: 576px) {
              font-size: var(--font-size-body);
            }
            &:hover {
              opacity: 0.6;
            }
          }
          &:last-child::before {
            display: none;
          }
        }
      }
    }
    .socials {
      margin-bottom: 34px;

      @media (max-width: 768px) {
        margin-bottom: 28px;
      }
      @media (max-width: 576px) {
        margin-bottom: 24px;
      }

      ul {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
        margin: 0;
        padding: 0;
        list-style: none;

        @media (max-width: 768px) {
          gap: 18px;
        }
        @media (max-width: 576px) {
          gap: 16px;
        }
        li {
          a {
            display: block;
            transition: opacity 0.3s ease;
            img {
              display: block;
            }
            &:hover {
              opacity: 0.6;
            }
          }
        }
      }
    }
    .rights-artmedia {
      .rights {
        margin-bottom: 20px;
        text-align: center;
        color: var(--color-white);
        font-size: var(--font-size-xs);
        line-height: 1.5;
        opacity: 0.7;

        @media (max-width: 768px) {
          margin-bottom: 18px;
        }
        @media (max-width: 576px) {
          font-size: var(--font-size-xs);
        }
      }
      .artmedia {
        display: flex;
        justify-content: center;
        transition: opacity 0.3s ease;
        img {
          display: block;
          max-width: 100%;
          height: auto;
        }
        &:hover {
          opacity: 0.6;
        }
      }
    }
  }
}