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,6 +9,15 @@
   margin-bottom: 16px;
 }
 
+@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;
 }

styles/css/vtex.breadcrumb.css

@@ -12,12 +12,8 @@
   align-items: center;
   flex-wrap: wrap;
   margin-left: 40px;
-}
-@media (max-width: 1025px) and (min-width: 768px) {
-  .container {
   padding: 0 0 16px;
 }
-}
 .container .homeLink {
   padding: 0;
 }
@@ -35,3 +31,8 @@
   line-height: 19px;
   color: #929292;
 }
+@media (max-width: 768px) and (min-width: 375px) {
+  .container .term {
+    padding-left: 0;
+  }
+}

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;

styles/css/vtex.product-identifier.css

@@ -27,3 +27,10 @@
     margin-bottom: 24px;
   }
 }
+@media (max-width: 768px) and (min-width: 375px) {
+  .product-identifier__value {
+    text-align: left;
+    float: left;
+    margin-bottom: 24px;
+  }
+}

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;
 }

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;
@@ -26,3 +31,8 @@
   color: #575757;
   margin: 0;
 }
+@media (max-width: 768px) and (min-width: 375px) {
+  .container--slider-title .wrapper--slider-title .heading--slider-title {
+    font-size: 20px;
+  }
+}

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;

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,12 +29,28 @@
     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;
+}
+@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;
   border: none;
@@ -50,12 +71,26 @@
     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;
+}
+@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;
   border: none;
@@ -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%;
@@ -98,3 +150,9 @@
     grid-template-columns: 100%;
   }
 }
+@media (max-width: 768px) and (min-width: 375px) {
+  .container--description-block .contentContainer .contentItem {
+    display: grid;
+    grid-template-columns: 100%;
+  }
+}

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;
-  }
   .homeLink {
     padding: 0;
   }
@@ -26,4 +24,10 @@
     line-height: 19px;
     color: #929292;
   }
+
+  .term {
+    @media (max-width: 768px) and (min-width: 375px) {
+      padding-left: 0;
+    }
+  }
 }

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;

styles/sass/pages/product/store-components/vtex.store-components.scss

@@ -9,9 +9,59 @@
   }
 }
 
+.swiperCaret {
+  display: none;
+}
+
+.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;
@@ -27,41 +77,7 @@
           }
         }
       }
-
-.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;
-  }
-}
-
-.productVideo,
-.videoContainer {
-  @media (max-width: 1920px) and (min-width: 1024px) {
-    height: 664px;
-  }
-  @media (max-width: 1025px) and (min-width: 768px) {
-    height: 944px;
   }
 }
 
@@ -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,9 +474,16 @@
             font-size: 14px;
             line-height: 19px;
           }
+          @media (max-width: 768px) and (min-width: 375px) {
+            font-size: 14px;
+            line-height: 19px;
           }
         }
       }
+      .pointerEventsNone{
+        display: none;
+      }
+    }
   }
 }
 

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;
+  }
 }

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;
   }

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;
+      }
     }
   }
 }

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;
+      @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;
+      @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%;
+      }
     }
   }
 }