💄 add styles to the Question page and make it responsive

This commit has the following changes:-

- added a new class name for the option buttons as "option"
- changed the font of question
- added styles to option buttons
- created a media query for mobile phone with smaller screens (max: 480px)
- changed the grid layout for the media query

src/App.js

@@ -20,27 +20,27 @@ function App() {
     const [results, set_results] = useState([{ lion: 0 }, { cow: 0 }]);
     const [questions] = useState([
         {
-            question: "your question here",
-            one: ["lion wins", "lion"],
-            two: ["cow wins", "cow"],
+            question: "your question here your question here your question here your question here ?",
+            one: ["lion wins lion wins lion wins lion wins", "lion"],
+            two: ["cow wins cow wins cow wins cow wins cow wins", "cow"],
         },
         {
-            question: "your question here",
+            question: "your question here  your question here your question here ?",
             one: ["lion wins", "lion"],
             two: ["cow wins", "cow"],
         },
         {
-            question: "your question here",
+            question: "your question here your question here your question here your question here ?",
             one: ["lion wins", "lion"],
             two: ["cow wins", "cow"],
         },
         {
-            question: "your question here",
+            question: "your question here your question here your question here ?",
             one: ["lion wins", "lion"],
             two: ["cow wins", "cow"],
         },
         {
-            question: "your question here",
+            question: "your question here your question here your question here your question here ?",
             one: ["lion wins", "lion"],
             two: ["cow wins", "cow"],
         },

src/assets/css/Question.css

@@ -14,6 +14,7 @@
 
 .Question {
     grid-area: Question;
+    font-size: 2rem;
 }
 
 .Answer1 {
@@ -26,4 +27,27 @@
 
 .Image {
     grid-area: Image;
+}
+
+.option{
+    font-size: 1.1rem;
+    width: 100%;
+    height: 4rem;
+    border: green 5px solid;
+    border-radius: 13px;    
+}
+
+@media (max-width: 480px){
+    .container{
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr 1fr 1fr 1fr;
+        gap: 10px 10px;
+        grid-auto-flow: row;
+        grid-template-areas:
+        "Question"
+        "Image"
+        "Answer1"
+        "Answer2";
+    }
 }

src/components/Question.jsx

@@ -7,12 +7,12 @@ function Question(props) {
                 <h3>{props.question}</h3>
             </div>
             <div className="Answer1">
-                <button onClick={() => props.on_answer(props.op1[1])}>
+                <button className="option" onClick={() => props.on_answer(props.op1[1])}>
                     {props.op1[0]}
                 </button>
             </div>
             <div className="Answer2">
-                <button onClick={() => props.on_answer(props.op2[1])}>
+                <button className="option" onClick={() => props.on_answer(props.op2[1])}>
                     {props.op2[0]}
                 </button>
             </div>