.site-footer {
  @apply bg-gray;
  .site-footer-grid-container {
    @apply grid grid-cols-4 px-8 gap-8  mx-auto;
    max-width: 2000px;
  }
  &__informative-message {
    @apply bg-primary text-white p-8 col-span-4 rounded-3xl flex justify-center;
    img {
      @apply mr-2;
    }
  }

  &__partenaires,
  &__metiers-patrimoine,
  &__infos-contact,
  &__navigation-menu {
    @apply p-8 bg-white rounded-3xl;
  }

  &__infos-contact {
    @apply col-span-4 lg:col-span-1 grid gap-6;
    .external-link {
      @apply pt-2 mt-1;
    }
  }
  &__navigation-menu {
    @apply col-span-4 lg:col-span-3;
    .footer-menu-renovateur {
      @apply flex gap-4 bg-secondary w-full justify-center items-end;
      .sub-menu {
        @apply hidden;
      }
    }

    .extra_details {
      @apply flex flex-wrap items-center justify-between;

      .social-networks {
        @apply flex gap-4;
      }
    }
  }
  &__partenaires {
    @apply flex flex-wrap col-span-4 md:col-span-2 justify-center items-center gap-12;
    a img {
      @apply inline-block;
    }
  }

  &__metiers-patrimoine {
    @apply col-span-4 md:col-span-2;
  }

  .website-credits {
    @apply col-span-4 xl:col-span-2 text-left font-semibold flex items-end gap-3 text-sm mx-auto xl:mx-0;
    .homegrade-sigle-icon {
      @apply h-12 w-auto;
    }
    .made-by {
      @apply w-fit flex justify-center items-center text-neutral-600 font-semibold text-xs pt-1;
      svg {
        @apply w-3 h-3 mx-1 fill-secondary;
        animation: fade-in-out 2.5s linear infinite;
      }
      a {
        @apply underline pl-1;
      }
      @keyframes fade-in-out {
        50% {
          opacity: 0;
        }
      }
    }
  }

  .legal-credits {
    @apply text-center col-span-4 xl:col-span-2  xl:flex gap-3 items-end !text-sm justify-end;
    &__legal-page-link {
      @apply font-semibold relative block;
    }
  }
  @screen xl {
    .legal-credits__legal-page-link + .legal-credits__legal-page-link {
      &:before {
        @apply mr-3 h-4 bg-neutral-900;
        transform: translateY(3px);
        display: inline-block;
        content: '';
        width: 1px;
        content: '';
      }
    }
  }
}