footer {
  width: 100%;
  height: fit-content;
  padding-top: 1rem;
  padding-bottom: 4.5rem;
  margin-top: 3rem;
  background-color: var(--l);

  hr {
    width: 90%;
    border: none;
    height: 5px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--d);
  }

  .socialLinks {
    width: 90%;
    padding: 0.5rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    gap: 0.5rem;
    a {
      img {
        width: 40px;
        height: 40px;
      }
    }
  }

  .quickLinks {
    width: 90%;
    padding: 1rem 0;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;

    a {
      text-transform: uppercase;
      text-decoration: none;
    }
  }

  .legal {
    width: 90%;
    margin-left: auto;margin-right: auto;
    padding: 1rem 0;

    p {
      text-align: center;
    }
  }
}