Learn page content thumbnails at default breakpoint

2025-09-29 13:44:05 -06:00
parent 6580f428c6
commit eadfe561b8
2 changed files with 11 additions and 33 deletions
@@ -76,14 +76,14 @@ const ContentThumbnailTemplate = ({
      href={`/blog/${post.slug}`}
      className={`block transition-transform duration-200 hover:scale-[1.02] ${className}`}
    >
-      <div className="relative w-[320px] h-[225.5px] overflow-hidden pt-[13.75px] pr-[76px] pb-[73.75px] pl-[14px]">
+      <div className="relative min-w-[320px] h-[225.5px] overflow-hidden pt-[13.75px] pr-[76px] pb-[73.75px] pl-[14px]">
        {/* Background SVG - sized to fit the 320x225.5 container exactly */}
        <div className="absolute inset-0 z-0">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={backgroundImage}
            alt={`Background for ${post.frontmatter.title}`}
-            className="w-[320px] h-[225.5px] object-cover"
+            className="w-full h-[225.5px] object-cover object-bottom"
          />
          {/* Gradient overlay */}
          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-black/70 z-10" />