From dbcd89ac7fad5572ee8e02df446a27df69e0a184 Mon Sep 17 00:00:00 2001
From: Roman Timashev <tmshv@yandex-team.ru>
Date: Sat, 28 Oct 2017 19:24:19 +0300
Subject: [PATCH] [www] article card style updated and optimized for tablet

---
 src/style/components/ArticleCard.scss | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/style/components/ArticleCard.scss b/src/style/components/ArticleCard.scss
index 06094a57..46744518 100644
--- a/src/style/components/ArticleCard.scss
+++ b/src/style/components/ArticleCard.scss
@@ -2,6 +2,7 @@
 
 .ArticleCard {
   --article-card-width: 30%;
+  --article-card-image-height: 15em;
   --article-card-margin: var(--single-margin) var(--half-margin);
 
   display: flex;
@@ -9,7 +10,7 @@
 
   margin: var(--article-card-margin);
   width: var(--article-card-width);
-  min-width: 15em;
+  min-width: 10em;
   max-width: 30em;
 
   border: 1px solid #ccc;
@@ -18,7 +19,7 @@
   & > a {
     display: block;
     position: relative;
-    height: 100%;
+  //  height: 100%;
   }
 }
 
@@ -26,11 +27,11 @@
   border-radius: 2px 2px 0 0;
 
   width: 100%;
-  height: 15em;
+  height: var(--article-card-image-height);
 
   img {
     width: 100%;
-    height: 15em;
+    height: var(--article-card-image-height);
 
     object-fit: cover;
   }
@@ -74,6 +75,19 @@
   }
 }
 
+
+// Tablet
+
+@media screen and (min-width: $tablet-min-width) and (max-width: $tablet-max-width) {
+  .ArticleCard {
+    --article-card-image-height: 12em;
+  }
+
+  @media screen and (orientation: portrait) {
+  }
+}
+
+
 // Mobile
 
 @media (max-width: $mobile-width) {