Pequeñas mejoras para responsive

Quiz

Author: reposocratech

src/App.css

@@ -44,8 +44,9 @@ body {
 
 h1 {
   text-align: center;
-  margin-block: 1rem;
-  font-size: clamp(2.5rem, calc(2rem + 1.333vw), 3rem);
+  margin-block-start: 1rem;
+  margin-block-end: 2rem;
+  font-size: clamp(1.875rem, calc(0.75rem + 3vw), 3rem);
   text-shadow: 2px 2px 3px var(--info-color);
   display: flex;
   flex-direction: column;
@@ -55,7 +56,7 @@ h1 {
   row-gap: 0.5rem;
 
   .img {
-    width: 14rem;
+    width: clamp(11.25rem, calc(8.5rem + 7.333vw), 14rem);
     padding: 0.5rem;
 
     img {

src/components/footer/footer.css

@@ -1,7 +1,8 @@
 @scope (footer) {
   :scope {
     text-align: center;
-    padding: 1rem;
+    padding-block-end: 1rem;
+    padding-block-start: 2rem;
 
     p,
     a {

src/components/quiz/answer/answer.css

@@ -6,6 +6,7 @@
   align-items: center;
   column-gap: 1rem;
   font-size: 1.1rem;
+  transition: filter 0.3s;
 
   &.correct {
     background-color: var(--correct-color);
@@ -18,6 +19,10 @@
 
   &.cursor {
     cursor: pointer;
+
+    &:hover {
+      filter: brightness(1.3);
+    }
   }
 
   input {