footer {
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;

  /* ponta a ponta no celular, igual o main */
  @media (max-width: 599px) {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
  }
}

.gifs {
  width: 90%;
  margin: 0 auto;

  @media (max-width: 599px) {
    width: 100%;
  }
}

.blinkies {
  width: 100%;
  border: 2px outset var(--soft-yellow);
  margin: 0 auto 10px;
}

.gifs ul,
.blinkies ul {
  display: grid;
  justify-items: center;
}

.gifs ul {
  grid-template-columns: repeat(8, 1fr);

  @media (min-width: 600px) {
    grid-template-columns: repeat(7, 1fr);
  }

  @media (min-width: 700px) {
    grid-template-columns: repeat(14, 1fr);
  }
}

.blinkies ul {
  grid-template-columns: repeat(3, 1fr);

  @media (min-width: 600px) {
    grid-template-columns: repeat(5, 1fr);
  }
}

.gifs li,
.blinkies li {
  position: relative;
  max-width: 180px;
}

.gifs li {
  aspect-ratio: 1 / 1;
}

.blinkies li {
  width: 100%;
  aspect-ratio: 150 / 20;
}

.gifs picture {
  display: contents;
}

.gifs img,
.blinkies img {
  width: 100%;
  height: 100%;
  display: block;
}

.gifs img {
  object-fit: contain;
}

/* smileys grandes e gifs de espaço têm formatos variados: corta pra preencher */
.gifs img[src*="/contact/big/"],
.gifs img[src*="/gifs/index/"] {
  object-fit: cover;
}

.blinkies img {
  object-fit: fill;
}

@media (max-width: 599px) {
  .gifs li:nth-child(n + 9),
  .blinkies li:nth-child(n + 7) {
    display: none;
  }
}