Add responsive design

src/components/PlacesSection.tsx

@@ -58,7 +58,7 @@ const PlacesSection = () => {
   return (
     <section className="py-20 bg-gray-50 relative overflow-hidden">
       <div className="max-w-7xl mx-auto px-4 py-4">
-        <div className="grid lg:grid-cols-12 gap-8">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 md:gap-8">
           {/* Sidebar */}
           <div className="lg:col-span-4 sidebar">
             <div className="text-center lg:text-left mb-12">
@@ -97,7 +97,7 @@ const PlacesSection = () => {
             <div className="space-y-6">
               {places.map((place, index) => (
                 <a href={`/offer/${index + 1}`} key={index} className="bg-white rounded-xl overflow-hidden border-0 shadow-soft hover:shadow-medium transition-all duration-300 group cursor-pointer block">
-                  <div className="grid md:grid-cols-12 gap-0">
+                  <div className="grid grid-cols-1 md:grid-cols-12 gap-0">
                     {/* Image */}
                     <div className="md:col-span-5 relative bg-white">
                       <div className="overflow-hidden relative h-64 md:h-full">
@@ -118,8 +118,8 @@ const PlacesSection = () => {
                       </div>
                     </div>
 
-                    {/* Content */}
-                    <div className="md:col-span-7 p-6 flex flex-col">
+                    {/* Content - Responsive padding */}
+                    <div className="md:col-span-7 p-4 md:p-6 flex flex-col">
                       {/* Action buttons */}
                       <div className="flex gap-2 justify-end mb-4">
                         <button className="w-10 h-10 bg-white shadow-sm rounded-full flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">