footer {
  background-color: var(--y);
  width: 100%;
  height: fit-content;
  padding: 1rem 0;

  .socials {
    display: flex;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 4px solid var(--d);

    a {
      width: 40px;
      height: 40px;
      background-color: var(--d);
      border-radius: 5px;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }

  .quick-links {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 4px solid var(--d);

    ul {
      width: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      padding: 0;

      li {
        list-style: none;
        width: 100%;

        a {
          color: var(--d);
          text-align: center;
          width: 100%;
          display: block;
        }
      }
    }
  }
}

@media (min-width: 568px) {
  footer {
    .quick-links {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 0.5rem;
      padding-bottom: 0.5rem;
      border-bottom: 4px solid var(--d);

      ul {
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        flex-direction: row;

        li {
          list-style: none;

          a {
            color: var(--d);
          }
        }
      }
    }
  }
}