<div
class="mx-auto grid w-full max-w-sm grid-cols-1 gap-8 lg:max-w-7xl lg:grid-cols-3 lg:gap-12"
>
<a
href="javascript:void(0)"
class="group relative mx-auto block w-full max-w-sm overflow-hidden rounded-lg ring-8 shadow-lg ring-white/50 transition duration-150 ease-out active:scale-105 active:opacity-75 md:max-w-full"
>
<div
class="transition duration-300 ease-out will-change-transform group-hover:scale-110"
>
<img
src="https://plus.unsplash.com/premium_photo-1676228997938-9a98f7c6e39c?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Mountain Peak"
class="aspect-4/3 w-full rounded-lg object-cover"
/>
</div>
<div
class="absolute inset-0 flex flex-col justify-center gap-1.5 bg-amber-700/75 p-4 text-center text-white opacity-20 duration-150 ease-out group-hover:opacity-100 md:p-8"
>
<div
class="inline-flex -translate-y-2 items-center gap-1 self-center rounded-full bg-amber-800/60 px-2 py-0.5 text-xs font-semibold text-white opacity-0 duration-150 ease-out group-hover:translate-y-0 group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
data-slot="icon"
class="hi-micro hi-eye inline-block size-4 opacity-50"
>
<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
<path
fill-rule="evenodd"
d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
clip-rule="evenodd"
/>
</svg>
<span>17,350</span>
</div>
<h2
class="-translate-y-2 text-xl font-black text-white opacity-0 duration-150 ease-out group-hover:translate-y-0 group-hover:opacity-100"
>
Best Peaks to Climb Near Your Home
</h2>
<h3
class="translate-y-10 text-sm/relaxed font-medium text-white/85 opacity-0 duration-200 ease-out group-hover:translate-y-0 group-hover:opacity-100"
>
An inspiring adventure discovering the most amazing peaks.
</h3>
</div>
</a>
<a
href="javascript:void(0)"
class="group relative mx-auto block w-full max-w-sm overflow-hidden rounded-lg ring-8 shadow-lg ring-white/50 transition duration-150 ease-out active:scale-105 active:opacity-75 md:max-w-full"
>
<div
class="transition duration-300 ease-out will-change-transform group-hover:scale-110"
>
<img
src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Beach"
class="aspect-4/3 w-full rounded-lg object-cover"
/>
</div>
<div
class="absolute inset-0 flex flex-col justify-center gap-1.5 bg-blue-700/75 p-4 text-center text-white opacity-20 duration-150 ease-out group-hover:opacity-100 md:p-8"
>
<div
class="inline-flex -translate-y-2 items-center gap-1 self-center rounded-full bg-blue-800/60 px-2 py-0.5 text-xs font-semibold text-white opacity-0 duration-150 ease-out group-hover:translate-y-0 group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
data-slot="icon"
class="hi-micro hi-eye inline-block size-4 opacity-50"
>
<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
<path
fill-rule="evenodd"
d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
clip-rule="evenodd"
/>
</svg>
<span>9,681</span>
</div>
<h2
class="-translate-y-2 text-xl font-black text-white opacity-0 duration-150 ease-out group-hover:translate-y-0 group-hover:opacity-100"
>
Which are the best Beaches Ever?
</h2>
<h3
class="translate-y-10 text-sm/relaxed font-medium text-white/85 opacity-0 duration-200 ease-out group-hover:translate-y-0 group-hover:opacity-100"
>
An inspiring adventure discovering the most amazing beaches.
</h3>
</div>
</a>
<a
href="javascript:void(0)"
class="group relative mx-auto block w-full max-w-sm overflow-hidden rounded-lg ring-8 shadow-lg ring-white/50 transition duration-150 ease-out active:scale-105 active:opacity-75 md:max-w-full"
>
<div
class="transition duration-300 ease-out will-change-transform group-hover:scale-110"
>
<img
src="https://images.unsplash.com/photo-1506689052903-feca7809eade?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Lake"
class="aspect-4/3 w-full rounded-lg object-cover"
/>
</div>
<div
class="absolute inset-0 flex flex-col justify-center gap-1.5 bg-zinc-700/75 p-4 text-center text-white opacity-20 duration-150 ease-out group-hover:opacity-100 md:p-8"
>
<div
class="inline-flex -translate-y-2 items-center gap-1 self-center rounded-full bg-zinc-800/60 px-2 py-0.5 text-xs font-semibold text-white opacity-0 duration-150 ease-out group-hover:translate-y-0 group-hover:opacity-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
data-slot="icon"
class="hi-micro hi-eye inline-block size-4 opacity-50"
>
<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
<path
fill-rule="evenodd"
d="M1.38 8.28a.87.87 0 0 1 0-.566 7.003 7.003 0 0 1 13.238.006.87.87 0 0 1 0 .566A7.003 7.003 0 0 1 1.379 8.28ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
clip-rule="evenodd"
/>
</svg>
<span>5,579</span>
</div>
<h2
class="-translate-y-2 text-xl font-black text-white opacity-0 duration-150 ease-out group-hover:translate-y-0 group-hover:opacity-100"
>
10 Beautiful Lakes to Visit in 1 Week
</h2>
<h3
class="translate-y-10 text-sm/relaxed font-medium text-white/85 opacity-0 duration-200 ease-out group-hover:translate-y-0 group-hover:opacity-100"
>
An inspiring adventure discovering the most amazing lakes.
</h3>
</div>
</a>
</div>