src/components/misc/pokemon-card/styles.module.scss
.card {
  --animation-delay: 0.1s;
  transform: translateY(var(--space-4));
  opacity: var(--opacity-transparent);
  animation: load 0.4s forwards;
  border-radius: var(--radii-lg);

  &:hover .cardWrapper {
    transform: translateY(calc(-1 * var(--space-3)));
  }

  .cardWrapper {
    width: 100%;
    padding: var(--space-5);
    transition: 0.15s;
    background: var(--colors-white);
    border-radius: var(--radii-lg);
    box-shadow: var(--shadow-light);

    display: flex;
    flex-direction: column;
    align-items: center;
  }

  &:nth-child(6n - 4) {
    animation-delay: calc(1 * var(--animation-delay));
  }
  &:nth-child(6n - 3) {
    animation-delay: calc(2 * var(--animation-delay));
  }
  &:nth-child(6n - 2) {
    animation-delay: calc(3 * var(--animation-delay));
  }
  &:nth-child(6n - 1) {
    animation-delay: calc(4 * var(--animation-delay));
  }
  &:nth-child(6n) {
    animation-delay: calc(5 * var(--animation-delay));
  }
}

.figure {
  width: 30%;
  min-width: 6rem;
  height: 0;
  margin: 0 auto;

  img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center;
    transform: translateY(calc(-1 * (var(--space-4) + 50%)));
  }
}

.id {
  margin-top: var(--space-4);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--colors-gray-600);
}

.name {
  margin: var(--space-1) 0;
  font-size: var(--font-size-lg);
  text-transform: capitalize;
}

.types {
  width: 100%;
  margin-top: var(--space-1);

  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;

  p {
    padding: var(--space-px) var(--space-2);
    font-size: var(--font-size-xxs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    border-radius: var(--radii-sm);

    color: var(--colors-color);
    background: var(--colors-background);
  }
}

@keyframes load {
  100% {
    transform: translateY(0);
    opacity: var(--opacity-default);
  }
}

@media screen and (max-width: 980px) {
  .card {
    &:hover .cardWrapper {
      transform: none;
    }
  }
}
