diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/constants.ts b/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/constants.ts index 7ac18f5..9b7e753 100644 --- a/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/constants.ts +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/common/constants.ts @@ -1,7 +1,7 @@ export const CARD_OFFSET_Y = 8; export const CARD_SCALE_X = 40; export const MAX_CARD_HEIGHT = 216; -export const MAX_CARD_HEIGHT_SM = 216; +export const MAX_CARD_HEIGHT_SM = 280; export const MAX_DECK_SIZE = 1; // Currently, deck size is only 1 additional card. export const MAX_CARD_WIDTH = 504; export const CAROUSEL_HEIGHT = MAX_CARD_HEIGHT + MAX_DECK_SIZE * CARD_OFFSET_Y; diff --git a/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts b/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts index db4a36a..0635e65 100644 --- a/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts +++ b/app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles.ts @@ -1,4 +1,7 @@ -import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; +import { + mediaTabletDown, + mediaTabletUp, +} from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; import { inkLight, smokeMain, @@ -74,6 +77,13 @@ export const CardContent = styled.div` margin-bottom: 0; } } + + ${mediaTabletDown} { + -webkit-box-orient: vertical; + display: -webkit-box; + -webkit-line-clamp: 10; + overflow: hidden; + } `; export const CardCallToAction = styled(MButtonBase)` @@ -85,6 +95,12 @@ export const CardCallToAction = styled(MButtonBase)` text-decoration-skip-ink: none; text-underline-position: from-font; + p { + color: inherit; + font: inherit; + margin: 0; + } + &:hover { text-decoration: none; }