From f364132f37a6479a3521ec0fede5aae1afed08b9 Mon Sep 17 00:00:00 2001
From: Otavio Sousa <130789571+otaviossousa@users.noreply.github.com>
Date: Sun, 28 Jul 2024 11:54:51 -0300
Subject: [PATCH] new test

---
 css/style.css | 70 +++++++++++++++++++++++++--------------------------
 1 file changed, 34 insertions(+), 36 deletions(-)

diff --git a/css/style.css b/css/style.css
index 716b6a0..e05992d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -409,62 +409,60 @@ body main {
   gap: 20px;
 }
 
-/* Regras de Mídia para Responsividade */
-@media (max-width: 1024px) {
-  .product-card-wrapper {
-    flex: 1 1 calc(25% - 10px); /* Quatro colunas */
-    max-width: calc(25% - 10px); /* Ajuste a largura conforme necessário */
-  }
-}
-
+/* Responsividade para a header dos jogos */
 @media (max-width: 768px) {
-  .product-card-wrapper {
-    flex: 1 1 calc(33.333% - 10px); /* Três colunas */
-    max-width: calc(33.333% - 10px); /* Ajuste a largura conforme necessário */
+  .products-dock-header div {
+    flex-direction: row;
+    align-items: flex-start;
   }
 
-  .products-dock-header > div {
-    flex-direction: column;
-    align-items: flex-start;
+
+  .btn__primary.btn__small {
+    width: 30%;
+    text-align: center;
+    margin-top: 10px;
   }
 
-  .products-dock-header > div > h2,
-  .products-dock-header > div > a {
-    width: 100%;
-    text-align: left;
+  .products-dock-subtitle {
+    font-size: 1rem;
+    margin-top: 5px;
   }
 }
 
-@media (max-width: 480px) {
+/* Ajustes de responsividade para os cards de produto */
+@media (max-width: 768px) {
   .product-card-wrapper {
-    flex: 1 1 calc(20% - 5px); /* Cinco colunas */
-    max-width: calc(20% - 5px); /* Ajuste a largura conforme necessário */
-    margin: 0; /* Remove margens */
-    padding: 5px; /* Reduz padding */
+    flex: 0 1  auto; 
+    max-width: auto;
+    flex-direction: row;
+  }
+
+  .product-card--content {
+    padding: 10px;
   }
 
   .product-title {
-    font-size: 0.7rem; /* Reduz tamanho da fonte */
+    font-size: 0.9rem; /* Ajuste o tamanho da fonte para telas menores */
   }
 
-  .product-button--text {
-    font-size: 0.6rem; /* Reduz tamanho da fonte */
+  .product-info {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 10px;
   }
 
-  .product-img img {
-    width: 100%;
-    height: auto;
+  .product-button {
+    width: auto;
+    text-align: center;
   }
 
-  .products-dock-header > div {
-    flex-direction: column;
-    align-items: flex-start;
+  .wishlist-btn img {
+    width: 1.5rem; 
+    height: 1.5rem;
   }
 
-  .products-dock-header > div > h2,
-  .products-dock-header > div > a {
-    width: 100%;
-    text-align: left;
+  .product-discount__badge {
+    font-size: auto;
   }
 }
 /* -----------------------------------------------------------< Pagina principal >------------------------------------------------------*/