diff --git a/components/organisms/gallery/PreviewGrid/index.tsx b/components/organisms/gallery/PreviewGrid/index.tsx index d2b57f0c..849b2b8d 100644 --- a/components/organisms/gallery/PreviewGrid/index.tsx +++ b/components/organisms/gallery/PreviewGrid/index.tsx @@ -87,6 +87,7 @@ const PreviewGridContent: FunctionComponent = async ({ alt={assetAlt(additional, locale)} priority={i < 10} quality={80} + className={styles.image} />
{assetTitle(additional, locale) || name} diff --git a/components/organisms/gallery/PreviewGrid/styles.module.css b/components/organisms/gallery/PreviewGrid/styles.module.css index 96f49eae..d77c20c1 100644 --- a/components/organisms/gallery/PreviewGrid/styles.module.css +++ b/components/organisms/gallery/PreviewGrid/styles.module.css @@ -16,6 +16,10 @@ } } +.image { + content-visibility: auto; +} + .titleCard { position: absolute; bottom: 0; @@ -30,6 +34,7 @@ transition: var(--time-transition-base) transform; transform: var(--translate-card, translateY(100%)); width: 100%; + word-break: break-word; @media (prefers-reduced-transparency: no-preference) { --opacity-background-title: 0.8;