✨ feat(css): Add padding for smaller screen resolutions

- Introduces 16px padding on left and right for screens up to 820px wide
- Improves visual spacing on tablets and mobile devices

style.css

@@ -138,118 +138,9 @@ body {
 }
 
 /* RESPONSIVIDADE*/
-@media screen and (max-width: 768px) {
-  .card {
-    position: relative;
-    width: 300px;
-    height: 350px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: 0.5s;
-    transition-delay: 0.5s;
-  }
-
-  .card:hover {
-    width: 300px;
-  }
-
-  .card .circle {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .card .circle::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 20px;
-    background: #c33923;
-    border: 8px solid var(--clr);
-    transition: 0.5s, background 0.5s;
-    filter: drop-shadow(0 0 10px var(--clr)) drop-shadow(0 0 60px var(--clr));
-  }
-
-  .card .circle .logo {
-    position: relative;
-    width: 250px;
-    transition: 0.5s;
-    z-index: 10;
-  }
-
-  .card .product_img {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) scale(0) rotate(315deg);
-    max-height: 200px; /* Limita a altura máxima */
-    width: auto; /* Mantém a proporção */
-    opacity: 0; /* Começa invisível */
-    transition: 0.5s ease-in-out;
-    z-index: 5;
-  }
-
-  .card .content {
-    position: absolute;
-    width: 50%;
-    left: 20%;
-    padding: 20px;
-    opacity: 0;
-    transition: 0.5s;
-    visibility: hidden;
-    z-index: 15;
-  }
-
-  /* Efeitos de hover */
-  .card:hover .circle::before {
-    background: var(--clr);
-  }
-
-  .card:hover .circle .logo {
-    transform: scale(0);
-  }
-
-  .card:hover .product_img {
-    top: 25%;
-    left: 75%;
-    max-height: 300px; /* Ajusta altura no hover */
-    opacity: 1; /* Torna visível */
-    transform: translate(-50%, -50%) scale(1) rotate(15deg);
-  }
-
-  .card:hover .content {
-    opacity: 1;
-    visibility: visible;
-    left: 20px;
-  }
-
-  /* Ajustes para dispositivos muito pequenos */
-  @media screen and (max-width: 480px) {
-    .card {
-      width: 280px;
-      height: 320px;
-    }
-
-    .card .circle .logo {
-      width: 200px;
-    }
-
-    .card .product_img {
-      max-height: 150px;
-    }
-
-    .card:hover .product_img {
-      max-height: 250px;
-    }
+@media screen and (max-width: 820px) {
+  body {
+    padding-left: 16px;
+    padding-right: 16px;
   }
 }