improve cell text appearance

src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss

@@ -3,8 +3,20 @@
 .text {
   @include blur;
 
-  padding: $gap / 2 $gap $gap $gap;
   line-height: 1.3em;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.description {
+  mask-image: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 1) 50%,
+    rgba(0, 0, 0, 0) 95%
+  );
+  flex: 1;
+  overflow: hidden;
 }
 
 .heading {

src/containers/flow/FlowGrid/components/FlowCell/index.tsx

@@ -145,7 +145,7 @@ const FlowCell: FC<Props> = ({
           />
         )}
 
-        {!!title && (
+        {!!title && !withText && (
           <CellShade
             color={color}
             className={styles.shade}

src/containers/flow/FlowGrid/components/FlowCell/styles.module.scss

@@ -1,5 +1,7 @@
 @import 'src/styles/variables';
 
+$compact_size: 200px;
+
 .cell {
   @include inner_shadow;
 
@@ -9,6 +11,7 @@
   width: 100%;
   height: 100%;
   background: $content_bg;
+  container: cell / inline-size;
 }
 
 .thumb {
@@ -37,18 +40,13 @@
   overflow: hidden;
   border-radius: $radius;
   box-sizing: border-box;
+  inset: 50% 0 0 0;
+  padding: $gap $gap * 1.5 0 $gap * 1.5;
   font: $font_14_medium;
   line-height: 1.25em;
-  inset: 50% 0 0 0;
 
-  &.bright {
+  @container (max-width: $compact_size) {
-    color: var(--content_bg_lightest);
+    padding: $gap / 2 $gap 0 $gap;
-  }
-
-  @include tablet {
-    font: $font_12_medium;
-    left: 5px;
-    bottom: 5px;
   }
 
   & :global(.grey) {
@@ -56,6 +54,17 @@
     opacity: 0.5;
   }
 
+  @container (max-width: #{$compact_size}) {
+    padding: $gap / 2 $gap 0 $gap;
+  }
+
+  .horizontal &,
+  .quadro & {
+    @container (max-width: #{$compact_size * 2}) {
+      padding: $gap / 2 $gap 0 $gap;
+    }
+  }
+
   .horizontal & {
     inset: 0 calc(50% + $gap / 2) 0 0;
     border-radius: $radius 0 0 $radius;
@@ -70,6 +79,10 @@
     inset: calc(50% + $gap / 2) calc(50% + $gap / 2) 0 0;
     border-radius: 0 $radius 0 $radius;
   }
+
+  .title {
+    margin-bottom: 0.1em;
+  }
 }
 
 .title_wrapper {
@@ -87,9 +100,17 @@
   text-transform: uppercase;
   word-break: break-word;
   color: inherit;
+  margin-bottom: -0.125em;
 
-  @include tablet {
+  @container (max-width: #{$compact_size}) {
-    font: $font_16_semibold;
+    font: $font_cell_title_compact;
+  }
+
+  .horizontal &,
+  .quadro & {
+    @container (max-width: #{$compact_size * 2}) {
+      font: $font_cell_title_compact;
+    }
   }
 }
 

src/containers/flow/FlowGrid/styles.module.scss

@@ -1,11 +1,5 @@
 @import 'src/styles/variables';
 
-@mixin mobile {
-  @media (max-width: $cell * 2) {
-    @content;
-  }
-}
-
 .cell {
   &.horizontal,
   &.quadro {

src/styles/_fonts.scss

@@ -1,4 +1,3 @@
-
 $bold: 700;
 $semibold: 600;
 $regular: 400;
@@ -6,10 +5,20 @@ $medium: 500;
 $light: 300;
 $extra_light: 200;
 
-
+$font:
-$font: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+  Montserrat,
-'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+  -apple-system,
-'Noto Color Emoji';
+  BlinkMacSystemFont,
+  'Segoe UI',
+  Roboto,
+  'Helvetica Neue',
+  Arial,
+  'Noto Sans',
+  sans-serif,
+  'Apple Color Emoji',
+  'Segoe UI Emoji',
+  'Segoe UI Symbol',
+  'Noto Color Emoji';
 
 $font_48_semibold: $semibold 48px $font;
 $font_48_bold: $bold 48px $font;
@@ -39,5 +48,6 @@ $font_8_regular: $regular 8px $font;
 $font_8_semibold: $semibold 8px $font;
 
 $font_cell_title: $font_24_semibold;
+$font_cell_title_compact: $font_18_semibold;
 $font_hero_title: $bold 40px $font;
 $font_boris: $bold 72px $font;