header {
    display: flex;
    justify-content: center;
  }

.pokemons {
    display: grid;
}

.pokemon {
    position: relative;
    margin: 0.3rem;
    padding: 0.5rem 1rem;
    color: #fffffff9;
    border-radius: 1rem;
    height: clamp(100px, 25vw, 200px);
    box-shadow: 0 1px 5px 0 #999999;
}

.pokemon-info {
    z-index: 3;
}


section.pokemon-info {
    height: 90%;
}

section.pokemon-info .name {
    margin-bottom: .5rem;
    font-size: clamp(12px, 3vw, 18px);
}

section.pokemon-info .number {
    color: black;
    opacity: 0.3;
    text-align: right;
}

section.pokemon-info .detail {
    display: flex;
    justify-content: space-between;
    height: 100%;
    overflow: hidden;
}

section.pokemon-info .types {
    text-align: center;
}

section.pokemon-info .types .type {
    padding: .25rem 0;
    margin: 0.25rem 0;
    justify-content: center;
    width: clamp(50px, 10vw, 70px);
}

.pokemon .detail .img-pokemon {
    align-self: end;
    height: 100%; 

}

@media (max-width: 400px) {
    .pokemons {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 400px) and (max-width: 992px) {
  .pokemons {
    grid-template-columns: 1fr 1fr;
}
}

@media (min-width: 992px) {
  .pokemons {
    grid-template-columns: 1fr 1fr 1fr;
  }
}