#mainFooter__top {
  --py: 2rem;
  display: flex;
  justify-content: space-between;
  background-color: var(--black);
  padding: var(--py) 0;
  color: #fff;
  @media screen and (width >= 1280px) {
      --py: 3rem;
  }
  .container {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      @media screen and (width >= 1280px) {
          flex-direction: row;
          gap: 1rem;
          margin: 0 auto;
      }
  }
  #mainFooter__top__left {
      h3 {
          margin: 0;
      }
      p {
          font-size: var(--secondary-dark-2);
          margin: .5rem 0 1rem 0;
      }
  }
  
  #mainFooter__top__right {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      @media screen and (width >= 1280px) {
          flex-direction: row;
          gap: 3rem;
          margin: 0 auto;
      }
      li{
        a {
         &:hover {
              color: var(--secondary-dark-2);
          }
        }
        
      }
  }
}

#mainFooter__rrss {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
  @media screen and (width >= 1280px) {
      flex-direction: row;
  }
  a {
    color: #fff;
    gap: 8px;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: var(--fs-lg);
    @media screen and (width >= 1280px) {
      font-size: var(--fs-base);
    }
  }
  a:hover {
    text-decoration: underline;
  }
}

.mainFooter__title {
  font-size: var(--fs-lg);
  color: #fff;
  margin: 0 0 .5rem 0;
}

#mainFooter__top__right {
  ul {
      list-style: none;
      padding: 0;
      margin: 0;
  }
  li {
      margin-bottom: 8px;
      @media screen and (width >= 1280px) {
          margin-bottom: .8rem;
      }
  }
  a {
    color: #fff;
    font-size: var(--fs-base);
    text-decoration: underline;
  }
  a:hover {
    color: #333;
  }
}

#mainFooter__bottom {
  --py: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding: var(--py) 0;
  @media screen and (width >= 1280px) {
      --py: 1rem;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
  }
  #mainFooter__bottom__right {
      display: flex;
      gap: 1rem;
  }
  img {
      max-width: 150px;
  }
  nav {
      display: flex;
      gap: 15px;
  }
  ul {
      list-style: none;
      display: flex;
      margin: 0;
      padding: 0;
      gap: .5rem;
      @media screen and (width >= 1280px) {
          gap: 1rem;
      }
  }
  a {
    color: #666;
    text-decoration: underline;
    font-size: var(--fs-sm);
  }
  a:hover {
    color: #333;
  }
}