@adstore/templates 2.0.0 → 2.0.4

package/dist/style.css

@@ -122,11 +122,11 @@ button,
 textarea {
   overflow: auto;
   resize: vertical;
-}._root_1w7t1_1 {
+}._root_10lbg_1 {
   position: relative;
 }
 
-._icon_1w7t1_5 {
+._icon_10lbg_5 {
   width: 30px;
   height: 30px;
   display: flex;
@@ -138,12 +138,12 @@ textarea {
   cursor: pointer;
 }
 
-._iconTarget_1w7t1_17 {
+._iconTarget_10lbg_17 {
   width: 17px;
   height: 20px;
 }
 
-._body_1w7t1_22 {
+._body_10lbg_22 {
   position: absolute;
   left: -30px;
   top: 50px;
@@ -151,12 +151,12 @@ textarea {
   display: none;
 }
 
-._bodyOpen_1w7t1_30 {
-  animation: _simpleGift_in_1w7t1_1 0.3s;
+._bodyOpen_10lbg_30 {
+  animation: _simpleGift_in_10lbg_1 0.3s;
   display: block;
 }
 
-@keyframes _simpleGift_in_1w7t1_1 {
+@keyframes _simpleGift_in_10lbg_1 {
   from {
     opacity: 0;
   }
@@ -164,7 +164,7 @@ textarea {
     opacity: 1;
   }
 }
-._close_1w7t1_43 {
+._close_10lbg_43 {
   position: absolute;
   top: 9px;
   right: 9px;
@@ -173,12 +173,12 @@ textarea {
   align-items: center;
   cursor: pointer;
 }
-._close_1w7t1_43 svg {
+._close_10lbg_43 svg {
   width: 15px;
   height: 15px;
 }
 
-._arrow_1w7t1_57 {
+._arrow_10lbg_57 {
   position: absolute;
   transform: rotate(45deg);
   height: 15px;
@@ -188,39 +188,41 @@ textarea {
   background-color: #333;
 }
 
-._container_1w7t1_67 {
+._container_10lbg_67 {
   background-color: #333;
   padding: 10px 10px 4px 10px;
   border-radius: 4px;
 }
 
-._inner_1w7t1_73 {
+._inner_10lbg_73 {
   display: flex;
   align-items: center;
   margin-bottom: 10px;
   padding-right: 30px;
 }
 
-._logo_1w7t1_80 {
+._logo_10lbg_80 {
   min-width: 60px;
   height: 24px;
   background-color: #eee;
 }
 
-._text_1w7t1_86 {
+._text_10lbg_86 {
   font-size: 17px;
   line-height: 1.2;
   color: #fff;
   margin-left: 10px;
   --accent-color: #ffbc00;
   --accent-size: #fff;
+  --font-family: Roboto, sans-serif;
 }
-._text_1w7t1_86 span {
+._text_10lbg_86 span {
+  font-family: var(--font-family);
   color: var(--accent-color);
   font-size: var(--accent-size);
 }
 
-._button_1w7t1_99 {
+._button_10lbg_101 {
   font-size: 13px;
   line-height: 2;
   border-radius: 4px;
@@ -229,7 +231,11 @@ textarea {
   color: #333;
 }
 
-._legal_1w7t1_108 {
+._buttonAnimated_10lbg_110 {
+  animation: _increase_10lbg_1 3s infinite;
+}
+
+._legal_10lbg_114 {
   position: relative;
   display: flex;
   width: calc(100% + 12px);
@@ -246,7 +252,7 @@ textarea {
   margin-top: 5px;
 }
 
-._legalOpen_1w7t1_125 {
+._legalOpen_10lbg_131 {
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -254,7 +260,7 @@ textarea {
   width: 100%;
 }
 
-._legalText_1w7t1_133 {
+._legalText_10lbg_139 {
   display: inline-block;
   margin: 0;
   -webkit-line-clamp: 1;
@@ -264,23 +270,25 @@ textarea {
   text-overflow: ellipsis;
   padding-right: 25px;
 }
-._legalOpen_1w7t1_125 ._legalText_1w7t1_133 {
+._legalOpen_10lbg_131 ._legalText_10lbg_139 {
   text-align: center;
   padding-right: 0;
 }
 
-._legalButton_1w7t1_148 {
+._legalButton_10lbg_154 {
   cursor: pointer;
   text-decoration: underline;
   position: absolute;
   right: 4px;
   bottom: 4px;
 }
-._legalOpen_1w7t1_125 ._legalButton_1w7t1_148 {
+._legalOpen_10lbg_131 ._legalButton_10lbg_154 {
   position: initial;
+  display: inline-block;
+  margin: 0 3px;
 }
 
-@keyframes _fadein_1w7t1_1 {
+@keyframes _fadein_10lbg_1 {
   0%, 100% {
     opacity: 0;
   }
@@ -288,7 +296,7 @@ textarea {
     opacity: 1;
   }
 }
-@keyframes _pulse_1w7t1_1 {
+@keyframes _pulse_10lbg_1 {
   from {
     transform: scale(1);
   }
@@ -296,7 +304,7 @@ textarea {
     transform: scale(1.05);
   }
 }
-@keyframes _gradient_1w7t1_1 {
+@keyframes _gradient_10lbg_1 {
   0% {
     background-position: 0% 50%;
   }
@@ -307,7 +315,7 @@ textarea {
     background-position: 0% 50%;
   }
 }
-@keyframes _wiggle_1w7t1_1 {
+@keyframes _wiggle_10lbg_1 {
   0%, 7% {
     transform: rotateZ(0);
   }
@@ -329,11 +337,25 @@ textarea {
   40%, 100% {
     transform: rotateZ(0);
   }
-}._root_qnzzi_1 {
+}
+@keyframes _increase_10lbg_1 {
+  0% {
+    transform: scale(1) translateZ(0);
+  }
+  10%, 30% {
+    transform: scale(0.85) translateZ(0);
+  }
+  20%, 40% {
+    transform: scale(1) translateZ(0);
+  }
+  50% {
+    transform: scale(1) translateZ(0);
+  }
+}._root_107vu_1 {
   position: relative;
 }
 
-._icon_qnzzi_5 {
+._icon_107vu_5 {
   width: 30px;
   height: 30px;
   display: flex;
@@ -345,12 +367,12 @@ textarea {
   cursor: pointer;
 }
 
-._iconTarget_qnzzi_17 {
+._iconTarget_107vu_17 {
   width: 17px;
   height: 20px;
 }
 
-._body_qnzzi_22 {
+._body_107vu_22 {
   position: absolute;
   left: -30px;
   top: 50px;
@@ -358,12 +380,12 @@ textarea {
   display: none;
 }
 
-._bodyOpen_qnzzi_30 {
-  animation: _complexGift_in_qnzzi_1 0.3s;
+._bodyOpen_107vu_30 {
+  animation: _complexGift_in_107vu_1 0.3s;
   display: block;
 }
 
-@keyframes _complexGift_in_qnzzi_1 {
+@keyframes _complexGift_in_107vu_1 {
   from {
     opacity: 0;
   }
@@ -371,7 +393,7 @@ textarea {
     opacity: 1;
   }
 }
-._arrow_qnzzi_43 {
+._arrow_107vu_43 {
   position: absolute;
   transform: rotate(45deg);
   height: 15px;
@@ -381,12 +403,12 @@ textarea {
   background-color: #333;
 }
 
-._container_qnzzi_53 {
+._container_107vu_53 {
   background-color: #333;
   border-radius: 4px;
 }
 
-._promotion_qnzzi_58 {
+._promotion_107vu_58 {
   position: absolute;
   top: 12px;
   right: 35px;
@@ -394,7 +416,7 @@ textarea {
   font-size: 8px;
 }
 
-._close_qnzzi_66 {
+._close_107vu_66 {
   position: absolute;
   top: 9px;
   right: 9px;
@@ -403,38 +425,38 @@ textarea {
   align-items: center;
   cursor: pointer;
 }
-._close_qnzzi_66 svg {
+._close_107vu_66 svg {
   width: 15px;
   height: 15px;
 }
 
-._head_qnzzi_80 {
+._head_107vu_80 {
   padding: 12px 20px;
   display: flex;
   align-items: center;
   color: #fff;
 }
 
-._headIcon_qnzzi_87 {
+._headIcon_107vu_87 {
   width: 20px;
   height: 20px;
   margin-right: 10px;
 }
 
-._headTitle_qnzzi_93 {
+._headTitle_107vu_93 {
   font-size: 16px;
   line-height: 1.2;
   font-weight: bold;
   width: 100%;
 }
 
-._inner_qnzzi_100 {
+._inner_107vu_100 {
   border-radius: 6px;
   overflow: hidden;
   padding: 0 6px 6px 6px;
 }
 
-@keyframes _fadein_qnzzi_1 {
+@keyframes _fadein_107vu_1 {
   0%, 100% {
     opacity: 0;
   }
@@ -442,7 +464,7 @@ textarea {
     opacity: 1;
   }
 }
-@keyframes _pulse_qnzzi_1 {
+@keyframes _pulse_107vu_1 {
   from {
     transform: scale(1);
   }
@@ -450,18 +472,18 @@ textarea {
     transform: scale(1.05);
   }
 }
-@keyframes _gradient_qnzzi_1 {
+@keyframes _gradient_107vu_1 {
   0% {
-    background-position: 0% 50%;
+    background-position: 0 50%;
   }
   50% {
     background-position: 100% 50%;
   }
   100% {
-    background-position: 0% 50%;
+    background-position: 0 50%;
   }
 }
-@keyframes _wiggle_qnzzi_1 {
+@keyframes _wiggle_107vu_1 {
   0%, 7% {
     transform: rotateZ(0);
   }
@@ -483,25 +505,25 @@ textarea {
   40%, 100% {
     transform: rotateZ(0);
   }
-}._root_rwvas_1 {
+}._root_1p6us_1 {
   padding: 6px;
   background-color: #fff;
   position: relative;
   display: block;
 }
-._root_rwvas_1:first-child {
+._root_1p6us_1:first-child {
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
 }
-._root_rwvas_1:first-child:after {
+._root_1p6us_1:first-child:after {
   display: none;
 }
-._root_rwvas_1:last-child {
+._root_1p6us_1:last-child {
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
   border-bottom: none;
 }
-._root_rwvas_1:after {
+._root_1p6us_1:after {
   content: "";
   width: 100%;
   height: 1px;
@@ -512,14 +534,20 @@ textarea {
   bottom: 0;
 }
 
-._body_rwvas_30 {
+._body_1p6us_30 {
   display: flex;
   align-items: center;
   position: relative;
   padding-left: 6px;
+  justify-content: space-between;
+}
+
+._bodyInner_1p6us_38 {
+  display: flex;
+  align-items: center;
 }
 
-._line_rwvas_37 {
+._line_1p6us_43 {
   position: absolute;
   left: -6px;
   top: 0;
@@ -529,7 +557,7 @@ textarea {
   border-radius: 0 2px 2px 0;
 }
 
-._text_rwvas_47 {
+._text_1p6us_53 {
   font-size: 12px;
   line-height: 1.2;
   color: #333;
@@ -537,13 +565,15 @@ textarea {
   padding-right: 10px;
   --accent-size: 12px;
   --accent-color: #ffbc00;
+  --font-family: Roboto, sans-serif;
 }
-._text_rwvas_47 span {
+._text_1p6us_53 span {
+  font-family: var(--font-family);
   color: var(--accent-color);
   font-size: var(--accent-size);
 }
 
-._button_rwvas_61 {
+._button_1p6us_69 {
   margin-left: auto;
   padding: 2px;
   background-color: #ffb800;
@@ -555,21 +585,21 @@ textarea {
   line-height: 2;
   font-weight: bold;
 }
-._button_rwvas_61 ._logo_rwvas_73 {
+._button_1p6us_69 ._logo_1p6us_81 {
   width: 30px;
   height: 30px;
   margin-right: initial;
   display: block;
 }
-._variant2_rwvas_79 ._button_rwvas_61 ._logo_rwvas_73 {
+._variant2_1p6us_87 ._button_1p6us_69 ._logo_1p6us_81 {
   display: none;
 }
 
-._buttonText_rwvas_83 {
+._buttonText_1p6us_91 {
   padding: 0 7px;
 }
 
-._logo_rwvas_73 {
+._logo_1p6us_81 {
   width: 25px;
   height: 25px;
   border-radius: 30px;
@@ -577,11 +607,11 @@ textarea {
   margin-right: 10px;
   display: none;
 }
-._variant2_rwvas_79 ._logo_rwvas_73 {
+._variant2_1p6us_87 ._logo_1p6us_81 {
   display: block;
 }
 
-._legal_rwvas_99 {
+._legal_1p6us_107 {
   background-color: #eee;
   padding: 2px 5px;
   height: 14px;
@@ -590,49 +620,48 @@ textarea {
   border-radius: 4px;
   color: #7e8392;
   font-size: 8px;
-}._root_15ve9_1 {
+}._root_1bgnc_1 {
   max-width: 320px;
   width: 100%;
   overflow: hidden;
   border-radius: 10px;
   background-color: #fff;
   min-height: 500px;
+  display: flex;
 }
 
-._laptop_15ve9_10, ._tablet_15ve9_10 {
+._laptop_1bgnc_11, ._tablet_1bgnc_11 {
   max-width: 410px;
   min-height: 680px;
 }
 
-._desktop_15ve9_15 {
+._desktop_1bgnc_16 {
   max-width: 930px;
   min-height: 500px;
 }
 
-._body_15ve9_20 {
+._body_1bgnc_21 {
   padding: 25px 10px 12px 10px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   align-items: center;
-  height: 100%;
 }
-._desktop_15ve9_15 ._body_15ve9_20 {
+._desktop_1bgnc_16 ._body_1bgnc_21 {
   padding: 30px 47px 15px 47px;
 }
 
-._logo_15ve9_32 {
+._logo_1bgnc_32 {
   width: 100px;
   height: 60px;
   background: #eee;
 }
 
-._text_15ve9_38 {
+._text_1bgnc_38 {
   margin: auto 0;
 }
 
-._button_15ve9_42 {
-  height: 70px;
+._button_1bgnc_42 {
   border-radius: 8px;
   padding: 0 15px;
   font-size: 24px;
@@ -643,11 +672,11 @@ textarea {
   justify-content: center;
   width: 100%;
 }
-._desktop_15ve9_15 ._button_15ve9_42 {
+._desktop_1bgnc_16 ._button_1bgnc_42 {
   width: 70%;
 }
 
-._legal_15ve9_58 {
+._legal_1bgnc_57 {
   font-size: 9px;
   color: #333;
   padding: 0 10px;
@@ -655,41 +684,37 @@ textarea {
   width: 100%;
   line-height: 1.2;
 }
-._desktop_15ve9_15 ._legal_15ve9_58 {
+._desktop_1bgnc_16 ._legal_1bgnc_57 {
   width: 70%;
-}._root_otuq1_1 {
+}._root_2ic16_1 {
   font-size: 20px;
   color: #333;
   --accent-color: #f00;
   --accent-size: 20px;
+  --font-family: Roboto, sans-serif;
 }
-._root_otuq1_1 span {
+._root_2ic16_1 span {
+  font-family: var(--font-family);
   color: var(--accent-color);
   font-size: var(--accent-size);
-}._root_1q3m6_1 {
-  max-width: 280px;
-  width: 100%;
+}._root_13k8c_1 {
+  width: 280px;
   overflow: hidden;
   border-radius: 10px;
   background-color: #fff;
-}
-
-._desktop_1q3m6_9 {
-  max-width: 1000px;
-}
-
-._content_1q3m6_13 {
   padding: 15px 10px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: 100%;
 }
-._desktop_1q3m6_9 ._content_1q3m6_13 {
+
+._desktop_13k8c_13 {
+  width: 1000px;
   padding: 30px 20px;
 }
 
-._title_1q3m6_24 {
+._title_13k8c_18 {
   text-transform: uppercase;
   margin-bottom: 20px;
   font-weight: bold;
@@ -699,79 +724,80 @@ textarea {
   text-align: center;
   line-height: 1.2;
 }
-._desktop_1q3m6_9 ._title_1q3m6_24 {
+._desktop_13k8c_13 ._title_13k8c_18 {
   margin-bottom: 70px;
   font-size: 26px;
 }
 
-._wrapper_1q3m6_39 {
+._wrapper_13k8c_33 {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 15px;
 }
-._desktop_1q3m6_9 ._wrapper_1q3m6_39 {
+._desktop_13k8c_13 ._wrapper_13k8c_33 {
   flex-direction: initial;
   gap: 25px;
-}._root_6a4bh_1 {
+}._root_17kc6_1 {
   text-align: center;
   background-color: #f7f7f7;
   overflow: hidden;
   border-radius: 10px;
-  max-width: 300px;
+  width: 265px;
   display: block;
 }
 
-._desktop_6a4bh_10 {
+._desktop_17kc6_10 {
   height: 300px;
+  width: 300px;
 }
 
-._header_6a4bh_14 {
+._header_17kc6_15 {
   display: none;
   background-color: #eee;
   height: 49px;
   align-items: center;
   justify-content: center;
 }
-._desktop_6a4bh_10 ._header_6a4bh_14 {
+._desktop_17kc6_10 ._header_17kc6_15 {
   display: flex;
 }
 
-._logo_6a4bh_25 {
+._logo_17kc6_26 {
   width: 60px;
   background-color: #dbdbdb;
   height: 40px;
 }
 
-._container_6a4bh_31 {
+._container_17kc6_32 {
   display: flex;
   flex-direction: column;
   padding: 10px;
 }
-._desktop_6a4bh_10 ._container_6a4bh_31 {
+._desktop_17kc6_10 ._container_17kc6_32 {
   padding: 0 16px 12px 16px;
   justify-content: space-between;
   height: calc(100% - 50px);
 }
 
-._body_6a4bh_42 {
+._body_17kc6_43 {
   padding: 11px 10px 9px 10px;
   display: flex;
   align-items: center;
   margin-bottom: 12px;
 }
-._desktop_6a4bh_10 ._body_6a4bh_42 {
+._desktop_17kc6_10 ._body_17kc6_43 {
   margin: auto;
 }
-._body_6a4bh_42 ._logo_6a4bh_25 {
+._body_17kc6_43 ._logo_17kc6_26 {
   display: block;
   margin-right: 12px;
 }
-._desktop_6a4bh_10 ._body_6a4bh_42 ._logo_6a4bh_25 {
+._desktop_17kc6_10 ._body_17kc6_43 ._logo_17kc6_26 {
   display: none;
 }
 
-._text_6a4bh_59 {
+._text_17kc6_60 {
   flex: 1;
   display: block;
   justify-content: center;
@@ -782,22 +808,23 @@ textarea {
   font-size: 16px;
   --accent-size: 16px;
   --accent-color: #e23333;
+  --font-family: Roboto, sans-serif;
 }
-._text_6a4bh_59 span {
+._text_17kc6_60 span {
+  font-family: var(--font-family);
   color: var(--accent-color);
   font-size: var(--accent-size);
 }
-._desktop_6a4bh_10 ._text_6a4bh_59 {
+._desktop_17kc6_10 ._text_17kc6_60 {
   font-size: 22px;
   --accent-size: 22px;
 }
 
-._button_6a4bh_80 {
+._button_17kc6_83 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0 15px;
-  height: 30px;
+  padding: 10px 15px;
   margin-bottom: 10px;
   font-size: 12px;
   color: #333;
@@ -805,38 +832,37 @@ textarea {
   border-radius: 8px;
   width: 100%;
 }
-._desktop_6a4bh_10 ._button_6a4bh_80 {
-  height: 40px;
+._desktop_17kc6_10 ._button_17kc6_83 {
   margin-bottom: 12px;
   width: initial;
   font-size: 16px;
 }
 
-._legal_6a4bh_100 {
+._legal_17kc6_101 {
   overflow-y: auto;
   padding: 0 4px;
   height: 15px;
   font-size: 9px;
   color: #333;
 }
-._desktop_6a4bh_10 ._legal_6a4bh_100 {
+._desktop_17kc6_10 ._legal_17kc6_101 {
   height: 20px;
 }
 
-._legal_6a4bh_100::-webkit-scrollbar {
+._legal_17kc6_101::-webkit-scrollbar {
   width: 4px;
-  background: #fff;
+  background: #E5E6E9;
   border-radius: 5px;
 }
 
-._legal_6a4bh_100::-webkit-scrollbar-track {
+._legal_17kc6_101::-webkit-scrollbar-track {
   border-radius: 5px;
 }
 
-._legal_6a4bh_100::-webkit-scrollbar-thumb {
-  background: #fff;
+._legal_17kc6_101::-webkit-scrollbar-thumb {
+  background: #7E8392;
   border-radius: 5px;
-}._root_q9549_1 {
+}._root_i7e17_1 {
   max-width: 320px;
   width: 100%;
   overflow: hidden;
@@ -846,18 +872,18 @@ textarea {
   display: block;
 }
 
-._laptop_q9549_11,
-._tablet_q9549_12 {
+._laptop_i7e17_11,
+._tablet_i7e17_12 {
   max-width: 410px;
   min-height: 680px;
 }
 
-._desktop_q9549_17 {
+._desktop_i7e17_17 {
   max-width: 930px;
   min-height: 500px;
 }
 
-._body_q9549_22 {
+._body_i7e17_22 {
   padding: 25px 10px 12px 10px;
   display: flex;
   flex-direction: column;
@@ -865,60 +891,62 @@ textarea {
   align-items: center;
   height: 100%;
 }
-._desktop_q9549_17 ._body_q9549_22 {
+._desktop_i7e17_17 ._body_i7e17_22 {
   padding: 30px 47px 15px 47px;
 }
 
-._head_q9549_34 {
+._head_i7e17_34 {
   display: flex;
   align-items: center;
   flex-direction: column-reverse;
   margin-bottom: 10px;
 }
-._desktop_q9549_17 ._head_q9549_34 {
+._desktop_i7e17_17 ._head_i7e17_34 {
   flex-direction: initial;
 }
 
-._title_q9549_44 {
+._title_i7e17_44 {
   font-size: 23px;
   text-transform: uppercase;
   margin-top: 10px;
   color: #333;
   font-weight: bold;
 }
-._desktop_q9549_17 ._title_q9549_44 {
+._desktop_i7e17_17 ._title_i7e17_44 {
   font-size: 36px;
   margin-right: 32px;
   margin-bottom: initial;
 }
 
-._logo_q9549_57 {
+._logo_i7e17_57 {
   width: 100px;
   height: 60px;
   background: #eee;
 }
 
-._wrapper_q9549_63 {
+._wrapper_i7e17_63 {
   margin: auto 0;
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 
-._text_q9549_70 {
+._text_i7e17_70 {
   font-size: 20px;
   color: #333;
   margin-bottom: 15px;
   width: 100%;
   text-align: center;
   --accent-color: #f0f;
+  --font-family: Roboto, sans-serif;
 }
-._text_q9549_70 span {
+._text_i7e17_70 span {
+  font-family: var(--font-family);
   color: var(--accent-color);
   font-size: var(--accent-size);
 }
 
-._button_q9549_83 {
+._button_i7e17_85 {
   display: flex;
   align-items: center;
   width: 100%;
@@ -928,12 +956,12 @@ textarea {
   border-radius: 4px;
   overflow: hidden;
 }
-._desktop_q9549_17 ._button_q9549_83 {
+._desktop_i7e17_17 ._button_i7e17_85 {
   flex-direction: initial;
   width: 80%;
 }
 
-._buttonHead_q9549_98 {
+._buttonHead_i7e17_100 {
   display: flex;
   align-items: center;
   height: 42px;
@@ -945,14 +973,14 @@ textarea {
   width: 100%;
   justify-content: center;
 }
-._desktop_q9549_17 ._buttonHead_q9549_98 {
+._desktop_i7e17_17 ._buttonHead_i7e17_100 {
   height: 55px;
   width: initial;
   flex-direction: initial;
   font-size: 31px;
 }
 
-._buttonTarget_q9549_117 {
+._buttonTarget_i7e17_119 {
   display: flex;
   align-items: center;
   height: 35px;
@@ -963,12 +991,12 @@ textarea {
   width: 100%;
   justify-content: center;
 }
-._desktop_q9549_17 ._buttonTarget_q9549_117 {
+._desktop_i7e17_17 ._buttonTarget_i7e17_119 {
   height: 55px;
   font-size: 31px;
 }
 
-._legal_q9549_133 {
+._legal_i7e17_135 {
   font-size: 9px;
   color: #333;
   padding: 0 10px;
@@ -976,81 +1004,83 @@ textarea {
   width: 100%;
   line-height: 1.2;
 }
-._desktop_q9549_17 ._legal_q9549_133 {
+._desktop_i7e17_17 ._legal_i7e17_135 {
   width: 70%;
-}._root_1ew5t_1 {
+}._root_10yn9_1 {
   padding: 10px;
   display: flex;
   align-items: center;
   width: 100%;
 }
 
-._left_1ew5t_8 {
+._left_10yn9_8 {
   padding-right: 15px;
   display: none;
   align-items: center;
   border-right: 1px solid #333;
   flex: 1;
 }
-._desktop_1ew5t_15 ._left_1ew5t_8 {
+._desktop_10yn9_15 ._left_10yn9_8 {
   display: flex;
 }
 
-._teams_1ew5t_19 {
+._teams_10yn9_19 {
   margin-right: 30px;
   display: flex;
   align-items: center;
 }
 
-._logo_1ew5t_25 {
+._logo_10yn9_25 {
   width: 50px;
   height: 50px;
   background-color: #eee;
 }
 
-._league_1ew5t_31 {
+._league_10yn9_31 {
   font-size: 15px;
   color: #333;
 }
 
-._name_1ew5t_36 {
+._name_10yn9_36 {
   font-size: 18px;
   font-weight: bold;
   color: #333;
 }
 
-._right_1ew5t_42 {
+._right_10yn9_42 {
   padding: 0 10px;
   width: 100%;
   display: flex;
-  align-items: center;
 }
-._desktop_1ew5t_15 ._right_1ew5t_42 {
+._desktop_10yn9_15 ._right_10yn9_42 {
+  align-items: center;
   padding: 0 30px;
-  width: initial;
+  width: 30%;
 }
 
-._odd_1ew5t_53 {
+._odd_10yn9_53 {
   display: flex;
   align-items: center;
   flex-direction: column;
   flex: 1;
 }
-._desktop_1ew5t_15 ._odd_1ew5t_53 {
+._desktop_10yn9_15 ._odd_10yn9_53 {
   flex-direction: row;
   flex: initial;
+  justify-content: space-between;
+  width: 100%;
 }
 
-._oddLabel_1ew5t_64 {
+._oddLabel_10yn9_66 {
   font-size: 13px;
   color: #333;
 }
-._desktop_1ew5t_15 ._oddLabel_1ew5t_64 {
+._desktop_10yn9_15 ._oddLabel_10yn9_66 {
   font-size: 19px;
   margin-right: 15px;
 }
 
-._oddValue_1ew5t_73 {
+._oddValue_10yn9_75 {
   padding: 3px 10px;
   background-color: #ffbc00;
   border-radius: 2px;
@@ -1058,28 +1088,29 @@ textarea {
   color: #333;
   margin-top: 3px;
 }
-._desktop_1ew5t_15 ._oddValue_1ew5t_73 {
+._desktop_10yn9_15 ._oddValue_10yn9_75 {
   font-size: 19px;
   padding: 3px 20px;
   margin-top: initial;
 }
 
-._team_1ew5t_19 {
+._team_10yn9_19 {
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: 30%;
 }
-._desktop_1ew5t_15 ._team_1ew5t_19 {
+._desktop_10yn9_15 ._team_10yn9_19 {
   display: none;
 }
 
-._teamLogo_1ew5t_96 {
+._teamLogo_10yn9_99 {
   width: 34px;
   height: 34px;
   background-color: #eee;
 }
 
-._teamName_1ew5t_102 {
+._teamName_10yn9_105 {
   font-size: 11px;
   text-transform: uppercase;
 }._root_1slvw_1 {
@@ -1193,7 +1224,7 @@ textarea {
 }
 ._legalOpen_1slvw_98 ._legalButton_1slvw_103 {
   position: static;
-}._root_1i5vb_1 {
+}._root_a3kem_1 {
   position: relative;
   z-index: 1;
   overflow: hidden;
@@ -1205,23 +1236,28 @@ textarea {
   display: block;
 }
 
-._desktop_1i5vb_13,
-._laptop_1i5vb_14 {
+._desktop_a3kem_13,
+._laptop_a3kem_14 {
   padding: 0 50px;
 }
 
-._promotion_1i5vb_18 {
+._promotion_a3kem_18 {
   position: absolute;
   bottom: 0;
-  right: 0;
+  left: 0;
   color: #fff;
   background-color: #333;
   font-size: 7px;
   padding: 2px 6px;
+  border-top-right-radius: 4px;
+}
+._desktop_a3kem_13 ._promotion_a3kem_18, ._laptop_a3kem_14 ._promotion_a3kem_18 {
   border-top-left-radius: 4px;
+  left: initial;
+  right: 0;
 }
 
-._background_1i5vb_29 {
+._background_a3kem_34 {
   position: absolute;
   left: 0;
   right: 0;
@@ -1230,7 +1266,7 @@ textarea {
   z-index: -1;
 }
 
-._content_1i5vb_38 {
+._content_a3kem_43 {
   margin: auto;
   height: 100%;
   display: grid;
@@ -1240,14 +1276,14 @@ textarea {
   align-items: center;
   max-width: 1300px;
 }
-._desktop_1i5vb_13 ._content_1i5vb_38, ._laptop_1i5vb_14 ._content_1i5vb_38 {
+._desktop_a3kem_13 ._content_a3kem_43, ._laptop_a3kem_14 ._content_a3kem_43 {
   grid-template-columns: auto minmax(0, 1fr) auto;
 }
-._variant2_1i5vb_51 ._content_1i5vb_38 {
+._variant2_a3kem_56 ._content_a3kem_43 {
   grid-template-columns: minmax(0, 1fr) auto;
 }
 
-._logo_1i5vb_55 {
+._logo_a3kem_60 {
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
@@ -1255,31 +1291,31 @@ textarea {
   width: 100px;
   background-color: #eee;
 }
-._variant2_1i5vb_51 ._logo_1i5vb_55 {
+._variant2_a3kem_56 ._logo_a3kem_60 {
   display: none;
 }
 
-._left_1i5vb_67 {
+._left_a3kem_72 {
   width: 200px;
   height: 100%;
   align-items: center;
   justify-content: center;
   display: none;
 }
-._desktop_1i5vb_13 ._left_1i5vb_67, ._laptop_1i5vb_14 ._left_1i5vb_67 {
+._desktop_a3kem_13 ._left_a3kem_72, ._laptop_a3kem_14 ._left_a3kem_72 {
   display: flex;
 }
-._variant2_1i5vb_51 ._left_1i5vb_67 {
+._variant2_a3kem_56 ._left_a3kem_72 {
   display: none;
 }
 
-._center_1i5vb_81 {
+._center_a3kem_86 {
   position: relative;
   z-index: 1;
   height: 100%;
 }
 
-._slide_1i5vb_87 {
+._slide_a3kem_92 {
   position: absolute;
   left: 0;
   top: 0;
@@ -1289,39 +1325,39 @@ textarea {
   animation-timing-function: ease-in;
   animation-duration: 3s;
 }
-._slide_1i5vb_87:only-child {
+._slide_a3kem_92:only-child {
   animation: none;
   opacity: 1;
 }
-._slide_animated_default_1i5vb_101 {
-  animation-name: _fade-in-out_1i5vb_1;
+._slide_animated_default_a3kem_106 {
+  animation-name: _fade-in-out_a3kem_1;
 }
-._slide_animated_bottom-top_1i5vb_104 {
-  animation-name: _fade-in-bottom-out-top_1i5vb_1;
+._slide_animated_bottom-top_a3kem_109 {
+  animation-name: _fade-in-bottom-out-top_a3kem_1;
 }
-._slide_animated_top-bottom_1i5vb_107 {
-  animation-name: _fade-in-bottom-out-top_1i5vb_1;
+._slide_animated_top-bottom_a3kem_112 {
+  animation-name: _fade-in-bottom-out-top_a3kem_1;
 }
 
-._right_1i5vb_111 {
+._right_a3kem_116 {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
 }
-._right_1i5vb_111 ._logo_1i5vb_55 {
+._right_a3kem_116 ._logo_a3kem_60 {
   display: block;
   max-height: 35px;
 }
-._desktop_1i5vb_13 ._right_1i5vb_111 ._logo_1i5vb_55, ._laptop_1i5vb_14 ._right_1i5vb_111 ._logo_1i5vb_55, ._variant2_1i5vb_51 ._right_1i5vb_111 ._logo_1i5vb_55 {
+._desktop_a3kem_13 ._right_a3kem_116 ._logo_a3kem_60, ._laptop_a3kem_14 ._right_a3kem_116 ._logo_a3kem_60, ._variant2_a3kem_56 ._right_a3kem_116 ._logo_a3kem_60 {
   display: none;
 }
 
-._buttonWrapper_1i5vb_126 {
+._buttonWrapper_a3kem_131 {
   margin-top: 7px;
 }
-._buttonWrapper_1i5vb_126:before {
+._buttonWrapper_a3kem_131:before {
   z-index: 2;
   display: block;
   content: "";
@@ -1332,11 +1368,11 @@ textarea {
   right: 0;
   transform: none;
 }
-._desktop_1i5vb_13 ._buttonWrapper_1i5vb_126, ._laptop_1i5vb_14 ._buttonWrapper_1i5vb_126 {
+._desktop_a3kem_13 ._buttonWrapper_a3kem_131, ._laptop_a3kem_14 ._buttonWrapper_a3kem_131 {
   margin-top: 0;
 }
 
-._button_1i5vb_126 {
+._button_a3kem_131 {
   background-color: #ff6a13;
   border-radius: 20px;
   color: #fff;
@@ -1349,30 +1385,30 @@ textarea {
   padding: 5px 15px;
   transition: filter 250ms;
 }
-._button_animated_1i5vb_157 {
-  animation: _increase_1i5vb_1 3s infinite;
+._button_animated_a3kem_162 {
+  animation: _increase_a3kem_1 3s infinite;
 }
-._desktop_1i5vb_13 ._button_1i5vb_126, ._laptop_1i5vb_14 ._button_1i5vb_126 {
+._desktop_a3kem_13 ._button_a3kem_131, ._laptop_a3kem_14 ._button_a3kem_131 {
   margin-top: 0;
   padding: 10px 35px;
 }
-._variant2_1i5vb_51 ._button_1i5vb_126 {
+._variant2_a3kem_56 ._button_a3kem_131 {
   display: flex;
   align-items: center;
   padding: 2px 12px 2px 2px;
 }
-._button_1i5vb_126 ._logo_1i5vb_55 {
+._button_a3kem_131 ._logo_a3kem_60 {
   display: none;
   width: 35px;
   height: 35px;
   border-radius: 30px;
   margin-right: 10px;
 }
-._variant2_1i5vb_51 ._button_1i5vb_126 ._logo_1i5vb_55 {
+._variant2_a3kem_56 ._button_a3kem_131 ._logo_a3kem_60 {
   display: block;
 }
 
-@keyframes _fade-in-out_1i5vb_1 {
+@keyframes _fade-in-out_a3kem_1 {
   0% {
     opacity: 0;
   }
@@ -1386,7 +1422,7 @@ textarea {
     opacity: 0;
   }
 }
-@keyframes _fade-in-bottom-out-top_1i5vb_1 {
+@keyframes _fade-in-bottom-out-top_a3kem_1 {
   0% {
     opacity: 0;
     transform: translateY(100%);
@@ -1404,7 +1440,7 @@ textarea {
     opacity: 0;
   }
 }
-@keyframes _fade-in-top-out-bottom_1i5vb_1 {
+@keyframes _fade-in-top-out-bottom_a3kem_1 {
   0% {
     opacity: 0;
     transform: translateY(-100%);
@@ -1422,7 +1458,7 @@ textarea {
     opacity: 0;
   }
 }
-@keyframes _increase_1i5vb_1 {
+@keyframes _increase_a3kem_1 {
   0% {
     -webkit-transform: scale(1) translateZ(0);
     -moz-transform: scale(1) translateZ(0);
@@ -1443,7 +1479,7 @@ textarea {
     -moz-transform: scale(1) translateZ(0);
     transform: scale(1) translateZ(0);
   }
-}._root_1o6so_1 {
+}._root_1cgtj_1 {
   height: 100%;
   display: flex;
   justify-content: center;
@@ -1453,13 +1489,15 @@ textarea {
   font-size: 16px;
   --accent-color: #ffbc00ff;
   --accent-size: 16px;
+  --font-family: Roboto, sans-serif;
 }
-._root_1o6so_1 span {
+._root_1cgtj_1 span {
+  font-family: var(--font-family);
   color: var(--accent-color);
   font-size: var(--accent-size);
 }
 
-._desktop_1o6so_17 {
+._desktop_1cgtj_19 {
   font-size: 22px;
   --accent-size: 22px;
 }._root_vjs41_1 {