footer {
  padding-block: 100px;

  & .wrap {
    padding-inline: calc(var(--inline-padding) * 2);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 100px;

    /* & .logo img {
      margin-bottom: 40px;
    } */

    & .info {
      grid-column: 2 / -1;
      display: flex;
      flex-direction: column;
      gap: 20px;

      & p,
      & a {
        max-width: max-content;
        display: grid;
        grid-template-columns: 1em 1fr;
        gap: calc(1em / 1.75);

        & img {
          margin-top: 4px;
          --icon-size: 1em;
          width: var(--icon-size);
          height: var(--icon-size);
        }

        & span {
          grid-column: 2 / -1;

          &.full {
            white-space: nowrap;
            grid-column: 1 / -1;
          }
        }
      }

      @media (hover: hover) and (pointer: fine) {
        & a:hover {
          color: var(--color-primary-hover);
          text-decoration: underline;
        }
      }
    }
  }

  @media (max-width: 1000px) {
    padding-block: 80px;

    & .wrap {
      gap: 60px;
    }
  }

  @media (max-width: 800px) {
    padding-block: 60px;

    & .wrap {
      grid-template-columns: 200px auto;
      gap: 40px;
      row-gap: 20px;

      & .logo img {
        max-width: 200px;
      }
    }
  }

  @media (max-width: 650px) {
    & .wrap {
      grid-template-columns: 1fr;

      & .info {
        grid-column: unset;
        margin-top: 30px;
      }
    }
  }

  @media (max-width: 400px) {
    & .wrap {
      padding-inline: var(--inline-padding);
    }
  }
}