footer.soulody {
  display: grid;
  grid-template-columns: 400px auto 340px;
  grid-template-rows: auto auto;
  grid-template-areas:
    "header . texts"
    "footer footer footer";
  row-gap: 96px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  background-color: #e1e2dd;
  padding: 96px 96px 72px;

  @media screen and (max-width: 930px) {
    padding: 48px 24px 40px;
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "header"
      "texts"
      "footer";
    row-gap: 56px;
  }

  > header {
    grid-area: header;
    display: flex;
    flex-direction: column;
    text-align: left;
    @media screen and (max-width: 930px) {
      text-align: center;
    }
  }

  > main {
    grid-area: texts;
    display: flex;
    flex-direction: column;
    align-self: start;
    align-items: start;

    >h5 {
      @media screen and (max-width: 930px) {
        text-align: center;
        max-width: 360px;
      }
    }

    > *:not(:first-child) {
      margin-top: 32px;
    }

    > img {
      width: 90px;
      height: auto;
    }

    @media screen and (max-width: 930px) {
      width: 100%;
      text-align: center;
      align-items: center;
    }

    > aside {
      display: flex;
      margin-top: 10px;
      padding: 10px;
      gap: 32px;

      a {
        text-decoration: none;
      }

      img {
        width: 24px;
        height: 24px;
      }
    }
  }

  > nav {
    grid-area: footer;
    display: flex;
    justify-content: space-between;
    align-items: start;

    @media screen and (max-width: 930px) {
      flex-direction: column;
      align-items: center;
      justify-content: start;
      text-align: center;
    }

    .mobile-hidden {
      display: inline;

      @media screen and (max-width: 930px) {
        display: none;
      }
    }

    .mobile-shown {
      display: none;
      margin-bottom: 48px;

      @media screen and (max-width: 930px) {
        display: block;
      }
    }

    a {
      text-decoration: none;
      color: var(--primary);
      display: block;
      margin-top: 0;

      @media screen and (max-width: 930px) {
        &:not(:first-child) {
          margin-top: 8px;
        }
      }
    }
  }
}