add picture

css/styles.css

@@ -26,6 +26,10 @@
   line-height: 24px;
   color: #000000;
 }
+
+.banner-tv img {
+  width: 100%;
+}
 .title-content {
   padding: 50px 0;
   text-align: center;
@@ -215,9 +219,11 @@ small {
   .last-content {
     display: flex;
     flex-direction: column;
+    padding-top: 30px;
   }
-  .last-content img {
+  .last-content picture {
     order: -1;
+    margin-bottom: 40px;
   }
   .last-content .info-title {
     font-size: 24px;

index.html

@@ -23,7 +23,10 @@
   </header>
   <main>
     <section class="banner-tv">
-      <img src="assets/img/Banner-Tv.png" alt="banner tv" />
+      <picture>
+        <source srcset="assets/img/Banner-Tv-mobile.png" media="(max-width: 992px)">
+        <img src="assets/img/Banner-Tv.png" alt="banner tv" />
+      </picture>
     </section>
     <section class="title-content">
       <h1>Lorem ipsum <STRong>dolor sit amet</STRong></h1>
@@ -74,7 +77,10 @@
       <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.
         Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
         Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.</p>
-      <img src="assets/img/Image-banner.png" alt="image banner" />
+      <picture>
+        <source srcset="assets/img/Image-banner-mobile.png" media="(max-width: 992px)">
+        <img src="assets/img/Image-banner.png" alt="image banner" />
+      </picture>
     </section>
 
   </main>