Configure Pokemon CSS correctly

src/features/Pokedex/Pokemon/Pokemon.css

@@ -52,15 +52,7 @@ html {
 }
 
 .thumbnail__container:hover {
-  transform: scale(1.2);
-}
-
-.thumbnail__container .poke__number {
-  font-size: 1.75em;
-}
-
-.info__icon:hover {
-  opacity: 1;
+  transform: scale(1.1);
 }
 
 .info__icon {
@@ -71,9 +63,14 @@ html {
   opacity: 0.5;
 }
 
+.info__icon:hover {
+  opacity: 1;
+}
+
 h3 {
   font-family: 'Press Start 2P', cursive;
   margin-bottom: 0.2rem;
+  color: var(--pokename);
 }
 
 .thumbnail__container .poke__number {
@@ -99,10 +96,6 @@ h3 {
   justify-content: space-between;
 }
 
-.poke__name h3 {
-  margin-top: 0;
-}
-
 .poke__type {
   display: flex;
   grid-gap: 0 10px;
@@ -216,3 +209,43 @@ h3 {
   background: var(--fire);
   box-shadow: 0 0 20px var(--fire);
 }
+
+.image__container {
+  height: 150px;
+  width: 150px;
+}
+
+.poke__name h3 {
+  margin-top: 0;
+}
+
+.MuiTooltip-tooltip{
+  font-size: 15px;
+}
+
+@media screen and (max-width: 767px) {
+  .thumbnail__container .img__thumbnail {
+    width: 90px;
+    height: 90px;
+  }
+  .thumbnail__container {
+    min-width: 175px;
+    height: 225px;
+    margin: 1.25rem 0.75rem;
+    padding: 1.25rem 0;
+  }
+  .image__container {
+    height: 90px;
+    width: 90px;
+  }
+  .thumbnail__container .poke__number {
+    font-size: 1.75em;
+  }
+  .poke__name h3 {
+    margin-top: 20px;
+    font-size: 1em;
+  }
+  .poke__type {
+    margin-top: 20px;
+  }
+}

src/features/Pokedex/Pokemon/Pokemon.tsx

@@ -70,7 +70,7 @@ export default function Pokemon({ name, number, image, types }: PokemonProps) {
 
   return (
     <div
-      className="thumbnail__container"
+      className="thumbnail__container noselect"
       style={{
         background: `linear-gradient(${finalColor[0]}, ${finalColor[1]})`,
       }}
@@ -92,7 +92,7 @@ export default function Pokemon({ name, number, image, types }: PokemonProps) {
         </div>
       </div>
       <div className="image__container">
-        <img src={image} alt={name} height={150} />
+        <img src={image} alt={name} />
       </div>
       <div className="poke__name">
         <h3>{name}</h3>

src/index.css

@@ -37,3 +37,10 @@ code {
   font-family: 'barcadebrawl';
   font-size: 12px;
 }
+
+.pokemon__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}