/* Ajustes de composição da Susie e GIFs decorativos. */
.hero-art {
  height: 390px;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  padding-top: 16px;
}

.hero-art .hero-susie {
  position: relative;
  z-index: 2;
  width: 160px;
  transform: scale(2.1);
  transform-origin: center bottom;
  align-self: end;
  margin-bottom: 35px;
}

.hero-art .pixel-orbit {
  z-index: 1;
  bottom: 28px;
}

.hero-art .speech-bubble {
  position: relative;
  z-index: 3;
  top: auto;
  right: auto;
  justify-self: end;
}

.skills-section,
#projetos {
  position: relative;
}

.susie-decor {
  position: absolute;
  z-index: 4;
  display: block;
  height: auto;
  pointer-events: none;
}

/* A personagem apoia-se visualmente na base do título INVENTORY. */
.susie-decor--skills {
  width: 92px;
  top: 132px;
  right: 7%;
}

/* Personagem sobre a borda superior do painel de habilidades. */
.susie-decor--hard-skills {
  width: 118px;
  top: 207px;
  left: calc(50% - 210px);
}

/* Cada GIF pertence ao próprio card e repousa sobre sua borda superior. */
.project-card { position: relative; }
.susie-card-decor {
  position: absolute;
  z-index: 5;
  top: -62px;
  right: 20px;
  width: 112px;
  height: auto;
  pointer-events: none;
}
.susie-card-decor--ecomed { width: 98px; }

@media (max-width: 720px) {
  .hero-art {
    height: 340px;
    margin-top: 38px;
    padding-top: 0;
  }

  .hero-art .hero-susie {
    transform: scale(1.8);
    margin-bottom: 30px;
  }

  .hero-art .speech-bubble {
    justify-self: center;
    font-size: 1.1rem;
  }

  .hero-art .pixel-orbit {
    bottom: 36px;
  }

  .susie-decor--skills { width: 68px; top: 126px; right: 4%; }
  .susie-decor--hard-skills { width: 88px; top: 195px; left: auto; right: 11%; }
  .susie-card-decor { top: -48px; right: 14px; width: 82px; }
  .susie-card-decor--ecomed { width: 74px; }
}