2023-02-03 17:14:03 +00:00
15 changed files with 384 additions and 112 deletions
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@ -1,6 +1,6 @@
 /* Product Quantity and Add To Cart Button */

-[class*="html--cart-content"] {
+:global(.agenciamagma-store-theme-5-x-html--cart-content) {
  display: flex;
  align-items: center;
  justify-content: space-between;
@ -9,10 +9,19 @@
  margin-bottom: 16px;
 }

-[data-testid="product-quantity"]{
+@media (max-width: 768px) and (min-width: 375px) {
+  :global(.agenciamagma-store-theme-5-x-html--cart-content) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+
+
+[data-testid="product-quantity"] {
  height: 49px;
 }

-[data-testid="add-to-cart-button"]{
+[data-testid="add-to-cart-button"] {
  width: 100%;
 }
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@ -12,11 +12,7 @@
  align-items: center;
  flex-wrap: wrap;
  margin-left: 40px;
-}
-@media (max-width: 1025px) and (min-width: 768px) {
-  .container {
-    padding: 0 0 16px;
-  }
+  padding: 0 0 16px;
 }
 .container .homeLink {
  padding: 0;
@ -34,4 +30,9 @@
  font-size: 14px;
  line-height: 19px;
  color: #929292;
+}
+@media (max-width: 768px) and (min-width: 375px) {
+  .container .term {
+    padding-left: 0;
+  }
 }
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@ -39,6 +39,11 @@
    grid-template-columns: 100%;
  }
 }
+@media (max-width: 768px) and (min-width: 375px) {
+  .flexRowContent--product-main-content {
+    padding: 0 40px;
+  }
+}

 .flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child {
  background: #000000;
@ -47,6 +52,12 @@
  border: none;
  border-radius: 0;
 }
+@media (max-width: 768px) and (min-width: 375px) {
+  .flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child {
+    height: 74px;
+    margin-top: 10px;
+  }
+}
 .flexRow .flexRowContent .stretchChildrenWidth :global(.vtex-button):first-child :global(.vtex-button__label)::before {
  content: "ADICIONAR À SACOLA";
  font-family: "Open Sans", sans-serif;
--- a/styles/css/vtex.product-identifier.css
+++ b/styles/css/vtex.product-identifier.css
@ -26,4 +26,11 @@
    float: left;
    margin-bottom: 24px;
  }
+}
+@media (max-width: 768px) and (min-width: 375px) {
+  .product-identifier__value {
+    text-align: left;
+    float: left;
+    margin-bottom: 24px;
+  }
 }
--- a/styles/css/vtex.product-quantity.css
+++ b/styles/css/vtex.product-quantity.css
@ -7,6 +7,11 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+@media (max-width: 768px) and (min-width: 375px) {
+  .quantitySelectorContainer {
+    margin: 0;
+  }
+}
 .quantitySelectorContainer .quantitySelectorTitle {
  display: none;
 }
--- a/styles/css/vtex.rich-text.css
+++ b/styles/css/vtex.rich-text.css
@ -18,6 +18,11 @@
    margin-bottom: 24px;
  }
 }
+@media (max-width: 768px) and (min-width: 375px) {
+  .container--slider-title {
+    margin-bottom: 24px;
+  }
+}
 .container--slider-title .wrapper--slider-title .heading--slider-title {
  font-weight: 400;
  font-size: 24px;
@ -25,4 +30,9 @@
  text-align: center;
  color: #575757;
  margin: 0;
+}
+@media (max-width: 768px) and (min-width: 375px) {
+  .container--slider-title .wrapper--slider-title .heading--slider-title {
+    font-size: 20px;
+  }
 }
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@ -18,69 +18,83 @@
  }
 }

-.carouselGaleryThumbs {
+.swiperCaret {
+  display: none;
+}
+
+.productImagesContainer .carouselContainer .carouselGaleryCursor {
+  margin: 0 !important;
+  width: auto;
+  padding: 0;
+}
+@media (max-width: 1920px) and (min-width: 1024px) {
+  .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+.productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main {
+  object-fit: unset !important;
+}
+@media (max-width: 1920px) and (min-width: 1024px) {
+  .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main {
+    max-height: unset !important;
+  }
+}
+@media (max-width: 1025px) and (min-width: 768px) {
+  .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main {
+    height: 944px !important;
+  }
+}
+@media (max-width: 768px) and (min-width: 375px) {
+  .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productImage .productImageTag--main {
+    width: 99.67% !important;
+    height: 296px !important;
+    object-fit: cover !important;
+  }
+}
+@media (max-width: 1920px) and (min-width: 1024px) {
+  .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo,
+  .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .videoContainer {
+    height: 664px;
+  }
+}
+@media (max-width: 1025px) and (min-width: 768px) {
+  .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo,
+  .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .videoContainer {
+    height: 944px;
+  }
+}
+@media (max-width: 768px) and (min-width: 375px) {
+  .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .productVideo,
+  .productImagesContainer .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .productImagesGallerySlide .videoContainer {
+    height: 296px;
+  }
+}
+.productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs {
  margin-top: 16px;
  height: 90px !important;
 }
-.carouselGaleryThumbs .productImagesThumb {
+@media (max-width: 768px) and (min-width: 375px) {
+  .productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs {
+    display: block;
+  }
+}
+.productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs .productImagesThumb {
  width: 10% !important;
  height: 10% !important;
  margin-right: 16px;
  width: 90px !important;
  height: 90px !important;
 }
-.carouselGaleryThumbs .productImagesThumb .figure,
-.carouselGaleryThumbs .productImagesThumb .thumbImg {
+.productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs .productImagesThumb .figure,
+.productImagesContainer .carouselContainer .carouselGaleryCursor .carouselGaleryThumbs .productImagesThumb .thumbImg {
  width: 100%;
  height: 100%;
  border-radius: 8px;
 }

-.carouselGaleryCursor {
-  margin: 0 !important;
-  width: auto;
-  padding: 0;
-}
-
-.swiperCaret {
-  display: none;
-}
-
-@media (max-width: 1920px) and (min-width: 1024px) {
-  .productImagesGallerySwiperContainer {
-    width: 100%;
-    margin-left: 0;
-    margin-right: 0;
-  }
-}
-
-.productImageTag--main {
-  object-fit: unset !important;
-}
-@media (max-width: 1920px) and (min-width: 1024px) {
-  .productImageTag--main {
-    max-height: unset !important;
-  }
-}
-@media (max-width: 1025px) and (min-width: 768px) {
-  .productImageTag--main {
-    height: 944px !important;
-  }
-}
-
-@media (max-width: 1920px) and (min-width: 1024px) {
-  .productVideo,
-  .videoContainer {
-    height: 664px;
-  }
-}
-@media (max-width: 1025px) and (min-width: 768px) {
-  .productVideo,
-  .videoContainer {
-    height: 944px;
-  }
-}
-
 .productNameContainer {
  text-align: right;
 }
@ -88,6 +102,14 @@
  .productNameContainer {
    text-align: left;
    margin-top: 32px;
+    margin-bottom: 8px;
+  }
+}
+@media (max-width: 768px) and (min-width: 375px) {
+  .productNameContainer {
+    text-align: left;
+    margin-top: 32px;
+    margin-bottom: 8px;
  }
 }
 .productNameContainer .productBrand {
@ -265,6 +287,11 @@
  border-radius: 0;
  width: 231px;
 }
+@media (max-width: 768px) and (min-width: 375px) {
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) {
+    width: 100%;
+  }
+}
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder {
  color: #afafaf;
  font-weight: 400;
@ -286,6 +313,13 @@
  left: 312px;
  bottom: 35px;
 }
+@media (max-width: 768px) and (min-width: 375px) {
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
+    left: 81.1%;
+    bottom: 0;
+    top: 8px;
+  }
+}
 .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child :last-child {
  display: none;
 }
@ -397,6 +431,13 @@
    margin-bottom: 16px;
  }
 }
+@media (max-width: 768px) and (min-width: 375px) {
+  .productImagesContainer--image-description {
+    width: 100%;
+    left: 0;
+    margin-bottom: 16px;
+  }
+}
 .productImagesContainer--image-description .productImageTag--image-description--main {
  max-height: unset !important;
 }
@ -412,6 +453,12 @@
    width: 100%;
  }
 }
+@media (max-width: 768px) and (min-width: 375px) {
+  .productDescriptionContainer {
+    margin-left: 0;
+    width: 100%;
+  }
+}
 .productDescriptionContainer .productDescriptionTitle {
  margin-bottom: 8px;
  font-weight: 400;
@ -424,6 +471,11 @@
    font-size: 20px;
  }
 }
+@media (max-width: 768px) and (min-width: 375px) {
+  .productDescriptionContainer .productDescriptionTitle {
+    font-size: 20px;
+  }
+}
 .productDescriptionContainer .productDescriptionText .container {
  padding: 0;
 }
@ -439,6 +491,15 @@
    line-height: 19px;
  }
 }
+@media (max-width: 768px) and (min-width: 375px) {
+  .productDescriptionContainer .productDescriptionText .container .content :first-child {
+    font-size: 14px;
+    line-height: 19px;
+  }
+}
+.productDescriptionContainer .productDescriptionText .container .pointerEventsNone {
+  display: none;
+}

 .installmentsPrice {
  display: none;
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@ -11,6 +11,11 @@
  padding: 0 40px;
  margin-top: 16px;
 }
+@media (max-width: 768px) and (min-width: 375px) {
+  .container--description-block {
+    margin-top: 40px;
+  }
+}
 .container--description-block .listContainer {
  justify-content: space-around;
  border-bottom: 1px solid #b9b9b9;
@ -24,11 +29,27 @@
    margin-bottom: 16px;
  }
 }
+@media (max-width: 768px) and (min-width: 375px) {
+  .container--description-block .listContainer {
+    flex-direction: column;
+    border-top: 1px solid #b9b9b9;
+    margin-bottom: 16px;
+  }
+}
 .container--description-block .listContainer .listItem {
  margin: 0;
  padding: 0;
  height: 38px;
-  margin-bottom: 16px;
+}
+@media (max-width: 1025px) and (min-width: 768px) {
+  .container--description-block .listContainer .listItem {
+    margin-bottom: 16px;
+  }
+}
+@media (max-width: 768px) and (min-width: 375px) {
+  .container--description-block .listContainer .listItem {
+    margin-bottom: 16px;
+  }
 }
 .container--description-block .listContainer .listItem :global(.vtex-button) {
  background-color: unset;
@ -50,11 +71,25 @@
    justify-content: left;
  }
 }
+@media (max-width: 768px) and (min-width: 375px) {
+  .container--description-block .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
+    justify-content: left;
+  }
+}
 .container--description-block .listContainer .listItemActive {
  margin: 0;
  padding: 0;
  height: 38px;
-  margin-bottom: 16px;
+}
+@media (max-width: 1025px) and (min-width: 768px) {
+  .container--description-block .listContainer .listItemActive {
+    margin-bottom: 16px;
+  }
+}
+@media (max-width: 768px) and (min-width: 375px) {
+  .container--description-block .listContainer .listItemActive {
+    margin-bottom: 16px;
+  }
 }
 .container--description-block .listContainer .listItemActive :global(.vtex-button) {
  background-color: unset;
@ -74,6 +109,12 @@
    border-bottom: unset;
  }
 }
+@media (max-width: 768px) and (min-width: 375px) {
+  .container--description-block .listContainer .listItemActive :global(.vtex-button) {
+    border-bottom: unset;
+    width: 82px;
+  }
+}
 .container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
  padding: 0;
 }
@ -82,12 +123,23 @@
    justify-content: left;
  }
 }
+@media (max-width: 768px) and (min-width: 375px) {
+  .container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
+    justify-content: left;
+  }
+}
@media (max-width: 1025px) and (min-width: 768px) {
  .container--description-block .contentContainer {
    border-bottom: 1px solid #b9b9b9;
    padding-bottom: 16px;
  }
 }
+@media (max-width: 768px) and (min-width: 375px) {
+  .container--description-block .contentContainer {
+    border-bottom: 1px solid #b9b9b9;
+    padding-bottom: 16px;
+  }
+}
 .container--description-block .contentContainer .contentItem {
  display: grid;
  grid-template-columns: 50% 50%;
@ -97,4 +149,10 @@
    display: grid;
    grid-template-columns: 100%;
  }
+}
+@media (max-width: 768px) and (min-width: 375px) {
+  .container--description-block .contentContainer .contentItem {
+    display: grid;
+    grid-template-columns: 100%;
+  }
 }
--- a/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/breadcrumb/vtex.breadcrumb.scss
@ -3,9 +3,7 @@
  align-items: center;
  flex-wrap: wrap;
  margin-left: 40px;
-  @media (max-width: 1025px) and (min-width: 768px) {
-    padding: 0 0 16px;
-  }
+  padding: 0 0 16px;
  .homeLink {
    padding: 0;
  }
@ -26,4 +24,10 @@
    line-height: 19px;
    color: #929292;
  }
+
+  .term {
+    @media (max-width: 768px) and (min-width: 375px) {
+      padding-left: 0;
+    }
+  }
 }
--- a/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/flex-layout/vtex.flex-layout.scss
@ -26,6 +26,9 @@
    display: grid;
    grid-template-columns: 100%;
  }
+  @media (max-width: 768px) and (min-width: 375px) {
+    padding: 0 40px;
+  }
 }

 //Botao add Cart
@ -39,6 +42,10 @@
        height: 49px;
        border: none;
        border-radius: 0;
+        @media (max-width: 768px) and (min-width: 375px) {
+          height: 74px;
+          margin-top: 10px;
+        }
        :global(.vtex-button__label)::before {
          content: "ADICIONAR À SACOLA";
          font-family: "Open Sans", sans-serif;
--- a/styles/sass/pages/product/store-components/vtex.store-components.scss
+++ b/styles/sass/pages/product/store-components/vtex.store-components.scss
@ -9,59 +9,75 @@
  }
 }

-.carouselGaleryThumbs {
-  margin-top: 16px;
-  height: 90px !important;
-  .productImagesThumb {
-    width: 10% !important;
-    height: 10% !important;
-    margin-right: 16px;
-    width: 90px !important;
-    height: 90px !important;
-
-    .figure,
-    .thumbImg {
-      width: 100%;
-      height: 100%;
-      border-radius: 8px;
-    }
-  }
-}
-
-.carouselGaleryCursor {
-  margin: 0 !important;
-  width: auto;
-  padding: 0;
-}
-
 .swiperCaret {
  display: none;
 }

-.productImagesGallerySwiperContainer {
-  @media (max-width: 1920px) and (min-width: 1024px) {
-    width: 100%;
-    margin-left: 0;
-    margin-right: 0;
-  }
-}
-.productImageTag--main {
-  object-fit: unset !important;
-  @media (max-width: 1920px) and (min-width: 1024px) {
-    max-height: unset !important;
-  }
-  @media (max-width: 1025px) and (min-width: 768px) {
-    height: 944px !important;
-  }
-}
+.productImagesContainer {
+  .carouselContainer {
+    .carouselGaleryCursor {
+      margin: 0 !important;
+      width: auto;
+      padding: 0;
+      .productImagesGallerySwiperContainer {
+        @media (max-width: 1920px) and (min-width: 1024px) {
+          width: 100%;
+          margin-left: 0;
+          margin-right: 0;
+        }
+        .productImagesGallerySlide {
+          .productImage {
+            .productImageTag--main {
+              object-fit: unset !important;
+              @media (max-width: 1920px) and (min-width: 1024px) {
+                max-height: unset !important;
+              }
+              @media (max-width: 1025px) and (min-width: 768px) {
+                height: 944px !important;
+              }
+              @media (max-width: 768px) and (min-width: 375px) {
+                width: 99.67% !important;
+                height: 296px !important;
+                object-fit: cover !important;
+              }
+            }
+          }
+          .productVideo,
+          .videoContainer {
+            @media (max-width: 1920px) and (min-width: 1024px) {
+              height: 664px;
+            }
+            @media (max-width: 1025px) and (min-width: 768px) {
+              height: 944px;
+            }
+            @media (max-width: 768px) and (min-width: 375px) {
+              height: 296px;
+            }
+          }
+        }
+      }
+      .carouselGaleryThumbs {
+        margin-top: 16px;
+        height: 90px !important;
+        @media (max-width: 768px) and (min-width: 375px) {
+          display: block;
+        }
+        .productImagesThumb {
+          width: 10% !important;
+          height: 10% !important;
+          margin-right: 16px;
+          width: 90px !important;
+          height: 90px !important;

-.productVideo,
-.videoContainer {
-  @media (max-width: 1920px) and (min-width: 1024px) {
-    height: 664px;
-  }
-  @media (max-width: 1025px) and (min-width: 768px) {
-    height: 944px;
+          .figure,
+          .thumbImg {
+            width: 100%;
+            height: 100%;
+            border-radius: 8px;
+          }
+        }
+      }
+    }
  }
 }

@ -72,6 +88,12 @@
  @media (max-width: 1025px) and (min-width: 768px) {
    text-align: left;
    margin-top: 32px;
+    margin-bottom: 8px;
+  }
+  @media (max-width: 768px) and (min-width: 375px) {
+    text-align: left;
+    margin-top: 32px;
+    margin-bottom: 8px;
  }
  .productBrand {
    font-weight: 300;
@ -256,6 +278,9 @@
        height: 49px;
        border-radius: 0;
        width: 231px;
+        @media (max-width: 768px) and (min-width: 375px) {
+          width: 100%;
+        }
        :global(.vtex-address-form-4-x-input)::placeholder {
          color: #afafaf;
          font-weight: 400;
@ -277,6 +302,11 @@
        position: relative;
        left: 312px;
        bottom: 35px;
+        @media (max-width: 768px) and (min-width: 375px) {
+          left: calc(100% - 18.9%);
+          bottom: 0;
+          top: 8px;
+        }
        :last-child {
          display: none;
        }
@ -397,6 +427,11 @@
    left: 0;
    margin-bottom: 16px;
  }
+  @media (max-width: 768px) and (min-width: 375px) {
+    width: 100%;
+    left: 0;
+    margin-bottom: 16px;
+  }
  & .productImageTag--image-description--main {
    max-height: unset !important;
  }
@ -409,6 +444,10 @@
    margin-left: 0;
    width: 100%;
  }
+  @media (max-width: 768px) and (min-width: 375px) {
+    margin-left: 0;
+    width: 100%;
+  }
  .productDescriptionTitle {
    margin-bottom: 8px;
    font-weight: 400;
@ -418,6 +457,9 @@
    @media (max-width: 1025px) and (min-width: 768px) {
      font-size: 20px;
    }
+    @media (max-width: 768px) and (min-width: 375px) {
+      font-size: 20px;
+    }
  }
  .productDescriptionText {
    & .container {
@ -432,8 +474,15 @@
            font-size: 14px;
            line-height: 19px;
          }
+          @media (max-width: 768px) and (min-width: 375px) {
+            font-size: 14px;
+            line-height: 19px;
+          }
        }
      }
+      .pointerEventsNone{
+        display: none;
+      }
    }
  }
 }
--- a/styles/sass/pages/product/vtex.product-identifier.scss
+++ b/styles/sass/pages/product/vtex.product-identifier.scss
@ -17,4 +17,9 @@
    float: left;
    margin-bottom: 24px;
  }
+  @media (max-width: 768px) and (min-width: 375px) {
+    text-align: left;
+    float: left;
+    margin-bottom: 24px;
+  }
 }
--- a/styles/sass/pages/product/vtex.product-quantity.scss
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@ -1,6 +1,9 @@
 //product quantity

 .quantitySelectorContainer {
+  @media (max-width: 768px) and (min-width: 375px) {
+    margin: 0;
+  }
  .quantitySelectorTitle {
    display: none;
  }
--- a/styles/sass/pages/product/vtex.rich-text.scss
+++ b/styles/sass/pages/product/vtex.rich-text.scss
@ -8,6 +8,9 @@
  @media (max-width: 1025px) and (min-width: 768px) {
   margin-bottom: 24px;
  }
+  @media (max-width: 768px) and (min-width: 375px) {
+    margin-bottom: 24px;
+  }
  .wrapper--slider-title {
    .heading--slider-title {
      font-weight: 400;
@ -16,6 +19,9 @@
      text-align: center;
      color: #575757;
      margin: 0;
+      @media (max-width: 768px) and (min-width: 375px) {
+        font-size: 20px;
+      }
    }
  }
 }
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@ -3,6 +3,9 @@
 .container--description-block {
  padding: 0 40px;
  margin-top: 16px;
+  @media (max-width: 768px) and (min-width: 375px) {
+    margin-top: 40px;
+  }
  .listContainer {
    justify-content: space-around;
    border-bottom: 1px solid #b9b9b9;
@ -13,11 +16,21 @@
      border-top: 1px solid #b9b9b9;
      margin-bottom: 16px;
    }
+    @media (max-width: 768px) and (min-width: 375px) {
+      flex-direction: column;
+      border-top: 1px solid #b9b9b9;
+      margin-bottom: 16px;
+    }
    .listItem {
      margin: 0;
      padding: 0;
      height: 38px;
-      margin-bottom: 16px;
+      @media (max-width: 1025px) and (min-width: 768px) {
+        margin-bottom: 16px;
+      }
+      @media (max-width: 768px) and (min-width: 375px) {
+        margin-bottom: 16px;
+      }
      :global(.vtex-button) {
        background-color: unset;
        border: none;
@ -34,6 +47,9 @@
          @media (max-width: 1025px) and (min-width: 768px) {
            justify-content: left;
          }
+          @media (max-width: 768px) and (min-width: 375px) {
+            justify-content: left;
+          }
        }
      }
    }
@ -41,7 +57,12 @@
      margin: 0;
      padding: 0;
      height: 38px;
-      margin-bottom: 16px;
+      @media (max-width: 1025px) and (min-width: 768px) {
+        margin-bottom: 16px;
+      }
+      @media (max-width: 768px) and (min-width: 375px) {
+        margin-bottom: 16px;
+      }
      :global(.vtex-button) {
        background-color: unset;
        border: none;
@ -57,11 +78,18 @@
        @media (max-width: 1025px) and (min-width: 768px) {
          border-bottom: unset;
        }
+        @media (max-width: 768px) and (min-width: 375px) {
+          border-bottom: unset;
+          width: 82px;
+        }
        :global(.vtex-button__label) {
          padding: 0;
          @media (max-width: 1025px) and (min-width: 768px) {
            justify-content: left;
          }
+          @media (max-width: 768px) and (min-width: 375px) {
+            justify-content: left;
+          }
        }
      }
    }
@ -71,6 +99,10 @@
      border-bottom: 1px solid #b9b9b9;
      padding-bottom: 16px;
    }
+    @media (max-width: 768px) and (min-width: 375px) {
+      border-bottom: 1px solid #b9b9b9;
+      padding-bottom: 16px;
+    }
    .contentItem {
      display: grid;
      grid-template-columns: 50% 50%;
@ -78,6 +110,10 @@
        display: grid;
        grid-template-columns: 100%;
      }
+      @media (max-width: 768px) and (min-width: 375px) {
+        display: grid;
+        grid-template-columns: 100%;
+      }
    }
  }
 }