footer {
  @apply w-full mx-auto px-12 pb-32;

  .section-title {
    @apply text-lg nunito uppercase font-bold tracking-widest mb-6;
  }

  .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;
    } */
    .square,
    .rectangle-rotated,
    .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-y-12 gap-x-8 lg:gap-x-12 grid-cols-1 md:grid-cols-2; /* Mobile-first: 1 column */

    @screen lg {
      /* column-gap: 100px; */
      grid-auto-flow: column;
      grid-template-rows: repeat(2, auto);
      grid-template-columns: repeat(4, 1fr);

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

  .mentions {
    li,
    p,
    a {
      @apply text-xl font-light;
    }
    a {
      @apply underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 6px;
      &:hover {
        filter: brightness(1.3);
      }
    }
    ul {
      @apply w-full flex flex-col lg:flex-row flex-wrap gap-x-4 justify-between pt-12;
      li {
        @apply text-primary;
      }
      li.deligraph_credit {
        @apply flex gap-x-1 items-center;
        img {
          transition: all 0.5s;
          @apply w-5 h-5 filter-primary;
          animation: fade-in-out 3.5s linear infinite;
          /* scale: 1.2; */
        }
      }
    }
  }
}

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

@keyframes fade-in-out {
  10% {
    opacity: 0;
    scale: 0.8;
  }
  40%,
  60% {
    opacity: 1;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 0.8;
  }
}