feat: added reject image and migrated to tailwindcss

feat: made it smartphone friendly

nextjs/src/components/GuideVideoList.tsx

@@ -3,8 +3,8 @@
 import { useTranslation } from 'react-i18next';
 import YouTube from 'react-youtube';
 
+import { centerVideo, characterBlock, guideBody } from '@/lib/siteContentClasses';
 import type { IGuideItem } from '@/models/IGuideItem';
-import style from '@/styles/web.module.scss';
 
 type Props = {
   items: IGuideItem[];
@@ -19,14 +19,14 @@ export function GuideVideoList({ items }: Props) {
   const { t } = useTranslation();
 
   return (
-    <div className={style.guideBody}>
-      <h2>{t('guide')}</h2>
+    <div className={guideBody}>
+      <h2 className="text-xl sm:text-2xl">{t('guide')}</h2>
       <hr />
       <br />
       {items.map((el) => (
         <div
           key={`guideItemsLoop-${el.id}`}
-          className={style.characterBlock}
+          className={characterBlock}
           style={{
             animationDelay: `${el.id * 0.2}s`,
           }}
@@ -34,8 +34,10 @@ export function GuideVideoList({ items }: Props) {
           <h4>{el.title}</h4>
           <hr />
           <div>{el.description}</div>
-          <div className={style.centerVideo}>
-            <YouTube videoId={el.youtube_id} opts={opts} />
+          <div className={centerVideo}>
+            <div className="mx-auto w-full max-w-[360px] overflow-x-auto">
+              <YouTube videoId={el.youtube_id} opts={opts} />
+            </div>
           </div>
         </div>
       ))}