footer {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--gray-100);
  box-shadow: var(--box-shadow-X);
  color: var(--gray-600);
  padding: 20px;
  gap: 20px;
  width: calc(100% - 40px);
  user-select: none;

  > div {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;

    > div {
      flex: 1 1;
      position: relative;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      flex-basis: 140px;
      width: 100%;
    }
  }

  ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;

    > li {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      width: 100%;

      > div:nth-child(1) {
        width: 1rem;
        padding-top: 0.2rem;
      }

      > div:nth-child(2) {
        width: calc(100% - 20px);
      }
    }
  }

  p {
    margin: 0;
    padding: 0;
  }

  a {
    text-decoration: none;
    color: var(--gray-600);

    &:hover {
      color: var(--purple-600);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
  }

  .footer2 {
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
  }

  .footer3 {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    a {
      &:hover {
        text-decoration: none;
      }
    }
  }
}

@media (max-width: 400px) {
  footer {
    .footer2 {
      flex-direction: column;
      gap: 0.5rem;
    }
  }
}