video section

src/App.tsx

@@ -1,15 +1,17 @@
 // Modules
-import { Routes, Route } from 'react-router-dom';
+import { Routes, Route } from "react-router-dom";
 
 // Styles
-import './styles/style.scss';
+import "react-image-crop/src/ReactCrop.scss";
+import "./styles/style.scss";
 
 // Pages
-import Main from './pages/Main';
+import Main from "./pages/Main";
 
 // Static
-import Header from './components/header/Header';
-import Footer from './components/footer/Footer';
+import Header from "./components/header/Header";
+import Footer from "./components/footer/Footer";
+import Video from "./components/video/Video";
 
 const App = () => {
   return (
@@ -18,6 +20,7 @@ const App = () => {
       <Routes>
         <Route path="/" element={<Main />} />
       </Routes>
+      <Video />
       <Footer />
     </div>
   );

src/components/video/Video.tsx

@@ -0,0 +1,21 @@
+// Components
+import VideoItem from "./VideoItem";
+const Video = () => {
+  return (
+    <section className="video">
+      <div className="container">
+        <div className="video-inner">
+          <h2>Видео</h2>
+          <div className="video-wrapper">
+            <VideoItem />
+            <VideoItem />
+            <VideoItem />
+            <VideoItem />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Video;

src/components/video/VideoItem.tsx

@@ -0,0 +1,20 @@
+// Images
+import VideoItemImg from "../../assets/images/video-item.jpg";
+
+const VideoItem = () => {
+  return (
+    <div className="video-item">
+      <div className="video-item-top">
+        <div className="video-img">
+          <img src={VideoItemImg} alt="" />
+        </div>
+      </div>
+      <div className="video-item-bottom">
+        <span>11.01.2023</span>
+        <h5>В Туркменистане отметили Новый год</h5>
+      </div>
+    </div>
+  );
+};
+
+export default VideoItem;

src/styles/_variables.scss

@@ -4,3 +4,8 @@ $white: #ffffff;
 $black: #272727;
 $red: #e53131;
 $gray: #a6a6a6;
+
+@mixin wh100 {
+  width: 100%;
+  height: 100%;
+}

src/styles/_video.scss

@@ -0,0 +1,55 @@
+.video {
+  padding: 6.4rem 0;
+  background: $light;
+}
+
+.video-wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 2.4rem;
+}
+
+.video-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 3.2rem;
+
+  h2 {
+    font-size: 2.4rem;
+    color: $black;
+  }
+}
+
+.video-item {
+  display: flex;
+  flex-direction: column;
+  gap: 1.8rem;
+}
+
+.video-img {
+  overflow: hidden;
+  @include wh100;
+  max-height: 16.2rem;
+  border-radius: 0.8rem;
+
+  img {
+    @include wh100;
+    object-fit: cover;
+  }
+}
+
+.video-item-bottom {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  color: $black;
+
+  span {
+    font-size: 1.2rem;
+  }
+
+  h5 {
+    font-size: 1.6rem;
+    line-height: 2.2rem;
+  }
+}

src/styles/style.scss

@@ -1,4 +1,5 @@
-@import './variables';
-@import './general';
-@import './header';
-@import './footer';
+@import "./variables";
+@import "./general";
+@import "./header";
+@import "./footer";
+@import "./video";