Small and large variations for the DataAndPlace.

src/components/DateAndPlace.scss

@@ -4,16 +4,29 @@
   text-align: center;
   text-transform: uppercase;
   font-size: calc(10px + 2vmin);
+  margin-bottom: 1rem;
 
   h2 {
     font-family: 'Montserrat-Medium';
-    font-size: 1.4rem;
     color: $brown-text !important;
-    margin-bottom: -0.7rem;
+    margin-bottom: -0.7rem !important;
+
+    &.large {
+      font-size: 2rem !important;
+    }
+    &.small {
+      font-size: 1.4rem !important;
+    }
   }
 
   h3 {
-    font-size: 1rem;
     color: $brown-text !important;
+
+    &.large {
+      font-size: 1.4rem !important;
+    }
+    &.small {
+      font-size: 0.8rem !important;
+    }
   }
 }

src/components/DateAndPlace.tsx

@@ -2,14 +2,14 @@ import './DateAndPlace.scss';
 
 import { FormattedMessage } from 'react-intl';
 
-export const DateAndPlace = () => {
+export const DateAndPlace = (props: { size: string }) => {
   return (
     <div className='dateAndPlace'>
-      <h2>
+      <h2 className={props.size}>
         <FormattedMessage id='common.datetime' />
       </h2>
 
-      <h3>
+      <h3 className={props.size}>
         <FormattedMessage id='common.place' />
       </h3>
     </div>

src/components/Diamond.tsx

@@ -1,3 +1,5 @@
+import './Diamond.scss';
+
 export const Diamond = () => {
   return (
     <svg

src/components/RegistrationHeader.tsx

@@ -12,7 +12,7 @@ export const RegistrationHeader = () => {
         <FormattedMessage id='common.maslo' />
       </h1>
       <Diamond />
-      <DateAndPlace />
+      <DateAndPlace size='small' />
     </header>
   );
 };

src/pages/Main.tsx

@@ -49,7 +49,7 @@ export const Main = () => {
           </article>
         ) : (
           <article>
-            <DateAndPlace />
+            <DateAndPlace size='large' />
           </article>
         )}
       </section>