<div class="px-4 py-5 flex-auto ct-docs-frame">
    <div class="relative flex flex-wrap justify-center ">
        <div class="w-full">
            <div class="py-12">
                <div class="mb-12 flex flex-wrap -mx-4 justify-center">
                    <div class="px-4 relative w-full lg:w-8/12 text-center">
                        <h6 class="mb-2 font-bold uppercase text-emerald-500">Our latest blogposts</h6>
                        <h3 class="text-3xl font-bold mt-3 mb-1 text-blueGray-700">Check the news for this month</h3>
                        <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">I always felt like I could do anything. That’s the main thing people are controlled by! Thoughts- their perception of themselves!</p>
                    </div>
                </div>
                <div class="items-center flex flex-wrap -mx-4">

                    <div class="px-4 relative w-full lg:w-3/12">
                        <div class="h-430-px overflow-hidden relative flex flex-col min-w-0 break-words bg-white w-full shadow-lg transition-all duration-150 ease-in-out hover:z-1 hover:transform hover:scale-110 group rounded-lg mb-4">
                            <div class="absolute w-full h-full bg-50-center bg-cover transition-all duration-1000 ease-in-out group-hover:transform group-hover:scale-110 rounded-lg" style="background-image: url('../../assets/img/guitar-play.jpg'); backface-visibility: hidden;"></div>
                            <div class="absolute w-full h-full bg-black opacity-50 rounded-lg"></div><a href="javascript:;">
                                <div class="absolute text-left p-6 bottom-0">
                                    <h6 class="text-xl leading-normal mb-0 text-white opacity-75">All the beautiful places</h6>
                                    <h5 class="text-2xl font-bold leading-tight mt-0 mb-2 text-white">Research by Bang &amp; Olufsen on city sounds and music</h5>
                                </div>
                            </a>
                        </div>
                    </div>



                    <div class="px-4 relative w-full lg:w-3/12">
                        <div class="h-430-px overflow-hidden relative flex flex-col min-w-0 break-words bg-white w-full shadow-lg transition-all duration-150 ease-in-out hover:z-1 hover:transform hover:scale-110 group rounded-lg mb-4">
                            <div class="absolute w-full h-full bg-50-center bg-cover transition-all duration-1000 ease-in-out group-hover:transform group-hover:scale-110 rounded-lg" style="background-image: url('../../assets/img/sections/thomas.jpg'); backface-visibility: hidden;"></div>
                            <div class="absolute w-full h-full bg-black opacity-50 rounded-lg"></div><a href="javascript:;">
                                <div class="absolute text-left p-6 bottom-0">
                                    <h6 class="text-xl leading-normal mb-0 text-white opacity-75">Spectrum Boats</h6>
                                    <h5 class="text-2xl font-bold leading-tight mt-0 mb-2 text-white">Data Virtualization and Boats Startups</h5>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="px-4 relative w-full lg:w-3/12">
                        <div class="h-430-px overflow-hidden relative flex flex-col min-w-0 break-words bg-white w-full shadow-lg transition-all duration-150 ease-in-out hover:z-1 hover:transform hover:scale-110 group rounded-lg mb-4">
                            <div class="absolute w-full h-full bg-50-center bg-cover transition-all duration-1000 ease-in-out group-hover:transform group-hover:scale-110 rounded-lg" style="background-image: url('../../assets/img/sections/ashim.jpg'); backface-visibility: hidden;"></div>
                            <div class="absolute w-full h-full bg-black opacity-50 rounded-lg"></div><a href="javascript:;">
                                <div class="absolute text-left p-6 bottom-0">
                                    <h6 class="text-xl leading-normal mb-0 text-white opacity-75">Flying on pandemic</h6>
                                    <h5 class="text-2xl font-bold leading-tight mt-0 mb-2 text-white">New Challenges when you want to fly to new areas</h5>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="px-4 relative w-full lg:w-3/12">
                        <div class="h-430-px overflow-hidden relative flex flex-col min-w-0 break-words bg-white w-full shadow-lg transition-all duration-150 ease-in-out hover:z-1 hover:transform hover:scale-110 group rounded-lg mb-4">
                            <div class="absolute w-full h-full bg-50-center bg-cover transition-all duration-1000 ease-in-out group-hover:transform group-hover:scale-110 rounded-lg" style="background-image: url('../../assets/img/sections/dane.jpg'); backface-visibility: hidden;"></div>
                            <div class="absolute w-full h-full bg-black opacity-50 rounded-lg"></div><a href="javascript:;">
                                <div class="absolute text-left p-6 bottom-0">
                                    <h6 class="text-xl leading-normal mb-0 text-white opacity-75">Work from Home</h6>
                                    <h5 class="text-2xl font-bold leading-tight mt-0 mb-2 text-white">How meetings and behaviour are changing</h5>
                                </div>
                            </a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<div class="w-full">
 <div class="py-12">
   <div class="flex flex-wrap -mx-4">
     <div class="mx-auto px-4 relative w-full lg:w-10/12">
       <div class="flex flex-wrap -mx-4 justify-start">
         <div class="px-4 relative w-full text-left">
           <span class="text-red-500 bg-red-200 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded px-2">new arrival</span>
           <h2 class="text-4xl font-bold mt-3 mb-1 text-blueGray-700">Latest Blogpost</h2>
           <p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">It's the same place where you do not have courage, there is no way you want it. It is possible that you will give, but it is more probable that you will recieve.</p>
         </div>
       </div>
       <div class="overflow-hidden mb-12 rounded-lg relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded h-550-px transition-all duration-150 ease-in-out hover:transform hover:scale-110 group">
         <div class="absolute rounded-lg w-full h-full bg-50-center bg-cover transition-all duration-1000 ease-in-out group-hover:transform group-hover:scale-110" style="background-image: url('../../assets/img/sections/unsplashs.jpg'); backface-visibility: hidden;"></div>
         <div class="absolute rounded-lg w-full h-full bg-black opacity-50"></div>
         <div class="p-10 flex h-full items-end z-1">
           <div>
             <h1 class="text-4xl font-semibold mt-0 mb-2 text-white">Miami Vice</h1>
             <p class="text-white opacity-75 text-lg">The simplest visual description uses ordinary words to convey what the writer sees. First he or she must look at the subject – slowly, carefully, and repeatedly, if possible – to identify the parts that make the whole</p>
             <div class="py-4 mb-3 flex items-start">
               <a href="javascript:;" class="flex items-center">
                 <img src="../../assets/img/person-9.jpg" class="rounded-full mr-4" alt="..." style="max-width: 40px;">
                 <div class="flex-1">
                   <div class="justify-between items-center">
                     <h6 class="text-sm uppercase mb-2 mt-2 text-white font-semibold">by Martin Jay</h6>
                   </div>
                 </div>
               </a>
             </div>
             <button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2  text-white bg-red-500 border-red-500 active:bg-red-600 active:border-red-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">Read more...</button>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</div>