Add what is peertube video

src/scss/_mixins.scss

@@ -14,7 +14,8 @@
   display: flex;
   flex-direction: column;
 
-  img {
+  img,
+  .iframe-responsive {
     margin: 30px 0;
 
     & + .citation {

src/scss/main.scss

@@ -174,7 +174,7 @@ article li > a {
 .section-title {
   font-size: 34px;
   font-weight: $font-semibold;
-  margin: 100px 0;
+  margin: 100px 0 50px;
   font-family: 'Proza Libre', sans-serif;
 
   .border-title {
@@ -360,3 +360,17 @@ article li > a {
   text-align: center;
   width: fit-content;
 }
+
+.iframe-responsive {
+  position: relative;
+  overflow: hidden;
+  padding-top: 56.25%;
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}

src/views/Home.vue

@@ -57,11 +57,15 @@
         <div class="border-title"></div>
       </div>
 
-      <div class="two-columns">
+      <div class="one-column">
-        <img :src="buildImgUrl('peertube-interface.jpg')" alt=""/>
+        <div class="iframe-responsive">
+          <iframe sandbox="allow-same-origin allow-scripts" src="https://framatube.org/videos/embed/9c9de5e8-0a1e-484a-b099-e80766180a6d" frameborder="0" allowfullscreen></iframe>
+        </div>
 
         <div>
           <div class="citation">
+            <div class="left-bar"></div>
+
             <div class="text" v-translate>
               PeerTube aspires to be a <strong>decentralized and free/libre alternative</strong> to video broadcasting services.
             </div>
@@ -71,6 +75,8 @@
             Our aim is not to replace them, but rather to simultaneously offer something else, with different values.
           </p>
         </div>
+
+        <img :src="buildImgUrl('peertube-screenshot.jpg')" alt=""/>
       </div>
 
       <div class="federation">