.pokemons {
	display: grid;
    grid-template-columns: 1fr ;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pokemon {
	display: flex;
	flex-direction: column;
	margin: .5rem;
	padding: 1rem 1rem;
	border-radius: 1rem;
	/* height: 100px; */
}

.pokemon .number {
	color: #000;
	opacity: .3;
	text-align: right;
	font-size: .625rem;
}

.pokemon .name {
	color: #fff;
	margin-bottom: 0;	
	padding-left: 2rem;
	text-transform: capitalize;
}

.pokemon .detail {
	display: flex;
    flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.pokemon .detail .types {
	padding: 0;
	margin: 0;
	list-style: none;
}

.pokemon .detail .types .type {
	color: #fff;
	padding: .25rem .5rem;
	margin: .25rem 0;
	font-size: .625rem;
	text-align: center;
	border-radius: 1rem;
	filter: brightness(1.1);	
}

.pokemon .detail img {
	max-width: 100%;
	height: 100px;
	align-self: flex-end;
}

.pagination {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 1rem;
}

.pagination button {
	padding: .25rem .5rem;
	margin: .25rem 0;
	font-size: .625rem;
	background-color: #6c79db;
	border: none;
	border-radius: 1rem;
	color: #fff;
	transition:all 0.3s ease;
	opacity:0.5;
}

.pagination button:hover {
	opacity:1;
}

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

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