git added new style , little style

app/Components/Selection/Selection.css

@@ -15,6 +15,10 @@
 }
 
 .buttonSelection {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
   width: 50px;
   height: 50px;
   border-radius: 100%;
@@ -24,6 +28,13 @@
   padding: 5px;
 }
 
+.imageSelection {
+  width: 30px;
+  height: 30px;
+  position: relative;
+  object-fit: contain;
+}
+
 .buttonSelection:hover {
   transform: scale(1.1);
   background-color: #d0e1ff;
@@ -41,3 +52,31 @@
   color: #333;
   text-align: center;
 }
+
+@media(max-height:550px) {
+  .buttonLabel {
+    margin-top: 2px;
+    font-size: 1rem;
+  }
+}
+
+@media(max-height:550px) {
+  .selection {
+    margin-bottom: 0rem;
+    gap: 2rem;
+
+  }
+
+  .buttonSelection {
+    width: 40px;
+    height: 40px;
+    padding: 0px;
+  }
+
+  .imageSelection {
+    width: 20px;
+    height: 20px;
+    position: relative;
+    object-fit: contain;
+  }
+}

app/Components/Selection/Selection.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import "./Selection.css";
+import Image from "next/image";
 
 export default function Selection({
   plataformasInscritas = [],
@@ -24,11 +25,11 @@ export default function Selection({
     },
     {
       name: "MACINTOSH",
-      img: "apple.png",
+      img: "/apple.png",
     },
     {
       name: "PROFESORES",
-      img: "teacher.png",
+      img: "/teacher.png",
     },
   ];
 
@@ -45,16 +46,16 @@ export default function Selection({
           onClick={() => handleSelect(option.name)}
         >
           <button
-            className={`buttonSelection ${
-              selected === option.name ? "active" : ""
-            }`}
+            className={`buttonSelection ${selected === option.name ? "active" : ""
+              }`}
           >
-            <img
-              src={option.img}
-              alt={option.name.toLowerCase()}
-              height={30}
-              width={30}
-            />
+            <div className="imageSelection">
+              <Image
+                src={option.img}
+                alt={option.name.toLowerCase()}
+                fill
+              />
+            </div>
           </button>
           <span className="buttonLabel">{option.name}</span>
         </div>

app/Components/Selection/SelectionCo.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import "./Selection.css";
+import Image from "next/image";
 
 export default function SelectionCo({
   plataformasInscritas = [],
@@ -46,16 +47,16 @@ export default function SelectionCo({
           onClick={() => handleSelect(option.name)}
         >
           <button
-            className={`buttonSelection ${
-              selected === option.name ? "active" : ""
-            }`}
+            className={`buttonSelection ${selected === option.name ? "active" : ""
+              }`}
           >
-            <img
-              src={option.img}
-              alt={option.name.toLowerCase()}
-              height={30}
-              width={30}
-            />
+            <div className="imageSelection">
+              <Image
+                src={option.img}
+                alt={option.name.toLowerCase()}
+                fill
+              />
+            </div>
           </button>
           <span className="buttonLabel">{option.name}</span>
         </div>