footer {
  @apply w-full mx-auto px-12;
  .branding {
    @apply w-full mb-12 grid relative mt-24 md:mt-32 xl:mt-48;
    z-index: -1;
    .square,
    .rectangle-rotated {
      z-index: -1;
    }
    .circle,
    .rectangle-vertical {
      z-index: -3;
    }

    .website-title {
      z-index: -2;
    }

    &__shapes {
      @apply w-full max-w-full grid gap-2 md:gap-24 xl:gap-32 2xl:gap-48 grid-cols-4 h-full absolute left-0;
      top: 0px;

      div.shape {
        @apply shrink flex flex-col w-full h-full;
        /* background-color: rgba(219, 234, 254, 0.5); */
        top: 0;
        flex-shrink: 1;
        aspect-ratio: 1/1;
        justify-self: center;
        transform-origin: bottom center;
        position: relative;
        bottom: 0;
      }
      div.square:first-child,
      div.rectangle-rotated {
        @apply justify-end;
      }
      img {
        @apply w-full h-fit object-contain;
        aspect-ratio: 1/1;
        flex-grow: 0;
        width: 100%;
      }
      img:last-child {
        @apply object-right;
      }
    }

    .website-title {
      @apply w-full;
    }
  }

  .credits {
    @apply w-full grid  gap-x-24 gap-y-12;
    display: grid;
    column-gap: 100px;
    grid-auto-flow: column; /* clé ici */
    grid-template-rows: repeat(2, auto);
    grid-template-columns: repeat(4, 1fr);

    > :first-child {
      grid-row: span 2;
    }
  }
  .socials {
    a {
      @apply block;
    }
  }
}

@keyframes parallax {
  from {
    transform: translateY(-200px);
  }
  to {
    transform: translateY(200px);
  }
}