From b28d5a3c98849c5dd1837e61cbb1501bdd528b99 Mon Sep 17 00:00:00 2001
From: Avery Felts <averyfelts@Averys-MacBook-Air.local>
Date: Tue, 27 Jan 2026 09:09:56 -0700
Subject: [PATCH] style: fix herbal tea image not respecting bubble shape by
 enforcing inner containment

---
 src/app/smoking-aids/page.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/app/smoking-aids/page.tsx b/src/app/smoking-aids/page.tsx
index 8814d60..e32607b 100644
--- a/src/app/smoking-aids/page.tsx
+++ b/src/app/smoking-aids/page.tsx
@@ -102,14 +102,16 @@ export default function SmokingAidsPage() {
                             <div className="flex flex-col sm:flex-row h-full relative z-10">
                                 {/* Image Section - Top on mobile, Left on desktop */}
                                 <div className="relative w-full sm:w-2/5 h-64 sm:h-auto bg-gradient-to-br from-white/5 to-white/0 p-6 flex items-center justify-center shrink-0">
-                                    <div className="relative w-40 h-40 sm:w-48 sm:h-48 transition-transform duration-500 group-hover:scale-105 bg-white rounded-full p-4 shadow-lg flex items-center justify-center">
-                                        <Image
-                                            src={item.image}
-                                            alt={item.title}
-                                            fill
-                                            className="object-contain drop-shadow-xl"
-                                            sizes="(max-width: 640px) 100vw, 300px"
-                                        />
+                                    <div className="relative w-40 h-40 sm:w-48 sm:h-48 transition-transform duration-500 group-hover:scale-105 bg-white rounded-full shadow-lg flex items-center justify-center overflow-hidden">
+                                        <div className="relative w-3/4 h-3/4">
+                                            <Image
+                                                src={item.image}
+                                                alt={item.title}
+                                                fill
+                                                className="object-contain drop-shadow-sm"
+                                                sizes="(max-width: 640px) 100vw, 300px"
+                                            />
+                                        </div>
                                     </div>
                                     <Badge variant="secondary" className="absolute top-4 left-4 backdrop-blur-md bg-white text-black border-white/20 shadow-sm px-3 py-1 text-sm font-medium">
                                         {item.category}