From 57cbf791975a72f7675a1a125ebed632c4a18734 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Sat, 11 Nov 2023 18:22:15 +0300
Subject: [PATCH] Fixed article style

---
 src/components/Article/Article.module.scss | 28 +++++++++++++++-------
 src/styles/app.scss                        |  3 +++
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/Article/Article.module.scss b/src/components/Article/Article.module.scss
index 3a1c9b78..1ea954ba 100644
--- a/src/components/Article/Article.module.scss
+++ b/src/components/Article/Article.module.scss
@@ -40,6 +40,7 @@ img {
 
   blockquote,
   blockquote[data-type='punchline'] {
+    clear: both;
     font-size: 2.6rem;
     font-weight: bold;
     line-height: 1.4;
@@ -63,6 +64,7 @@ img {
   ta-quotation {
     border: solid #000;
     border-width: 0 0 0 2px;
+    clear: both;
     display: block;
     font-weight: 500;
     line-height: 1.6;
@@ -72,8 +74,11 @@ img {
     &[data-float='left'],
     &[data-float='right'] {
       @include font-size(2.2rem);
-
       line-height: 1.4;
+
+      @include media-breakpoint-up(sm) {
+        clear: none;
+      }
     }
 
     @include media-breakpoint-up(sm) {
@@ -98,6 +103,7 @@ img {
     @include font-size(1.4rem);
 
     background: #f1f2f3;
+    clear: both;
     display: block;
     margin: 3.2rem 0;
     padding: 3.2rem;
@@ -177,15 +183,17 @@ img {
 
   :global(.img-align-left) {
     float: left;
-    margin: 1em 8.3333% 1.5em 0;
+    margin: 0 8.3333% 1.5em 0;
   }
 
-  :global(.width-30) {
-    width: 30%;
-  }
+  @include media-breakpoint-up(sm) {
+    :global(.width-30) {
+      width: 30%;
+    }
 
-  :global(.width-50) {
-    width: 50%;
+    :global(.width-50) {
+      width: 50%;
+    }
   }
 
   :global(.img-align-left.width-50) {
@@ -195,8 +203,10 @@ img {
   }
 
   :global(.img-align-right) {
-    float: right;
-    margin: 1em 0 1.5em 8.3333%;
+    @include media-breakpoint-up(sm) {
+      float: right;
+      margin: 1em 0 1.5em 8.3333%;
+    }
   }
 
   :global(.img-align-right.width-50) {
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 0154c247..3fcbe46a 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -589,7 +589,10 @@ figure {
     max-height: 90vh;
     margin: auto;
   }
+}
 
+.ta-video-container,
+figure {
   figcaption {
     color: rgb(0 0 0 / 60%);