◱ Bentoed

40+ modern, bento-grid components.

Ready-to-use bento grid designs. Simply copy and paste into your next project. Crafted with HTML, CSS, and Tailwind CSS.

Go to GitHub

▢ Gallery Grid 4-6 gallery


    <div id="bento-div" class="bt-div">
      <div class="bento-item bento-item-1">
        <img src="images/image.avif" />
      </div>
      <div class="bento-item bento-item-2">
        <img src="images/image2.avif" />
      </div>
      <div class="bento-item bento-item-3">
        <img src="images/image3.avif" />
      </div>
      <div class="bento-item bento-item-4">
        <img src="images/image4.avif" />
      </div>
    </div>


      :root {
        --space-xs: 0.25rem;
        --space-sm: 1rem;
        --space-md: 1.25rem;
        --space-lg: 4rem;

        --border-radius: 0.375rem;
        --transition-fast: 0.5s ease-in-out;
      }

      .bt-section {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        margin-top: 4rem /* 64px */;
      }

      #bento-div {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(10, minmax(0, 1fr));
        grid-auto-rows: 35rem; /* 560px */
        gap: var(--space-sm);
        padding: var(--space-sm);
      }

      .bento-item {
        overflow: hidden;
        border-radius: var(--border-radius);
      }
      .bento-item-1 {
        grid-column: span 4;
      }
      .bento-item-2 {
        grid-column: span 6;
      }
      .bento-item-3 {
        grid-column: span 6;
      }
      .bento-item-4 {
        grid-column: span 4;
      }

      .bento-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform var(--transition-fast);
      }

      .bento-item:hover img {
        transform: scale(1.05);
      }

      @media (max-width: 768px) {
        .bt-div,
        #bento-div {
          grid-template-columns: repeat(2, 1fr);
        }

        .bento-item-1,
        .bento-item-2,
        .bento-item-3,
        .bento-item-4 {
          grid-column: span 2;
        }
      }


    <div
    id="bento-div"
    class="w-full grid grid-cols-10 max-auto auto-rows-[35rem] gap-4 p-1"
    >
      <div class="col-span-10 lg:col-span-4 group overflow-hidden rounded-md">
        <img
          src="images/image.avif"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
      <div class="col-span-10 lg:col-span-6 group overflow-hidden rounded-md">
        <img
          src="images/image2.avif"
          class="h-full w-full object-cover
      group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
      <div class="col-span-10 lg:col-span-6 group overflow-hidden rounded-md">
        <img
          src="images/image3.avif"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
      <div class="col-span-10 lg:col-span-4 group overflow-hidden rounded-md">
        <img
          src="images/image4.avif"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
    </div>

▢ Gallery Grid 8-Item gallery


  <div id="bento-div" class="bt-div">
    <div class="bento-item bento-item-1">
      <img src="images/image.avif" />
    </div>
    <div class="bento-item bento-item-2">
      <img src="images/image2.avif" />
    </div>
    <div class="bento-item bento-item-3">
      <img src="images/image.avif" />
    </div>
    <div class="bento-item bento-item-4">
      <img src="images/image2.avif" />
    </div>
    <div class="bento-item bento-item-5">
      <img src="images/image3.avif" />
    </div>
    <div class="bento-item bento-item-6">
      <img src="images/image4.avif" />
    </div>
    <div class="bento-item bento-item-7">
      <img src="images/image5.avif" />
    </div>
    <div class="bento-item bento-item-8">
      <img src="images/image6.avif" />
    </div>
  </div>


    :root {
      --space-xs: 0.25rem;
      --space-sm: 1rem;
      --space-md: 1.25rem;
      --space-lg: 4rem;

      --border-radius: 0.375rem;
      --transition-fast: 0.5s ease-in-out;
    }

    .bt-section {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      margin-top: 4rem /* 64px */;
    }

    #bento-div {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      grid-auto-rows: 20rem; /* 560px */
      gap: var(--space-sm);
      padding: var(--space-sm);
    }
    .bento-item {
      overflow: hidden;
      border-radius: var(--border-radius);
    }

    .bento-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform var(--transition-fast);
    }

    .bento-item:hover img {
      transform: scale(1.05);
    }

    .bento-item-1 {
      grid-column: span 12;

      img {
        object-position: top;
      }
    }

    .bento-item-2 {
      grid-column: span 12;

      img {
        object-position: top;
      }
    }
    .bento-item-3,
    .bento-item-4 {
      grid-column: span 6;
      display: none;
    }

    .bento-item-5,
    .bento-item-6,
    .bento-item-7,
    .bento-item-8 {
      grid-column: span 6;
    }

    @media (min-width: 768px) {
      .bento-item-1,
      .bento-item-2 {
        grid-column: span 6;
      }

      .bento-item-3,
      .bento-item-4 {
        grid-column: span 6;
        display: block;
      }

      .bento-item-5,
      .bento-item-6,
      .bento-item-7,
      .bento-item-8 {
        grid-column: span 3;
      }
    }


    <div
    id="bento-div"
    class="w-full grid grid-cols-12 max-auto auto-rows-[20rem] gap-4 p-1"
    >
      <div class="col-span-12 md:col-span-6 group overflow-hidden rounded-lg">
        <img
          src="images/image.avif"
          class="h-full w-full object-cover object-top group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>

      <div class="col-span-12 md:col-span-6 group overflow-hidden rounded-lg">
        <img
          src="images/image2.avif"
          class="h-full w-full object-cover object-top group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>

      <div
        class="hidden md:block col-span-12 md:col-span-6 group overflow-hidden rounded-lg"
      >
        <img
          src="images/image.avif"
          class="h-full w-full object-cover object-center group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>

      <div
        class="hidden md:block col-span-12 md:col-span-6 group overflow-hidden rounded-lg"
      >
        <img
          src="images/image2.avif"
          class="h-full w-full object-cover object-center group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>

      <div class="col-span-6 md:col-span-3 group overflow-hidden rounded-lg">
        <img
          src="images/image6.avif"
          class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>

      <div class="col-span-6 md:col-span-3 group overflow-hidden rounded-lg">
        <img
          src="images/image7.avif"
          class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
      <div class="col-span-6 md:col-span-3 group overflow-hidden rounded-lg">
        <img
          src="images/image8.avif"
          class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>

      <div class="col-span-6 md:col-span-3 group overflow-hidden rounded-lg">
        <img
          src="images/image9.avif"
          class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
    </div>

▢ Gallery Mosaic 9-Item gallery


  <div id="bento-div" class="bt-div">
    <div class="bento-item bento-item-1">
      <img src="images/image.avif" />
    </div>
    <div class="bento-item bento-item-2">
      <img src="images/image2.avif" />
    </div>
    <div class="bento-item bento-item-3">
      <img src="images/image.avif" />
    </div>
    <div class="bento-item bento-item-4">
      <img src="images/image2.avif" />
    </div>
    <div class="bento-item bento-item-5">
      <img src="images/image3.avif" />
    </div>
    <div class="bento-item bento-item-6">
      <img src="images/image4.avif" />
    </div>
    <div class="bento-item bento-item-7">
      <img src="images/image5.avif" />
    </div>
    <div class="bento-item bento-item-8">
      <img src="images/image6.avif" />
    </div>
  </div>


    :root {
      --space-xs: 0.25rem;
      --space-sm: 1rem;
      --space-md: 1.25rem;
      --space-lg: 4rem;

      --border-radius: 0.375rem;
      --transition-fast: 0.5s ease-in-out;
    }

    .bt-section {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      margin-top: 4rem /* 64px */;
    }

    #bento-div {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      grid-auto-rows: 20rem; /* 560px */
      gap: var(--space-sm);
      padding: var(--space-sm);
    }
    .bento-item {
      overflow: hidden;
      border-radius: var(--border-radius);
    }

    .bento-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform var(--transition-fast);
    }

    .bento-item:hover img {
      transform: scale(1.05);
    }

    .bento-item-1 {
      grid-column: span 12;

      img {
        object-position: top;
      }
    }

    .bento-item-2 {
      grid-column: span 12;

      img {
        object-position: top;
      }
    }
    .bento-item-3,
    .bento-item-4 {
      grid-column: span 6;
      display: none;
    }

    .bento-item-5,
    .bento-item-6,
    .bento-item-7,
    .bento-item-8 {
      grid-column: span 6;
    }

    @media (min-width: 768px) {
      .bento-item-1,
      .bento-item-2 {
        grid-column: span 6;
      }

      .bento-item-3,
      .bento-item-4 {
        grid-column: span 6;
        display: block;
      }

      .bento-item-5,
      .bento-item-6,
      .bento-item-7,
      .bento-item-8 {
        grid-column: span 3;
      }
    }


    <div
      id="bento-div"
      class="w-full grid grid-cols-1 md:grid-cols-8 auto-rows-[14rem] md:auto-rows-[10rem] gap-4 p-1"
    >
      <div
        class="col-span-1 md:col-span-4 lg:col-span-2 row-span-1 lg:row-span-2 group overflow-hidden rounded-md"
      >
        <img
          src="images/image.avif"
          class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>

      <div class="col-span-1 md:col-span-2 lg:col-span-2 group overflow-hidden rounded-md">
        <img
          src="images/image2.avif"
          class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>

      <div class="col-span-1 md:col-span-2 lg:col-span-2 group overflow-hidden rounded-md">
        <img
          src="images/image3.avif"
          class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>

      <div
        class="col-span-1 md:col-span-2 lg:col-span-2 row-span-1 lg:row-span-2 group overflow-hidden rounded-md"
      >
        <img
          src="images/image4.avif"
          class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>

      <div
        class="col-span-1 md:col-span-4 lg:col-span-4 row-span-1 lg:row-span-2 group overflow-hidden rounded-md"
      >
        <img
          src="images/image6.avif"
          class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>

      <div
        class="col-span-1 md:col-span-2 lg:col-span-2 group overflow-hidden rounded-md"
      >
        <img
          src="images/image8.avif"
          class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>

      <div
        class="col-span-1 md:col-span-2 lg:col-span-2 row-span-1 lg:row-span-2 group overflow-hidden rounded-md"
      >
        <img
          src="images/image9.avif"
          class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>

      <div
        class="col-span-1 md:col-span-4 lg:col-span-4 group overflow-hidden rounded-md"
      >
        <img
          src="images/image3.avif"
          class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>

      <div
        class="col-span-1 md:col-span-4 lg:col-span-2 group overflow-hidden rounded-md"
      >
        <img
          src="images/image.avif"
          class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
    </div>

▢ Gallery Center Tall gallery


    <div id="bento-div" class="bt-div">
      <div class="bento-item bento-item-1">
        <img src="images/image.avif" />
      </div>
      <div class="bento-item bento-item-2">
        <img src="images/image2.avif" />
      </div>
      <div class="bento-item bento-item-3">
        <img src="images/image3.avif" />
      </div>
      <div class="bento-item bento-item-4">
        <img src="images/image4.avif" />
      </div>
      <div class="bento-item bento-item-5">
        <img src="images/image5.avif" />
      </div>
    </div>


    :root {
    --space-xs: 0.25rem;
    --space-sm: 1rem;
    --space-md: 1.25rem;
    --space-lg: 4rem;

    --border-radius: 0.375rem;
    --transition-fast: 0.5s ease-in-out;
    }

    .bt-section {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      margin-top: 4rem /* 64px */;
    }

    #bento-div {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      grid-auto-rows: 20rem; /* 560px */
      gap: var(--space-sm);
      padding: var(--space-sm);
    }

    .bento-item {
      overflow: hidden;
      border-radius: var(--border-radius);
    }
    .bento-item-1,
    .bento-item-2,
    .bento-item-4 {
      grid-column: span 4;
    }

    .bento-item-3 {
      grid-column: span 4;
      grid-row: span 2;
    }

    .bento-item-5 {
      grid-column: span 4;
    }

    .bento-item-6 {
      grid-column: span 4;
    }

    .bento-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform var(--transition-fast);
    }

    .bento-item:hover img {
      transform: scale(1.05);
    }

    @media (min-width: 768px) {
      .bento-item-1 {
        grid-column: span 3;
      }
      .bento-item-2 {
        grid-column: span 5;
      }

      .bento-item-4 {
        grid-column: span 5;
      }
      .bento-item-5 {
        grid-column: span 3;
      }
    }


    <div
    id="bento-div"
    class="w-full grid grid-cols-1 md:grid-cols-12 auto-rows-[14rem] md:auto-rows-[20rem] gap-4 p-1"
    >
      <div class="col-span-1 md:col-span-4 lg:col-span-3 group overflow-hidden rounded-md">
        <img
          src="images/image.avif"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>

      <div class="col-span-1 md:col-span-4 lg:col-span-5 group overflow-hidden rounded-md">
        <img
          src="images/image2.avif"
          class="h-full w-full object-cover
      group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>

      <div
        class="col-span-1 row-span-1 md:col-span-4 md:row-span-2 lg:col-span-4 lg:row-span-2 group overflow-hidden rounded-md"
      >
        <img
          src="images/image3.avif"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
      <div class="col-span-1 md:col-span-4 lg:col-span-5 group overflow-hidden rounded-md">
        <img
          src="images/image4.avif"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
      <div class="col-span-1 md:col-span-4 lg:col-span-3 group overflow-hidden rounded-md">
        <img
          src="images/image6.avif"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
    </div>

▢ Gallery Asymmetric gallery


    <div id="bento-div" class="bt-div">
      <div class="bento-item bento-item-1">
        <img src="images/image.avif" />
      </div>
      <div class="bento-item bento-item-2">
        <img src="images/image2.avif" />
      </div>
      <div class="bento-item bento-item-3">
        <img src="images/image3.avif" />
      </div>
      <div class="bento-item bento-item-4">
        <img src="images/image4.avif" />
      </div>
      <div class="bento-item bento-item-5">
        <img src="images/image5.avif" />
      </div>
    </div>


    :root {
      --space-xs: 0.25rem;
      --space-sm: 1rem;
      --space-md: 1.25rem;
      --space-lg: 4rem;
      --border-radius: 0.375rem;
      --transition-fast: 0.5s ease-in-out;
    }

    .bt-section {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      margin-top: 4rem /* 64px */;
    }

    #bento-div {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      grid-auto-rows: 10rem; /* 560px */
      gap: var(--space-sm);
      padding: var(--space-sm);
    }

    .bento-item {
      overflow: hidden;
      border-radius: var(--border-radius);
    }
    .bento-item-1 {
      grid-column: span 12;
      grid-row: span 2;
    }

    .bento-item-2 {
      grid-column: span 6;
      grid-row: span 2;
    }

    .bento-item-3,
    .bento-item-4 {
      grid-column: span 6;
      grid-row: span 1;
    }

    .bento-item-5 {
      grid-column: span 12;
    }

    .bento-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform var(--transition-fast);
    }

    .bento-item:hover img {
      transform: scale(1.05);
    }

    @media (min-width: 768px) {
      .bento-item-1 {
        grid-column: span 6;
        grid-row: span 3;
      }
      .bento-item-2 {
        grid-column: span 6;
        grid-row: span 2;
      }

      .bento-item-3 {
        grid-column: span 6;
      }

      .bento-item-4,
      .bento-item-5 {
        grid-column: span 6;
        grid-row: span 2;
      }
    }


    <div
    id="bento-div"
    class="w-full grid grid-cols-12 max-auto auto-rows-[10rem] gap-4 p-1"
    >
      <div
        class="col-span-12 row-span-2 lg:col-span-6 lg:row-span-3 group overflow-hidden rounded-md"
      >
        <img
          src="images/image.avif"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>

      <div
        class="col-span-6 row-span-2 lg:col-span-6 lg:row-span-2 group overflow-hidden rounded-md"
      >
        <img
          src="images/image2.avif"
          class="h-full w-full object-cover
      group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>

      <div
        class="col-span-6 row-span-1 lg:col-span-6 group overflow-hidden rounded-md"
      >
        <img
          src="images/image6.avif"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>

      <div
        class="col-span-6 row-span-1 lg:col-span-6 lg:row-span-2 group overflow-hidden rounded-md"
      >
        <img
          src="images/image4.avif"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>

      <div
        class="col-span-12 row-span-1 lg:col-span-6 lg:row-span-2 group overflow-hidden rounded-md"
      >
        <img
          src="images/image3.avif"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
    </div>

▢ Full Width Gallery gallery


    <div id="bento-div" class="bt-div">
      <div class="bento-item bento-item-1"></div>
      <div class="bento-item bento-item-2"></div>
      <div class="bento-item bento-item-3"></div>
      <div class="bento-item bento-item-4"></div>
      <div class="bento-item bento-item-5"></div>
    </div>


      :root {
        --space-sm: 1rem;
        --space-md: 1.25rem;
        --border-radius: 0.75rem;
      }

      #bento-div {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: 20rem;
        gap: var(--space-md);
        padding: var(--space-sm);
      }

      .bento-item {
        overflow: hidden;
        border-radius: var(--border-radius);
      }

      .bento-item-1 {
        grid-column: span 12;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      .bento-item-2 {
        grid-column: span 6;
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      .bento-item-3 {
        grid-column: span 6;
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }

      .bento-item-4 {
        grid-column: span 12;
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }

      .bento-item-5 {
        grid-column: span 12;
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
      }

      @media (max-width: 768px) {
        #bento-div {
          grid-template-columns: repeat(1, 1fr);
          grid-auto-rows: 16rem;
        }

        .bento-item-1,
        .bento-item-2,
        .bento-item-3,
        .bento-item-4,
        .bento-item-5 {
          grid-column: span 1;
        }
      }


    <div
      id="bento-div"
      class="w-full grid grid-cols-12 auto-rows-[20rem] gap-5 p-4"
    >
      <div class="col-span-12 overflow-hidden rounded-xl bg-gradient-to-br from-purple-500 to-purple-700"><img src="images/aesthetic1.jpg" class="h-full w-full object-cover" /></div>
      <div class="col-span-12 md:col-span-6 overflow-hidden rounded-xl bg-gradient-to-br from-pink-400 to-red-500"><img src="images/aesthetic2.jpg" class="h-full w-full object-cover" /></div>
      <div class="col-span-12 md:col-span-6 overflow-hidden rounded-xl bg-gradient-to-br from-cyan-400 to-cyan-600"><img src="images/aesthetic3.jpg" class="h-full w-full object-cover" /></div>
      <div class="col-span-12 overflow-hidden rounded-xl bg-gradient-to-br from-green-400 to-teal-400"><img src="images/aesthetic4.jpg" class="h-full w-full object-cover" /></div>
      <div class="col-span-12 overflow-hidden rounded-xl bg-gradient-to-br from-pink-500 to-yellow-400"><img src="images/aesthetic5.jpg" class="h-full w-full object-cover" /></div>
    </div>

▢ Masonry Gallery gallery


    <div id="bento-div" class="bt-div">
      <div class="bento-item bento-item-1"></div>
      <div class="bento-item bento-item-2"></div>
      <div class="bento-item bento-item-3"></div>
      <div class="bento-item bento-item-4"></div>
      <div class="bento-item bento-item-5"></div>
      <div class="bento-item bento-item-6"></div>
      <div class="bento-item bento-item-7"></div>
      <div class="bento-item bento-item-8"></div>
    </div>


      :root {
        --space-sm: 1rem;
        --space-md: 1.25rem;
        --border-radius: 0.75rem;
      }

      #bento-div {
        width: 100%;
        columns: 4;
        column-gap: var(--space-md);
        padding: var(--space-sm);
      }

      .bento-item {
        break-inside: avoid;
        margin-bottom: var(--space-md);
        border-radius: var(--border-radius);
        overflow: hidden;
        transition: transform 0.3s ease-in-out;
      }

      .bento-item:hover {
        transform: scale(1.02);
      }

      .bento-item-1 {
        height: 18rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      .bento-item-2 {
        height: 12rem;
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      .bento-item-3 {
        height: 22rem;
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }

      .bento-item-4 {
        height: 14rem;
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }

      .bento-item-5 {
        height: 16rem;
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
      }

      .bento-item-6 {
        height: 20rem;
        background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
      }

      .bento-item-7 {
        height: 10rem;
        background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
      }

      .bento-item-8 {
        height: 24rem;
        background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
      }

      @media (max-width: 768px) {
        #bento-div {
          columns: 2;
        }
      }


    <div
      id="bento-div"
      class="w-full columns-2 md:columns-4 gap-3 p-4"
    >
      <div class="break-inside-avoid mb-3 h-72 overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-300"><img src="images/aesthetic1.jpg" class="h-full w-full object-cover" /></div>
      <div class="break-inside-avoid mb-3 h-48 overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-300"><img src="images/aesthetic2.jpg" class="h-full w-full object-cover" /></div>
      <div class="break-inside-avoid mb-3 h-88 overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-300"><img src="images/aesthetic3.jpg" class="h-full w-full object-cover" /></div>
      <div class="break-inside-avoid mb-3 h-56 overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-300"><img src="images/aesthetic4.jpg" class="h-full w-full object-cover" /></div>
      <div class="break-inside-avoid mb-3 h-64 overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-300"><img src="images/aesthetic5.jpg" class="h-full w-full object-cover" /></div>
      <div class="break-inside-avoid mb-3 h-80 overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-300"><img src="images/aesthetic6.jpg" class="h-full w-full object-cover" /></div>
      <div class="break-inside-avoid mb-3 h-40 overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-300"><img src="images/aesthetic7.jpg" class="h-full w-full object-cover" /></div>
      <div class="break-inside-avoid mb-3 h-96 overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-300"><img src="images/aesthetic8.jpg" class="h-full w-full object-cover" /></div>
    </div>

▢ Polaroid Gallery gallery

Summer Memories

City Lights

Mountain View

Beach Day

Forest Trail

Sunset Vibes


    <div id="bento-div" class="bt-div">
      <div class="bento-item bento-item-1">
        <div class="polaroid-card">
          <div class="polaroid-image"></div>
          <p class="polaroid-caption">Summer Memories</p>
        </div>
      </div>
      <div class="bento-item bento-item-2">
        <div class="polaroid-card">
          <div class="polaroid-image"></div>
          <p class="polaroid-caption">City Lights</p>
        </div>
      </div>
      <div class="bento-item bento-item-3">
        <div class="polaroid-card">
          <div class="polaroid-image"></div>
          <p class="polaroid-caption">Mountain View</p>
        </div>
      </div>
      <div class="bento-item bento-item-4">
        <div class="polaroid-card">
          <div class="polaroid-image"></div>
          <p class="polaroid-caption">Beach Day</p>
        </div>
      </div>
      <div class="bento-item bento-item-5">
        <div class="polaroid-card">
          <div class="polaroid-image"></div>
          <p class="polaroid-caption">Forest Trail</p>
        </div>
      </div>
      <div class="bento-item bento-item-6">
        <div class="polaroid-card">
          <div class="polaroid-image"></div>
          <p class="polaroid-caption">Sunset Vibes</p>
        </div>
      </div>
    </div>


      :root {
        --space-sm: 1rem;
        --space-md: 1.25rem;
        --border-radius: 0.25rem;
      }

      #bento-div {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: minmax(22rem, auto);
        gap: var(--space-md);
        padding: var(--space-sm);
      }

      .bento-item {
        grid-column: span 4;
      }

      .polaroid-card {
        background: white;
        padding: 1rem;
        padding-bottom: 3rem;
        border-radius: var(--border-radius);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease-in-out;
      }

      .bento-item-1 .polaroid-card {
        transform: rotate(-2deg);
      }

      .bento-item-2 .polaroid-card {
        transform: rotate(1deg);
      }

      .bento-item-3 .polaroid-card {
        transform: rotate(-1deg);
      }

      .bento-item-4 .polaroid-card {
        transform: rotate(2deg);
      }

      .bento-item-5 .polaroid-card {
        transform: rotate(-1.5deg);
      }

      .bento-item-6 .polaroid-card {
        transform: rotate(1.5deg);
      }

      .polaroid-card:hover {
        transform: rotate(0deg) translateY(-0.5rem);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
      }

      .polaroid-image {
        width: 100%;
        height: 15rem;
        background-size: cover;
        background-position: center;
      }

      .bento-item-1 .polaroid-image {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      .bento-item-2 .polaroid-image {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      .bento-item-3 .polaroid-image {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }

      .bento-item-4 .polaroid-image {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }

      .bento-item-5 .polaroid-image {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
      }

      .bento-item-6 .polaroid-image {
        background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
      }

      .polaroid-caption {
        margin: 1rem 0 0 0;
        text-align: center;
        font-family: 'Comic Sans MS', cursive, sans-serif;
        color: #334155;
        font-size: 1rem;
      }

      @media (max-width: 768px) {
        #bento-div {
          grid-template-columns: repeat(1, 1fr);
        }

        .bento-item {
          grid-column: span 1;
        }

        .polaroid-card {
          transform: rotate(0deg) !important;
        }
      }


    <div
      id="bento-div"
      class="w-full grid grid-cols-1 md:grid-cols-12 auto-rows-[auto] md:auto-rows-[minmax(22rem,auto)] gap-5 p-4"
    >
      <div class="col-span-12 md:col-span-4">
        <div class="bg-white p-4 pb-12 rounded shadow-lg hover:rotate-0 hover:-translate-y-2 transition-all duration-300 -rotate-2">
          <div class="w-full h-60 overflow-hidden bg-gradient-to-br from-purple-500 to-purple-700"><img src="images/aesthetic1.jpg" class="h-full w-full object-cover" /></div>
          <p class="mt-4 text-center text-slate-700 font-comic">Summer Memories</p>
        </div>
      </div>
      <div class="col-span-12 md:col-span-4">
        <div class="bg-white p-4 pb-12 rounded shadow-lg hover:rotate-0 hover:-translate-y-2 transition-all duration-300 rotate-1">
          <div class="w-full h-60 overflow-hidden bg-gradient-to-br from-pink-400 to-red-500"><img src="images/aesthetic2.jpg" class="h-full w-full object-cover" /></div>
          <p class="mt-4 text-center text-slate-700 font-comic">City Lights</p>
        </div>
      </div>
      <div class="col-span-12 md:col-span-4">
        <div class="bg-white p-4 pb-12 rounded shadow-lg hover:rotate-0 hover:-translate-y-2 transition-all duration-300 -rotate-1">
          <div class="w-full h-60 overflow-hidden bg-gradient-to-br from-cyan-400 to-cyan-600"><img src="images/aesthetic3.jpg" class="h-full w-full object-cover" /></div>
          <p class="mt-4 text-center text-slate-700 font-comic">Mountain View</p>
        </div>
      </div>
      <div class="col-span-12 md:col-span-4">
        <div class="bg-white p-4 pb-12 rounded shadow-lg hover:rotate-0 hover:-translate-y-2 transition-all duration-300 rotate-2">
          <div class="w-full h-60 overflow-hidden bg-gradient-to-br from-green-400 to-teal-400"><img src="images/aesthetic4.jpg" class="h-full w-full object-cover" /></div>
          <p class="mt-4 text-center text-slate-700 font-comic">Beach Day</p>
        </div>
      </div>
      <div class="col-span-12 md:col-span-4">
        <div class="bg-white p-4 pb-12 rounded shadow-lg hover:rotate-0 hover:-translate-y-2 transition-all duration-300 -rotate-1.5">
          <div class="w-full h-60 overflow-hidden bg-gradient-to-br from-pink-500 to-yellow-400"><img src="images/aesthetic5.jpg" class="h-full w-full object-cover" /></div>
          <p class="mt-4 text-center text-slate-700 font-comic">Forest Trail</p>
        </div>
      </div>
      <div class="col-span-12 md:col-span-4">
        <div class="bg-white p-4 pb-12 rounded shadow-lg hover:rotate-0 hover:-translate-y-2 transition-all duration-300 rotate-1.5">
          <div class="w-full h-60 overflow-hidden bg-gradient-to-br from-cyan-400 to-indigo-900"><img src="images/aesthetic6.jpg" class="h-full w-full object-cover" /></div>
          <p class="mt-4 text-center text-slate-700 font-comic">Sunset Vibes</p>
        </div>
      </div>
    </div>

▢ Cross Gallery gallery


    <div id="bento-div" class="bt-div">
      <div class="bento-item bento-item-1"></div>
      <div class="bento-item bento-item-2"></div>
      <div class="bento-item bento-item-3"></div>
      <div class="bento-item bento-item-4"></div>
      <div class="bento-item bento-item-5"></div>
    </div>


      :root {
        --space-sm: 1rem;
        --border-radius: 0.75rem;
        --transition-fast: 0.5s ease-in-out;
      }

      #bento-div {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 14rem);
        gap: var(--space-sm);
        padding: var(--space-sm);
      }

      .bento-item {
        overflow: hidden;
        border-radius: var(--border-radius);
        transition: transform var(--transition-fast);
      }

      .bento-item:hover {
        transform: scale(1.03);
      }

      .bento-item-1 {
        grid-column: 2;
        grid-row: 1;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      .bento-item-2 {
        grid-column: 1;
        grid-row: 2;
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      .bento-item-3 {
        grid-column: 2;
        grid-row: 2;
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }

      .bento-item-4 {
        grid-column: 3;
        grid-row: 2;
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }

      .bento-item-5 {
        grid-column: 2;
        grid-row: 3;
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
      }

      @media (max-width: 768px) {
        #bento-div {
          grid-template-columns: 1fr;
          grid-template-rows: auto;
        }

        .bento-item-1,
        .bento-item-2,
        .bento-item-3,
        .bento-item-4,
        .bento-item-5 {
          grid-column: 1;
          grid-row: auto;
          height: 14rem;
        }
      }


    <div
      id="bento-div"
      class="w-full grid grid-cols-1 md:grid-cols-3 md:grid-rows-[14rem_14rem_14rem] gap-4 p-4"
    >
      <div class="md:col-start-2 md:row-start-1 row-start-1 col-start-0 h-56 md:h-auto group overflow-hidden rounded-xl hover:scale-[1.03] transition-transform duration-500">
        <img src="images/aesthetic1.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" />
      </div>
      <div class="md:col-start-1 md:row-start-2 row-start-1 col-start-0 h-56 md:h-auto group overflow-hidden rounded-xl hover:scale-[1.03] transition-transform duration-500">
        <img src="images/aesthetic2.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" />
      </div>
      <div class="md:col-start-2 md:row-start-2 row-start-1 col-start-0 h-56 md:h-auto group overflow-hidden rounded-xl hover:scale-[1.03] transition-transform duration-500">
        <img src="images/aesthetic3.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" />
      </div>
      <div class="md:col-start-3 md:row-start-2 row-start-1 col-start-0 h-56 md:h-auto group overflow-hidden rounded-xl hover:scale-[1.03] transition-transform duration-500">
        <img src="images/aesthetic4.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" />
      </div>
      <div class="md:col-start-2 md:row-start-3 row-start-1 col-start-0 h-56 md:h-auto group overflow-hidden rounded-xl hover:scale-[1.03] transition-transform duration-500">
        <img src="images/aesthetic5.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" />
      </div>
    </div>

▢ Diamond Gallery gallery


    <div id="bento-div" class="bt-div">
      <div class="bento-item bento-item-1"></div>
      <div class="bento-item bento-item-2"></div>
      <div class="bento-item bento-item-3"></div>
      <div class="bento-item bento-item-4"></div>
      <div class="bento-item bento-item-5"></div>
      <div class="bento-item bento-item-6"></div>
      <div class="bento-item bento-item-7"></div>
    </div>


      :root {
        --space-sm: 1rem;
        --space-md: 1.25rem;
        --border-radius: 0.75rem;
        --transition-fast: 0.5s ease-in-out;
      }

      #bento-div {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: 10rem;
        gap: var(--space-sm);
        padding: var(--space-sm);
      }

      .bento-item {
        overflow: hidden;
        border-radius: var(--border-radius);
        transition: transform var(--transition-fast);
      }

      .bento-item:hover {
        transform: scale(1.02);
      }

      .bento-item-1 {
        grid-column: 1 / span 6;
        grid-row: span 2;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      .bento-item-2 {
        grid-column: 7 / span 6;
        grid-row: span 2;
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      .bento-item-3 {
        grid-column: span 12;
        grid-row: span 2;
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }

      .bento-item-4 {
        grid-column: span 12;
        grid-row: span 2;
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }

      .bento-item-5 {
        grid-column: span 12;
        grid-row: span 2;
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
      }

      .bento-item-6 {
        grid-column: 1 / span 6;
        grid-row: span 2;
        background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
      }

      .bento-item-7 {
        grid-column: 7 / span 6;
        grid-row: span 2;
        background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
      }

      @media (min-width: 768px) {
        .bento-item-1 {
          grid-column: 3 / span 4;
        }

        .bento-item-2 {
          grid-column: 7 / span 4;
        }

        .bento-item-3,
        .bento-item-4,
        .bento-item-5 {
          grid-column: span 4;
        }

        .bento-item-6 {
          grid-column: 3 / span 4;
        }

        .bento-item-7 {
          grid-column: 7 / span 4;
        }
      }


    <div
      id="bento-div"
      class="w-full grid grid-cols-1 md:grid-cols-12 auto-rows-[14rem] md:auto-rows-[10rem] gap-4 p-4"
    >
      <div class="col-span-1 md:col-span-6 row-span-1 md:row-span-2 md:col-start-3 md:col-span-4 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic1.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>

      <div class="col-span-1 md:col-span-6 row-span-1 md:row-span-2 md:col-start-7 md:col-span-4 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic2.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>

      <div class="col-span-1 md:col-span-12 row-span-1 md:row-span-2 md:col-span-4 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic3.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>

      <div class="col-span-1 md:col-span-12 row-span-1 md:row-span-2 md:col-span-4 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic4.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>

      <div class="col-span-1 md:col-span-12 row-span-1 md:row-span-2 md:col-span-4 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic5.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>

      <div class="col-span-1 md:col-span-6 row-span-1 md:row-span-2 md:col-start-3 md:col-span-4 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic6.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>

      <div class="col-span-1 md:col-span-6 row-span-1 md:row-span-2 md:col-start-7 md:col-span-4 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic7.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>
    </div>

▢ Featured Row Gallery gallery


    <div id="bento-div" class="bt-div">
      <div class="bento-item bento-item-1"></div>
      <div class="bento-item bento-item-2"></div>
      <div class="bento-item bento-item-3"></div>
      <div class="bento-item bento-item-4"></div>
      <div class="bento-item bento-item-5"></div>
    </div>


      :root {
        --space-sm: 1rem;
        --space-md: 1.25rem;
        --border-radius: 0.75rem;
        --transition-fast: 0.5s ease-in-out;
      }

      #bento-div {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: 10rem;
        gap: var(--space-sm);
        padding: var(--space-sm);
      }

      .bento-item {
        overflow: hidden;
        border-radius: var(--border-radius);
        transition: transform var(--transition-fast);
      }

      .bento-item:hover {
        transform: scale(1.02);
      }

      .bento-item-1 {
        grid-column: span 12;
        grid-row: span 4;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      .bento-item-2 {
        grid-column: span 6;
        grid-row: span 2;
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      .bento-item-3 {
        grid-column: span 6;
        grid-row: span 2;
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }

      .bento-item-4 {
        grid-column: span 6;
        grid-row: span 2;
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }

      .bento-item-5 {
        grid-column: span 6;
        grid-row: span 2;
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
      }

      @media (min-width: 768px) {
        .bento-item-1 {
          grid-column: span 8;
          grid-row: span 4;
        }

        .bento-item-2,
        .bento-item-3,
        .bento-item-4,
        .bento-item-5 {
          grid-column: span 4;
          grid-row: span 1;
        }
      }


    <div
      id="bento-div"
      class="w-full grid grid-cols-12 auto-rows-[10rem] gap-4 p-4"
    >
      <div class="col-span-12 row-span-4 md:col-span-8 md:row-span-4 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic1.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>

      <div class="col-span-6 row-span-2 md:col-span-4 md:row-span-1 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic2.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>

      <div class="col-span-6 row-span-2 md:col-span-4 md:row-span-1 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic3.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>

      <div class="col-span-6 row-span-2 md:col-span-4 md:row-span-1 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic4.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>

      <div class="col-span-6 row-span-2 md:col-span-4 md:row-span-1 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic5.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>
    </div>

▢ Film Strip Gallery gallery

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Film Strip Gallery</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: system-ui, -apple-system, sans-serif; background: #111827; padding: 2rem; }

    .film-strip {
      background-color: #0f172a;
      padding: 2rem;
      border-radius: 1rem;
      max-width: 80rem;
      margin: 0 auto;
    }

    .film-strip-inner {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 1rem;
      height: 20rem;
    }

    .film-frame {
      position: relative;
      overflow: hidden;
      border-radius: 0.75rem;
      transition: transform 0.3s ease;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
    }

    .film-frame:hover { transform: scale(1.05); }
    .film-frame > div { width: 100%; height: 100%; }

    .frame-number {
      position: absolute;
      top: 0.5rem;
      left: 0.5rem;
      background-color: rgba(15, 23, 42, 0.8);
      color: white;
      font-size: 0.75rem;
      padding: 0.25rem 0.5rem;
      border-radius: 0.25rem;
    }

    .frame-1 { grid-column: span 2; }
    .frame-2 { grid-column: span 4; }
    .frame-3 { grid-column: span 3; }
    .frame-4 { grid-column: span 2; }
    .frame-5 { grid-column: span 1; }

    @media (max-width: 768px) {
      .film-strip-inner {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, 12rem);
        height: auto;
      }
      .frame-1, .frame-2, .frame-3, .frame-4, .frame-5 { grid-column: span 1; }
    }
  </style>
</head>
<body>
  <div class="film-strip">
    <div class="film-strip-inner">
      <div class="film-frame frame-1">
        <div style="background:linear-gradient(135deg,#667eea,#764ba2)"></div>
        <div class="frame-number">01</div>
      </div>
      <div class="film-frame frame-2">
        <div style="background:linear-gradient(135deg,#f093fb,#f5576c)"></div>
        <div class="frame-number">02</div>
      </div>
      <div class="film-frame frame-3">
        <div style="background:linear-gradient(135deg,#4facfe,#00f2fe)"></div>
        <div class="frame-number">03</div>
      </div>
      <div class="film-frame frame-4">
        <div style="background:linear-gradient(135deg,#43e97b,#38f9d7)"></div>
        <div class="frame-number">04</div>
      </div>
      <div class="film-frame frame-5">
        <div style="background:linear-gradient(135deg,#fa709a,#fee140)"></div>
        <div class="frame-number">05</div>
      </div>
    </div>
  </div>
</body>
</html>

<style>
.film-strip {
  background-color: #0f172a;
  padding: 2rem;
  border-radius: 1rem;
  max-width: 80rem;
  margin: 0 auto;
}

.film-strip-inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  height: 20rem;
}

.film-frame {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  transition: transform 0.3s ease;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
}

.film-frame:hover {
  transform: scale(1.05);
}

.film-frame > div {
  width: 100%;
  height: 100%;
}

.frame-number {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background-color: rgba(15, 23, 42, 0.8);
  color: white;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.frame-1 { grid-column: span 2; }
.frame-2 { grid-column: span 4; }
.frame-3 { grid-column: span 3; }
.frame-4 { grid-column: span 2; }
.frame-5 { grid-column: span 1; }

@media (max-width: 768px) {
  .film-strip-inner {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 12rem);
    height: auto;
  }
  .frame-1, .frame-2, .frame-3, .frame-4, .frame-5 {
    grid-column: span 1;
  }
}
</style>

<div class="film-strip">
  <div class="film-strip-inner">
    <div class="film-frame frame-1">
      <div style="background:linear-gradient(135deg,#667eea,#764ba2)"></div>
      <div class="frame-number">01</div>
    </div>
    <div class="film-frame frame-2">
      <div style="background:linear-gradient(135deg,#f093fb,#f5576c)"></div>
      <div class="frame-number">02</div>
    </div>
    <div class="film-frame frame-3">
      <div style="background:linear-gradient(135deg,#4facfe,#00f2fe)"></div>
      <div class="frame-number">03</div>
    </div>
    <div class="film-frame frame-4">
      <div style="background:linear-gradient(135deg,#43e97b,#38f9d7)"></div>
      <div class="frame-number">04</div>
    </div>
    <div class="film-frame frame-5">
      <div style="background:linear-gradient(135deg,#fa709a,#fee140)"></div>
      <div class="frame-number">05</div>
    </div>
  </div>
</div>

<div class=" p-8 rounded-2xl max-w-7xl mx-auto">
  <div class="grid grid-cols-1 md:grid-cols-12 gap-4 h-auto md:h-80">
    <!-- Frame 1: Narrow -->
    <div class="col-span-1 md:col-span-2 h-48 md:h-full relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic1.jpg" alt="Film frame" class="w-full h-full object-cover" />
      <div class="absolute top-2 left-2 bg-slate-950/80 text-white text-xs px-2 py-1 rounded">01</div>
    </div>

    <!-- Frame 2: Wide -->
    <div class="col-span-1 md:col-span-4 h-48 md:h-full relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic2.jpg" alt="Film frame" class="w-full h-full object-cover" />
      <div class="absolute top-2 left-2 bg-slate-950/80 text-white text-xs px-2 py-1 rounded">02</div>
    </div>

    <!-- Frame 3: Medium -->
    <div class="col-span-1 md:col-span-3 h-48 md:h-full relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic3.jpg" alt="Film frame" class="w-full h-full object-cover" />
      <div class="absolute top-2 left-2 bg-slate-950/80 text-white text-xs px-2 py-1 rounded">03</div>
    </div>

    <!-- Frame 4: Narrow -->
    <div class="col-span-1 md:col-span-2 h-48 md:h-full relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic4.jpg" alt="Film frame" class="w-full h-full object-cover" />
      <div class="absolute top-2 left-2 bg-slate-950/80 text-white text-xs px-2 py-1 rounded">04</div>
    </div>

    <!-- Frame 5: Extra wide -->
    <div class="col-span-1 md:col-span-1 h-48 md:h-full relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic5.jpg" alt="Film frame" class="w-full h-full object-cover" />
      <div class="absolute top-2 left-2 bg-slate-950/80 text-white text-xs px-2 py-1 rounded">05</div>
    </div>
  </div>
</div>

▢ 3-Column Gallery gallery


    <div id="bento-div" class="bt-div">
      <div class="bento-item bento-item-1"></div>
      <div class="bento-item bento-item-2"></div>
      <div class="bento-item bento-item-3"></div>
      <div class="bento-item bento-item-4"></div>
      <div class="bento-item bento-item-5"></div>
      <div class="bento-item bento-item-6"></div>
    </div>


      :root {
        --space-sm: 1rem;
        --border-radius: 0.75rem;
        --transition-fast: 0.5s ease-in-out;
      }

      #bento-div {
        width: 100%;
        columns: 3;
        column-gap: var(--space-sm);
        padding: var(--space-sm);
      }

      .bento-item {
        break-inside: avoid;
        margin-bottom: var(--space-sm);
        overflow: hidden;
        border-radius: var(--border-radius);
        transition: transform var(--transition-fast);
      }

      .bento-item:hover {
        transform: scale(1.03);
      }

      .bento-item-1 {
        height: 22rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      .bento-item-2 {
        height: 14rem;
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      .bento-item-3 {
        height: 18rem;
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }

      .bento-item-4 {
        height: 16rem;
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }

      .bento-item-5 {
        height: 20rem;
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
      }

      .bento-item-6 {
        height: 12rem;
        background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
      }

      @media (max-width: 768px) {
        #bento-div {
          columns: 2;
        }
      }


    <div
      id="bento-div"
      class="w-full columns-2 md:columns-3 gap-4 p-4"
    >
      <div class="break-inside-avoid mb-4 h-88 group overflow-hidden rounded-xl hover:scale-[1.03] transition-transform duration-500">
        <img src="images/aesthetic1.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" />
      </div>
      <div class="break-inside-avoid mb-4 h-56 group overflow-hidden rounded-xl hover:scale-[1.03] transition-transform duration-500">
        <img src="images/aesthetic2.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" />
      </div>
      <div class="break-inside-avoid mb-4 h-72 group overflow-hidden rounded-xl hover:scale-[1.03] transition-transform duration-500">
        <img src="images/aesthetic3.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" />
      </div>
      <div class="break-inside-avoid mb-4 h-64 group overflow-hidden rounded-xl hover:scale-[1.03] transition-transform duration-500">
        <img src="images/aesthetic4.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" />
      </div>
      <div class="break-inside-avoid mb-4 h-80 group overflow-hidden rounded-xl hover:scale-[1.03] transition-transform duration-500">
        <img src="images/aesthetic5.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" />
      </div>
      <div class="break-inside-avoid mb-4 h-48 group overflow-hidden rounded-xl hover:scale-[1.03] transition-transform duration-500">
        <img src="images/aesthetic6.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" />
      </div>
    </div>

▢ Mixed Grid Gallery gallery

Featured Work

Vertical

Panoramic View

Wide format showcase

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mixed Grid Gallery</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: system-ui, -apple-system, sans-serif; background: #111827; padding: 2rem; }

    .mixed-gallery {
      background-color: #0f172a;
      padding: 2rem;
      border-radius: 1rem;
      max-width: 80rem;
      margin: 0 auto;
    }

    .mixed-container {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 1rem;
      grid-auto-rows: 200px;
    }

    .gallery-item {
      position: relative;
      overflow: hidden;
      border-radius: 0.75rem;
      transition: transform 0.3s ease;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
    }

    .gallery-item:hover { transform: scale(1.05); }
    .gallery-item > div { width: 100%; height: 100%; }

    .item-1 { grid-column: span 6; grid-row: span 2; }
    .item-2 { grid-column: span 3; grid-row: span 1; }
    .item-3 { grid-column: span 3; grid-row: span 1; }
    .item-4 { grid-column: span 3; grid-row: span 2; }
    .item-5 { grid-column: span 3; grid-row: span 2; }
    .item-6 { grid-column: span 6; grid-row: span 1; }
    .item-7 { grid-column: span 12; grid-row: span 1; }

    .item-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(to top, rgba(15, 23, 42, 0.8), transparent);
      padding: 1rem;
      color: white;
    }

    .item-title { font-size: 1.25rem; font-weight: bold; }

    .item-badge {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background-color: rgba(15, 23, 42, 0.8);
      color: white;
      font-size: 0.75rem;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
    }

    .panoramic-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.4) 50%, transparent 100%);
      display: flex;
      align-items: center;
      padding: 1.5rem;
      color: white;
    }

    .panoramic-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 0.5rem; }
    .panoramic-subtitle { color: #cbd5e1; }

    @media (max-width: 768px) {
      .mixed-container { grid-template-columns: repeat(2, 1fr); }
      .item-1, .item-2, .item-3, .item-4, .item-5, .item-6, .item-7 { grid-column: span 2; }
    }
  </style>
</head>
<body>
  <div class="mixed-gallery">
    <div class="mixed-container">
      <div class="gallery-item item-1">
        <div style="background:linear-gradient(135deg,#667eea,#764ba2)"></div>
        <div class="item-overlay">
          <div class="item-title">Featured Work</div>
        </div>
      </div>

      <div class="gallery-item item-2">
        <div style="background:linear-gradient(135deg,#f093fb,#f5576c)"></div>
      </div>

      <div class="gallery-item item-3">
        <div style="background:linear-gradient(135deg,#4facfe,#00f2fe)"></div>
      </div>

      <div class="gallery-item item-4">
        <div style="background:linear-gradient(135deg,#43e97b,#38f9d7)"></div>
        <div class="item-badge">Vertical</div>
      </div>

      <div class="gallery-item item-5">
        <div style="background:linear-gradient(135deg,#fa709a,#fee140)"></div>
      </div>

      <div class="gallery-item item-6">
        <div style="background:linear-gradient(135deg,#30cfd0,#330867)"></div>
      </div>

      <div class="gallery-item item-7">
        <div style="background:linear-gradient(135deg,#a8edea,#fed6e3)"></div>
        <div class="panoramic-overlay">
          <div>
            <div class="panoramic-title">Panoramic View</div>
            <div class="panoramic-subtitle">Wide format showcase</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

<style>
.mixed-gallery {
  background-color: #0f172a;
  padding: 2rem;
  border-radius: 1rem;
  max-width: 80rem;
  margin: 0 auto;
}

.mixed-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  grid-auto-rows: 200px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  transition: transform 0.3s ease;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
}

.gallery-item:hover {
  transform: scale(1.05);
}

.gallery-item > div {
  width: 100%;
  height: 100%;
}

.item-1 {
  grid-column: span 6;
  grid-row: span 2;
}

.item-2 {
  grid-column: span 3;
  grid-row: span 1;
}

.item-3 {
  grid-column: span 3;
  grid-row: span 1;
}

.item-4 {
  grid-column: span 3;
  grid-row: span 2;
}

.item-5 {
  grid-column: span 3;
  grid-row: span 2;
}

.item-6 {
  grid-column: span 6;
  grid-row: span 1;
}

.item-7 {
  grid-column: span 12;
  grid-row: span 1;
}

.item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.8), transparent);
  padding: 1rem;
  color: white;
}

.item-title {
  font-size: 1.25rem;
  font-weight: bold;
}

.item-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: rgba(15, 23, 42, 0.8);
  color: white;
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
}

.panoramic-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.4) 50%, transparent 100%);
  display: flex;
  align-items: center;
  padding: 1.5rem;
  color: white;
}

.panoramic-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.panoramic-subtitle {
  color: #cbd5e1;
}

@media (max-width: 768px) {
  .mixed-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .item-1, .item-2, .item-3, .item-4, .item-5, .item-6, .item-7 {
    grid-column: span 2;
  }
}
</style>

<div class="mixed-gallery">
  <div class="mixed-container">
    <div class="gallery-item item-1">
      <div style="background:linear-gradient(135deg,#667eea,#764ba2)"></div>
      <div class="item-overlay">
        <div class="item-title">Featured Work</div>
      </div>
    </div>

    <div class="gallery-item item-2">
      <div style="background:linear-gradient(135deg,#f093fb,#f5576c)"></div>
    </div>

    <div class="gallery-item item-3">
      <div style="background:linear-gradient(135deg,#4facfe,#00f2fe)"></div>
    </div>

    <div class="gallery-item item-4">
      <div style="background:linear-gradient(135deg,#43e97b,#38f9d7)"></div>
      <div class="item-badge">Vertical</div>
    </div>

    <div class="gallery-item item-5">
      <div style="background:linear-gradient(135deg,#fa709a,#fee140)"></div>
    </div>

    <div class="gallery-item item-6">
      <div style="background:linear-gradient(135deg,#30cfd0,#330867)"></div>
    </div>

    <div class="gallery-item item-7">
      <div style="background:linear-gradient(135deg,#a8edea,#fed6e3)"></div>
      <div class="panoramic-overlay">
        <div>
          <div class="panoramic-title">Panoramic View</div>
          <div class="panoramic-subtitle">Wide format showcase</div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class=" p-8 rounded-2xl max-w-7xl mx-auto">
  <div class="grid grid-cols-1 md:grid-cols-12 gap-4 auto-rows-[200px]">
    <!-- Large horizontal -->
    <div class="col-span-1 md:col-span-6 row-span-1 md:row-span-2 relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic1.jpg" alt="Gallery item" class="w-full h-full object-cover" />
      <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-slate-950/80 to-transparent p-4">
        <h3 class="text-white text-xl font-bold">Featured Work</h3>
      </div>
    </div>

    <!-- Two medium squares -->
    <div class="col-span-1 md:col-span-3 row-span-1 relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic2.jpg" alt="Gallery item" class="w-full h-full object-cover" />
    </div>

    <div class="col-span-1 md:col-span-3 row-span-1 relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic3.jpg" alt="Gallery item" class="w-full h-full object-cover" />
    </div>

    <!-- One tall on right -->
    <div class="col-span-1 md:col-span-3 row-span-1 md:row-span-2 relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic4.jpg" alt="Gallery item" class="w-full h-full object-cover" />
      <div class="absolute top-4 right-4 bg-slate-950/80 text-white text-xs px-3 py-1 rounded-full">Vertical</div>
    </div>

    <!-- One tall on left bottom -->
    <div class="col-span-1 md:col-span-3 row-span-1 md:row-span-2 relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic5.jpg" alt="Gallery item" class="w-full h-full object-cover" />
    </div>

    <!-- Two wide horizontal at bottom -->
    <div class="col-span-1 md:col-span-6 row-span-1 relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic6.jpg" alt="Gallery item" class="w-full h-full object-cover" />
    </div>

    <!-- Full width footer -->
    <div class="col-span-1 md:col-span-12 row-span-1 relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic7.jpg" alt="Gallery item" class="w-full h-full object-cover" />
      <div class="absolute inset-0 bg-gradient-to-r from-slate-950/90 via-slate-950/40 to-transparent flex items-center">
        <div class="p-6 text-white">
          <h3 class="text-2xl font-bold">Panoramic View</h3>
          <p class="text-slate-300">Wide format showcase</p>
        </div>
      </div>
    </div>
  </div>
</div>

▢ Hero Grid Gallery gallery


    <div id="bento-div" class="bt-div">
      <div class="bento-item bento-item-1"></div>
      <div class="bento-item bento-item-2"></div>
      <div class="bento-item bento-item-3"></div>
      <div class="bento-item bento-item-4"></div>
      <div class="bento-item bento-item-5"></div>
    </div>


      :root {
        --space-sm: 1rem;
        --border-radius: 0.375rem;
        --transition-fast: 0.5s ease-in-out;
      }

      #bento-div {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: 15rem;
        gap: var(--space-sm);
        padding: var(--space-sm);
      }

      .bento-item {
        overflow: hidden;
        border-radius: var(--border-radius);
        transition: transform var(--transition-fast);
      }

      .bento-item:hover {
        transform: scale(1.05);
      }

      .bento-item-1 {
        grid-column: span 12;
        grid-row: span 2;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      .bento-item-2 {
        grid-column: span 3;
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      .bento-item-3 {
        grid-column: span 3;
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }

      .bento-item-4 {
        grid-column: span 3;
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }

      .bento-item-5 {
        grid-column: span 3;
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
      }

      @media (max-width: 768px) {
        #bento-div {
          grid-template-columns: repeat(2, 1fr);
        }

        .bento-item-1 {
          grid-column: span 2;
        }

        .bento-item-2,
        .bento-item-3,
        .bento-item-4,
        .bento-item-5 {
          grid-column: span 1;
        }
      }


    <div
    id="bento-div"
    class="w-full grid grid-cols-12 auto-rows-[15rem] gap-4 p-4"
    >
      <div class="col-span-12 row-span-2 group overflow-hidden rounded-md">
        <img
          src="images/aesthetic1.jpg"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
      <div class="col-span-6 lg:col-span-3 group overflow-hidden rounded-md">
        <img
          src="images/aesthetic2.jpg"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
      <div class="col-span-6 lg:col-span-3 group overflow-hidden rounded-md">
        <img
          src="images/aesthetic3.jpg"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
      <div class="col-span-6 lg:col-span-3 group overflow-hidden rounded-md">
        <img
          src="images/aesthetic4.jpg"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
      <div class="col-span-6 lg:col-span-3 group overflow-hidden rounded-md">
        <img
          src="images/aesthetic5.jpg"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
    </div>

▢ Panoramic Gallery gallery


    <div id="bento-div" class="bt-div">
      <div class="bento-item bento-item-1"></div>
      <div class="bento-item bento-item-2"></div>
      <div class="bento-item bento-item-3"></div>
    </div>


      :root {
        --space-sm: 1rem;
        --space-md: 1.25rem;
        --border-radius: 0.75rem;
        --transition-fast: 0.5s ease-in-out;
      }

      #bento-div {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: var(--space-sm);
        padding: var(--space-sm);
      }

      .bento-item {
        grid-column: span 12;
        overflow: hidden;
        border-radius: var(--border-radius);
        transition: transform var(--transition-fast);
      }

      .bento-item:hover {
        transform: scale(1.01);
      }

      .bento-item-1 {
        height: 8rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      .bento-item-2 {
        height: 12rem;
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      .bento-item-3 {
        height: 10rem;
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }

      @media (min-width: 768px) {
        .bento-item-1 {
          height: 12rem;
        }

        .bento-item-2 {
          height: 18rem;
        }

        .bento-item-3 {
          height: 14rem;
        }
      }


    <div
      id="bento-div"
      class="w-full grid grid-cols-12 gap-4 p-4"
    >
      <div class="col-span-12 h-32 md:h-48 group overflow-hidden rounded-xl hover:scale-[1.01] transition-transform duration-500">
        <img src="images/aesthetic1.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>

      <div class="col-span-12 h-48 md:h-72 group overflow-hidden rounded-xl hover:scale-[1.01] transition-transform duration-500">
        <img src="images/aesthetic2.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>

      <div class="col-span-12 h-40 md:h-56 group overflow-hidden rounded-xl hover:scale-[1.01] transition-transform duration-500">
        <img src="images/aesthetic3.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>
    </div>

▢ Sidebar Gallery gallery


    <div id="bento-div" class="bt-div">
      <div class="bento-item bento-item-1"></div>
      <div class="bento-item bento-item-2"></div>
      <div class="bento-item bento-item-3"></div>
      <div class="bento-item bento-item-4"></div>
      <div class="bento-item bento-item-5"></div>
      <div class="bento-item bento-item-6"></div>
      <div class="bento-item bento-item-7"></div>
    </div>


      :root {
        --space-sm: 1rem;
        --space-md: 1.25rem;
        --border-radius: 0.75rem;
        --transition-fast: 0.5s ease-in-out;
      }

      #bento-div {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: 10rem;
        gap: var(--space-sm);
        padding: var(--space-sm);
      }

      .bento-item {
        overflow: hidden;
        border-radius: var(--border-radius);
        transition: transform var(--transition-fast);
      }

      .bento-item:hover {
        transform: scale(1.02);
      }

      .bento-item-1 {
        grid-column: span 12;
        grid-row: span 4;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      .bento-item-2,
      .bento-item-3,
      .bento-item-4,
      .bento-item-5,
      .bento-item-6,
      .bento-item-7 {
        grid-column: span 6;
        grid-row: span 2;
      }

      .bento-item-2 {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      .bento-item-3 {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }

      .bento-item-4 {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }

      .bento-item-5 {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
      }

      .bento-item-6 {
        background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
      }

      .bento-item-7 {
        background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
      }

      @media (min-width: 768px) {
        .bento-item-1 {
          grid-column: span 4;
          grid-row: span 6;
        }

        .bento-item-2,
        .bento-item-3,
        .bento-item-4,
        .bento-item-5,
        .bento-item-6,
        .bento-item-7 {
          grid-column: span 4;
          grid-row: span 2;
        }
      }


    <div
      id="bento-div"
      class="w-full grid grid-cols-12 auto-rows-[10rem] gap-4 p-4"
    >
      <div class="col-span-12 row-span-4 md:col-span-4 md:row-span-6 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic1.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>

      <div class="col-span-6 row-span-2 md:col-span-4 md:row-span-2 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic2.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>

      <div class="col-span-6 row-span-2 md:col-span-4 md:row-span-2 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic3.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>

      <div class="col-span-6 row-span-2 md:col-span-4 md:row-span-2 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic4.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>

      <div class="col-span-6 row-span-2 md:col-span-4 md:row-span-2 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic5.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>

      <div class="col-span-6 row-span-2 md:col-span-4 md:row-span-2 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic6.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>

      <div class="col-span-6 row-span-2 md:col-span-4 md:row-span-2 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic7.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>
    </div>

▢ Split Gallery gallery


    <div id="bento-div" class="bt-div">
      <div class="bento-item bento-item-1"></div>
      <div class="bento-item bento-item-2"></div>
      <div class="bento-item bento-item-3"></div>
      <div class="bento-item bento-item-4"></div>
      <div class="bento-item bento-item-5"></div>
    </div>


      :root {
        --space-sm: 1rem;
        --space-md: 1.25rem;
        --border-radius: 0.75rem;
        --transition-fast: 0.5s ease-in-out;
      }

      #bento-div {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: 10rem;
        gap: var(--space-sm);
        padding: var(--space-sm);
      }

      .bento-item {
        overflow: hidden;
        border-radius: var(--border-radius);
        transition: transform var(--transition-fast);
      }

      .bento-item:hover {
        transform: scale(1.02);
      }

      .bento-item-1 {
        grid-column: span 12;
        grid-row: span 4;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      .bento-item-2,
      .bento-item-3,
      .bento-item-4,
      .bento-item-5 {
        grid-column: span 6;
        grid-row: span 2;
      }

      .bento-item-2 {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      .bento-item-3 {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }

      .bento-item-4 {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }

      .bento-item-5 {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
      }

      @media (min-width: 768px) {
        .bento-item-1 {
          grid-column: span 6;
          grid-row: span 4;
        }

        .bento-item-2,
        .bento-item-3,
        .bento-item-4,
        .bento-item-5 {
          grid-column: span 3;
          grid-row: span 2;
        }
      }


    <div
      id="bento-div"
      class="w-full grid grid-cols-12 auto-rows-[10rem] gap-4 p-4"
    >
      <div class="col-span-12 row-span-4 md:col-span-6 md:row-span-4 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic1.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>

      <div class="col-span-6 row-span-2 md:col-span-3 md:row-span-2 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic2.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>

      <div class="col-span-6 row-span-2 md:col-span-3 md:row-span-2 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic3.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>

      <div class="col-span-6 row-span-2 md:col-span-3 md:row-span-2 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic4.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>

      <div class="col-span-6 row-span-2 md:col-span-3 md:row-span-2 group overflow-hidden rounded-xl hover:scale-[1.02] transition-transform duration-500">
        <img src="images/aesthetic5.jpg" class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
      </div>
    </div>

▢ Spotlight Gallery gallery

Featured Showcase

Highlighting our most captivating work

Featured Premium

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Spotlight Gallery</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: system-ui, -apple-system, sans-serif; background: #111827; padding: 2rem; }

    .spotlight-gallery {
      background-color: #0f172a;
      padding: 2rem;
      border-radius: 1rem;
      max-width: 80rem;
      margin: 0 auto;
    }

    .spotlight-container {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 1rem;
      height: 600px;
    }

    .spotlight-hero {
      grid-column: span 8;
      grid-row: span 3;
      position: relative;
      overflow: hidden;
      border-radius: 0.75rem;
      transition: transform 0.3s ease;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
    }

    .spotlight-hero:hover { transform: scale(1.05); }
    .spotlight-hero > div { width: 100%; height: 100%; }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.4) 50%, transparent 100%);
      display: flex;
      align-items: flex-end;
      padding: 2rem;
      color: white;
    }

    .hero-content { width: 100%; }
    .hero-title { font-size: 2.25rem; font-weight: bold; margin-bottom: 0.75rem; }
    .hero-subtitle { color: #cbd5e1; font-size: 1.125rem; margin-bottom: 1rem; }
    .hero-tags { display: flex; gap: 0.5rem; }

    .hero-tag {
      padding: 0.25rem 0.75rem;
      background-color: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(8px);
      border-radius: 9999px;
      font-size: 0.875rem;
    }

    .spotlight-thumb {
      grid-column: span 4;
      grid-row: span 1;
      position: relative;
      overflow: hidden;
      border-radius: 0.75rem;
      transition: transform 0.3s ease;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
    }

    .spotlight-thumb:hover { transform: scale(1.05); }
    .spotlight-thumb > div { width: 100%; height: 100%; }

    .thumb-overlay {
      position: absolute;
      inset: 0;
      background-color: rgba(15, 23, 42, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.3s ease;
    }

    .spotlight-thumb:hover .thumb-overlay { background-color: rgba(15, 23, 42, 0.2); }
    .thumb-number { color: white; font-size: 1.5rem; font-weight: bold; }

    @media (max-width: 768px) {
      .spotlight-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
      }
      .spotlight-hero {
        grid-column: span 1;
        min-height: 400px;
      }
      .spotlight-thumb {
        grid-column: span 1;
        height: 200px;
      }
    }
  </style>
</head>
<body>
  <div class="spotlight-gallery">
    <div class="spotlight-container">
      <div class="spotlight-hero">
        <div style="background:linear-gradient(135deg,#667eea,#764ba2)"></div>
        <div class="hero-overlay">
          <div class="hero-content">
            <div class="hero-title">Featured Showcase</div>
            <div class="hero-subtitle">Highlighting our most captivating work</div>
            <div class="hero-tags">
              <div class="hero-tag">Featured</div>
              <div class="hero-tag">Premium</div>
            </div>
          </div>
        </div>
      </div>

      <div class="spotlight-thumb">
        <div style="background:linear-gradient(135deg,#f093fb,#f5576c)"></div>
        <div class="thumb-overlay">
          <div class="thumb-number">02</div>
        </div>
      </div>

      <div class="spotlight-thumb">
        <div style="background:linear-gradient(135deg,#4facfe,#00f2fe)"></div>
        <div class="thumb-overlay">
          <div class="thumb-number">03</div>
        </div>
      </div>

      <div class="spotlight-thumb">
        <div style="background:linear-gradient(135deg,#43e97b,#38f9d7)"></div>
        <div class="thumb-overlay">
          <div class="thumb-number">04</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

<style>
.spotlight-gallery {
  background-color: #0f172a;
  padding: 2rem;
  border-radius: 1rem;
  max-width: 80rem;
  margin: 0 auto;
}

.spotlight-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  height: 600px;
}

.spotlight-hero {
  grid-column: span 8;
  grid-row: span 3;
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  transition: transform 0.3s ease;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
}

.spotlight-hero:hover {
  transform: scale(1.05);
}

.spotlight-hero > div {
  width: 100%;
  height: 100%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.4) 50%, transparent 100%);
  display: flex;
  align-items: flex-end;
  padding: 2rem;
  color: white;
}

.hero-content {
  width: 100%;
}

.hero-title {
  font-size: 2.25rem;
  font-weight: bold;
  margin-bottom: 0.75rem;
}

.hero-subtitle {
  color: #cbd5e1;
  font-size: 1.125rem;
  margin-bottom: 1rem;
}

.hero-tags {
  display: flex;
  gap: 0.5rem;
}

.hero-tag {
  padding: 0.25rem 0.75rem;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  border-radius: 9999px;
  font-size: 0.875rem;
}

.spotlight-thumb {
  grid-column: span 4;
  grid-row: span 1;
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  transition: transform 0.3s ease;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
}

.spotlight-thumb:hover {
  transform: scale(1.05);
}

.spotlight-thumb > div {
  width: 100%;
  height: 100%;
}

.thumb-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.spotlight-thumb:hover .thumb-overlay {
  background-color: rgba(15, 23, 42, 0.2);
}

.thumb-number {
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
}

@media (max-width: 768px) {
  .spotlight-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .spotlight-hero {
    grid-column: span 1;
    min-height: 400px;
  }
  .spotlight-thumb {
    grid-column: span 1;
    height: 200px;
  }
}
</style>

<div class="spotlight-gallery">
  <div class="spotlight-container">
    <div class="spotlight-hero">
      <div style="background:linear-gradient(135deg,#667eea,#764ba2)"></div>
      <div class="hero-overlay">
        <div class="hero-content">
          <div class="hero-title">Featured Showcase</div>
          <div class="hero-subtitle">Highlighting our most captivating work</div>
          <div class="hero-tags">
            <div class="hero-tag">Featured</div>
            <div class="hero-tag">Premium</div>
          </div>
        </div>
      </div>
    </div>

    <div class="spotlight-thumb">
      <div style="background:linear-gradient(135deg,#f093fb,#f5576c)"></div>
      <div class="thumb-overlay">
        <div class="thumb-number">02</div>
      </div>
    </div>

    <div class="spotlight-thumb">
      <div style="background:linear-gradient(135deg,#4facfe,#00f2fe)"></div>
      <div class="thumb-overlay">
        <div class="thumb-number">03</div>
      </div>
    </div>

    <div class="spotlight-thumb">
      <div style="background:linear-gradient(135deg,#43e97b,#38f9d7)"></div>
      <div class="thumb-overlay">
        <div class="thumb-number">04</div>
      </div>
    </div>
  </div>
</div>

<div class=" p-8 rounded-2xl max-w-7xl mx-auto">
  <div class="grid grid-cols-1 md:grid-cols-12 gap-4 h-auto md:h-[600px]">
    <!-- Main spotlight image -->
    <div class="col-span-1 md:col-span-8 row-span-1 md:row-span-3 h-[400px] md:h-auto relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic1.jpg" alt="Spotlight" class="w-full h-full object-cover" />
      <div class="absolute inset-0 bg-gradient-to-t from-slate-950/90 via-slate-950/40 to-transparent flex items-end">
        <div class="p-8 text-white w-full">
          <h2 class="text-4xl font-bold mb-3">Featured Showcase</h2>
          <p class="text-slate-300 text-lg mb-4">Highlighting our most captivating work</p>
          <div class="flex gap-2">
            <span class="px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full text-sm">Featured</span>
            <span class="px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full text-sm">Premium</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Sidebar thumbnails -->
    <div class="col-span-1 md:col-span-4 row-span-1 h-[200px] md:h-auto relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic2.jpg" alt="Thumbnail" class="w-full h-full object-cover" />
      <div class="absolute inset-0 bg-slate-950/40 hover:bg-slate-950/20 transition-colors flex items-center justify-center">
        <div class="text-white text-center">
          <div class="text-2xl font-bold">02</div>
        </div>
      </div>
    </div>

    <div class="col-span-1 md:col-span-4 row-span-1 h-[200px] md:h-auto relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic3.jpg" alt="Thumbnail" class="w-full h-full object-cover" />
      <div class="absolute inset-0 bg-slate-950/40 hover:bg-slate-950/20 transition-colors flex items-center justify-center">
        <div class="text-white text-center">
          <div class="text-2xl font-bold">03</div>
        </div>
      </div>
    </div>

    <div class="col-span-1 md:col-span-4 row-span-1 h-[200px] md:h-auto relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic4.jpg" alt="Thumbnail" class="w-full h-full object-cover" />
      <div class="absolute inset-0 bg-slate-950/40 hover:bg-slate-950/20 transition-colors flex items-center justify-center">
        <div class="text-white text-center">
          <div class="text-2xl font-bold">04</div>
        </div>
      </div>
    </div>
  </div>
</div>

▢ Staircase Gallery gallery


    <div id="bento-div" class="bt-div">
      <div class="bento-item bento-item-1"></div>
      <div class="bento-item bento-item-2"></div>
      <div class="bento-item bento-item-3"></div>
      <div class="bento-item bento-item-4"></div>
      <div class="bento-item bento-item-5"></div>
    </div>


      :root {
        --space-sm: 1rem;
        --border-radius: 0.375rem;
        --transition-fast: 0.5s ease-in-out;
      }

      #bento-div {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: 18rem;
        gap: var(--space-sm);
        padding: var(--space-sm);
      }

      .bento-item {
        overflow: hidden;
        border-radius: var(--border-radius);
        transition: transform var(--transition-fast);
      }

      .bento-item:hover {
        transform: scale(1.05);
      }

      .bento-item-1 {
        grid-column: span 4;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      .bento-item-2 {
        grid-column: 5 / span 4;
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      .bento-item-3 {
        grid-column: 9 / span 4;
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }

      .bento-item-4 {
        grid-column: span 6;
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }

      .bento-item-5 {
        grid-column: span 6;
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
      }

      @media (max-width: 768px) {
        #bento-div {
          grid-template-columns: repeat(2, 1fr);
        }

        .bento-item-1,
        .bento-item-2,
        .bento-item-3,
        .bento-item-4,
        .bento-item-5 {
          grid-column: span 2;
        }
      }


    <div
    id="bento-div"
    class="w-full grid grid-cols-12 auto-rows-[18rem] gap-4 p-4"
    >
      <div class="col-span-12 lg:col-span-4 group overflow-hidden rounded-md">
        <img
          src="images/aesthetic1.jpg"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
      <div class="col-span-12 lg:col-start-5 lg:col-span-4 group overflow-hidden rounded-md">
        <img
          src="images/aesthetic2.jpg"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
      <div class="col-span-12 lg:col-start-9 lg:col-span-4 group overflow-hidden rounded-md">
        <img
          src="images/aesthetic3.jpg"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
      <div class="col-span-12 lg:col-span-6 group overflow-hidden rounded-md">
        <img
          src="images/aesthetic4.jpg"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
      <div class="col-span-12 lg:col-span-6 group overflow-hidden rounded-md">
        <img
          src="images/aesthetic5.jpg"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
    </div>

▢ Tiles Gallery gallery

L-Tile

T-Top

T-Stem

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tiles Gallery</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: system-ui, -apple-system, sans-serif; background: #111827; padding: 2rem; }

    .tiles-gallery {
      background-color: #0f172a;
      padding: 2rem;
      border-radius: 1rem;
      max-width: 80rem;
      margin: 0 auto;
    }

    .tiles-container {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 1rem;
      grid-auto-rows: 200px;
    }

    .tile-item {
      position: relative;
      overflow: hidden;
      border-radius: 0.75rem;
      transition: transform 0.3s ease;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
    }

    .tile-item:hover { transform: scale(1.05); }
    .tile-item > div { width: 100%; height: 100%; }

    .tile-badge {
      position: absolute;
      top: 1rem;
      left: 1rem;
      background-color: rgba(15, 23, 42, 0.8);
      color: white;
      font-size: 0.75rem;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
    }

    .tile-1 { grid-column: span 2; grid-row: span 2; }
    .tile-2 { grid-column: span 1; grid-row: span 2; }
    .tile-3 { grid-column: span 1; grid-row: span 1; }
    .tile-4 { grid-column: span 2; grid-row: span 1; }
    .tile-5 { grid-column: span 2; grid-row: span 1; }
    .tile-6 { grid-column: span 1; grid-row: span 1; }
    .tile-7 { grid-column-start: 2; grid-column: span 1; grid-row: span 2; }
    .tile-8 { grid-column: span 3; grid-row: span 1; }

    @media (max-width: 768px) {
      .tiles-container {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 150px;
      }
      .tile-1, .tile-4, .tile-5, .tile-8 { grid-column: span 2; }
      .tile-2, .tile-3, .tile-6, .tile-7 { grid-column: span 1; }
      .tile-7 { grid-column-start: auto; }
    }
  </style>
</head>
<body>
  <div class="tiles-gallery">
    <div class="tiles-container">
      <div class="tile-item tile-1">
        <div style="background:linear-gradient(135deg,#667eea,#764ba2)"></div>
        <div class="tile-badge">L-Tile</div>
      </div>

      <div class="tile-item tile-2">
        <div style="background:linear-gradient(135deg,#f093fb,#f5576c)"></div>
      </div>

      <div class="tile-item tile-3">
        <div style="background:linear-gradient(135deg,#4facfe,#00f2fe)"></div>
      </div>

      <div class="tile-item tile-4">
        <div style="background:linear-gradient(135deg,#43e97b,#38f9d7)"></div>
      </div>

      <div class="tile-item tile-5">
        <div style="background:linear-gradient(135deg,#fa709a,#fee140)"></div>
        <div class="tile-badge">T-Top</div>
      </div>

      <div class="tile-item tile-6">
        <div style="background:linear-gradient(135deg,#30cfd0,#330867)"></div>
      </div>

      <div class="tile-item tile-7">
        <div style="background:linear-gradient(135deg,#a8edea,#fed6e3)"></div>
        <div class="tile-badge">T-Stem</div>
      </div>

      <div class="tile-item tile-8">
        <div style="background:linear-gradient(135deg,#ff9a9e,#fecfef)"></div>
      </div>
    </div>
  </div>
</body>
</html>

<style>
.tiles-gallery {
  background-color: #0f172a;
  padding: 2rem;
  border-radius: 1rem;
  max-width: 80rem;
  margin: 0 auto;
}

.tiles-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  grid-auto-rows: 200px;
}

.tile-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  transition: transform 0.3s ease;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
}

.tile-item:hover {
  transform: scale(1.05);
}

.tile-item > div {
  width: 100%;
  height: 100%;
}

.tile-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background-color: rgba(15, 23, 42, 0.8);
  color: white;
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
}

/* L-shape main */
.tile-1 {
  grid-column: span 2;
  grid-row: span 2;
}

/* Tall vertical */
.tile-2 {
  grid-column: span 1;
  grid-row: span 2;
}

/* Square */
.tile-3 {
  grid-column: span 1;
  grid-row: span 1;
}

/* Wide horizontal */
.tile-4 {
  grid-column: span 2;
  grid-row: span 1;
}

/* T-shape top */
.tile-5 {
  grid-column: span 2;
  grid-row: span 1;
}

/* Small square */
.tile-6 {
  grid-column: span 1;
  grid-row: span 1;
}

/* T-shape stem */
.tile-7 {
  grid-column-start: 2;
  grid-column: span 1;
  grid-row: span 2;
}

/* Wide bottom */
.tile-8 {
  grid-column: span 3;
  grid-row: span 1;
}

@media (max-width: 768px) {
  .tiles-container {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
  }
  .tile-1, .tile-4, .tile-5, .tile-8 {
    grid-column: span 2;
  }
  .tile-2, .tile-3, .tile-6, .tile-7 {
    grid-column: span 1;
  }
  .tile-7 {
    grid-column-start: auto;
  }
}
</style>

<div class="tiles-gallery">
  <div class="tiles-container">
    <div class="tile-item tile-1">
      <div style="background:linear-gradient(135deg,#667eea,#764ba2)"></div>
      <div class="tile-badge">L-Tile</div>
    </div>

    <div class="tile-item tile-2">
      <div style="background:linear-gradient(135deg,#f093fb,#f5576c)"></div>
    </div>

    <div class="tile-item tile-3">
      <div style="background:linear-gradient(135deg,#4facfe,#00f2fe)"></div>
    </div>

    <div class="tile-item tile-4">
      <div style="background:linear-gradient(135deg,#43e97b,#38f9d7)"></div>
    </div>

    <div class="tile-item tile-5">
      <div style="background:linear-gradient(135deg,#fa709a,#fee140)"></div>
      <div class="tile-badge">T-Top</div>
    </div>

    <div class="tile-item tile-6">
      <div style="background:linear-gradient(135deg,#30cfd0,#330867)"></div>
    </div>

    <div class="tile-item tile-7">
      <div style="background:linear-gradient(135deg,#a8edea,#fed6e3)"></div>
      <div class="tile-badge">T-Stem</div>
    </div>

    <div class="tile-item tile-8">
      <div style="background:linear-gradient(135deg,#ff9a9e,#fecfef)"></div>
    </div>
  </div>
</div>

<div class="p-8 rounded-2xl max-w-7xl mx-auto">
  <div class="grid grid-cols-1 md:grid-cols-6 gap-4 auto-rows-[200px]">
    <!-- L-shape piece: 2x2 main + 1x1 extension -->
    <div class="col-span-1 md:col-span-2 row-span-1 md:row-span-2 relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic1.jpg" alt="Gallery tile" class="w-full h-full object-cover" />
      <div class="absolute top-4 left-4 bg-slate-950/80 text-white text-xs px-3 py-1 rounded-full">L-Tile</div>
    </div>

    <!-- Tall vertical -->
    <div class="col-span-1 md:col-span-1 row-span-1 md:row-span-2 relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic2.jpg" alt="Gallery tile" class="w-full h-full object-cover" />
    </div>

    <!-- Square -->
    <div class="col-span-1 md:col-span-1 row-span-1 relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic3.jpg" alt="Gallery tile" class="w-full h-full object-cover" />
    </div>

    <!-- Wide horizontal -->
    <div class="col-span-1 md:col-span-2 row-span-1 relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic4.jpg" alt="Gallery tile" class="w-full h-full object-cover" />
    </div>

    <!-- T-shape top: horizontal bar -->
    <div class="col-span-1 md:col-span-2 row-span-1 relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic5.jpg" alt="Gallery tile" class="w-full h-full object-cover" />
      <div class="absolute top-4 left-4 bg-slate-950/80 text-white text-xs px-3 py-1 rounded-full">T-Top</div>
    </div>

    <!-- Small square -->
    <div class="col-span-1 md:col-span-1 row-span-1 relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic6.jpg" alt="Gallery tile" class="w-full h-full object-cover" />
    </div>

    <!-- T-shape stem: vertical drop -->
    <div class="col-span-1 md:col-span-2 row-span-1 relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic7.jpg" alt="Gallery tile" class="w-full h-full object-cover" />
      <div class="absolute top-4 left-4 bg-slate-950/80 text-white text-xs px-3 py-1 rounded-full">T-Stem</div>
    </div>

    <!-- Wide bottom piece -->
    <div class="col-span-1 md:col-span-3 row-span-1 relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic8.jpg" alt="Gallery tile" class="w-full h-full object-cover" />
    </div>

		<div class="col-span-1 md:col-span-1 row-span-1 relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
      <img src="images/aesthetic5.jpg" alt="Gallery tile" class="w-full h-full object-cover" />
    </div>
  </div>
</div>

▢ Waterfall Gallery gallery

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Waterfall Gallery</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: system-ui, -apple-system, sans-serif; background: #111827; padding: 2rem; }

    .waterfall-gallery {
      background-color: #0f172a;
      padding: 2rem;
      border-radius: 1rem;
      max-width: 80rem;
      margin: 0 auto;
    }

    .waterfall-container {
      column-count: 5;
      column-gap: 1rem;
    }

    .waterfall-item {
      break-inside: avoid;
      margin-bottom: 1rem;
    }

    .waterfall-card {
      position: relative;
      overflow: hidden;
      border-radius: 0.75rem;
      transition: transform 0.3s ease;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
    }

    .waterfall-card:hover { transform: scale(1.05); }
    .waterfall-card > div { width: 100%; }

    @media (max-width: 1024px) {
      .waterfall-container { column-count: 3; }
    }
    @media (max-width: 768px) {
      .waterfall-container { column-count: 2; }
    }
    @media (max-width: 480px) {
      .waterfall-container { column-count: 1; }
    }
  </style>
</head>
<body>
  <div class="waterfall-gallery">
    <div class="waterfall-container">
      <div class="waterfall-item">
        <div class="waterfall-card">
          <div style="height:20rem;background:linear-gradient(135deg,#667eea,#764ba2)"></div>
        </div>
      </div>
      <div class="waterfall-item">
        <div class="waterfall-card">
          <div style="height:12rem;background:linear-gradient(135deg,#f093fb,#f5576c)"></div>
        </div>
      </div>
      <div class="waterfall-item">
        <div class="waterfall-card">
          <div style="height:28rem;background:linear-gradient(135deg,#4facfe,#00f2fe)"></div>
        </div>
      </div>
      <div class="waterfall-item">
        <div class="waterfall-card">
          <div style="height:16rem;background:linear-gradient(135deg,#43e97b,#38f9d7)"></div>
        </div>
      </div>
      <div class="waterfall-item">
        <div class="waterfall-card">
          <div style="height:24rem;background:linear-gradient(135deg,#fa709a,#fee140)"></div>
        </div>
      </div>
      <div class="waterfall-item">
        <div class="waterfall-card">
          <div style="height:14rem;background:linear-gradient(135deg,#30cfd0,#330867)"></div>
        </div>
      </div>
      <div class="waterfall-item">
        <div class="waterfall-card">
          <div style="height:22rem;background:linear-gradient(135deg,#a8edea,#fed6e3)"></div>
        </div>
      </div>
      <div class="waterfall-item">
        <div class="waterfall-card">
          <div style="height:8rem;background:linear-gradient(135deg,#ff9a9e,#fecfef)"></div>
        </div>
      </div>
      <div class="waterfall-item">
        <div class="waterfall-card">
          <div style="height:18rem;background:linear-gradient(135deg,#ffecd2,#fcb69f)"></div>
        </div>
      </div>
      <div class="waterfall-item">
        <div class="waterfall-card">
          <div style="height:26rem;background:linear-gradient(135deg,#e0c3fc,#8ec5fc)"></div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

<style>
.waterfall-gallery {
  background-color: #0f172a;
  padding: 2rem;
  border-radius: 1rem;
  max-width: 80rem;
  margin: 0 auto;
}

.waterfall-container {
  column-count: 5;
  column-gap: 1rem;
}

.waterfall-item {
  break-inside: avoid;
  margin-bottom: 1rem;
}

.waterfall-card {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  transition: transform 0.3s ease;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
}

.waterfall-card:hover {
  transform: scale(1.05);
}

.waterfall-card > div {
  width: 100%;
}

@media (max-width: 1024px) {
  .waterfall-container { column-count: 3; }
}
@media (max-width: 768px) {
  .waterfall-container { column-count: 2; }
}
@media (max-width: 480px) {
  .waterfall-container { column-count: 1; }
}
</style>

<div class="waterfall-gallery">
  <div class="waterfall-container">
    <div class="waterfall-item">
      <div class="waterfall-card">
        <div style="height:20rem;background:linear-gradient(135deg,#667eea,#764ba2)"></div>
      </div>
    </div>
    <div class="waterfall-item">
      <div class="waterfall-card">
        <div style="height:12rem;background:linear-gradient(135deg,#f093fb,#f5576c)"></div>
      </div>
    </div>
    <div class="waterfall-item">
      <div class="waterfall-card">
        <div style="height:28rem;background:linear-gradient(135deg,#4facfe,#00f2fe)"></div>
      </div>
    </div>
    <div class="waterfall-item">
      <div class="waterfall-card">
        <div style="height:16rem;background:linear-gradient(135deg,#43e97b,#38f9d7)"></div>
      </div>
    </div>
    <div class="waterfall-item">
      <div class="waterfall-card">
        <div style="height:24rem;background:linear-gradient(135deg,#fa709a,#fee140)"></div>
      </div>
    </div>
    <div class="waterfall-item">
      <div class="waterfall-card">
        <div style="height:14rem;background:linear-gradient(135deg,#30cfd0,#330867)"></div>
      </div>
    </div>
    <div class="waterfall-item">
      <div class="waterfall-card">
        <div style="height:22rem;background:linear-gradient(135deg,#a8edea,#fed6e3)"></div>
      </div>
    </div>
    <div class="waterfall-item">
      <div class="waterfall-card">
        <div style="height:8rem;background:linear-gradient(135deg,#ff9a9e,#fecfef)"></div>
      </div>
    </div>
    <div class="waterfall-item">
      <div class="waterfall-card">
        <div style="height:18rem;background:linear-gradient(135deg,#ffecd2,#fcb69f)"></div>
      </div>
    </div>
    <div class="waterfall-item">
      <div class="waterfall-card">
        <div style="height:26rem;background:linear-gradient(135deg,#e0c3fc,#8ec5fc)"></div>
      </div>
    </div>
  </div>
</div>

<div class=" p-8 rounded-2xl max-w-7xl mx-auto">
  <div class="columns-1 md:columns-5 gap-4 space-y-4">
    <div class="break-inside-avoid mb-4">
      <div class="relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl" style="height: 20rem;">
        <img src="images/aesthetic1.jpg" alt="Gallery item" class="w-full h-full object-cover" />
      </div>
    </div>

    <div class="break-inside-avoid mb-4">
      <div class="relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl" style="height: 12rem;">
        <img src="images/aesthetic2.jpg" alt="Gallery item" class="w-full h-full object-cover" />
      </div>
    </div>

    <div class="break-inside-avoid mb-4">
      <div class="relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl" style="height: 28rem;">
        <img src="images/aesthetic3.jpg" alt="Gallery item" class="w-full h-full object-cover" />
      </div>
    </div>

    <div class="break-inside-avoid mb-4">
      <div class="relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl" style="height: 16rem;">
        <img src="images/aesthetic4.jpg" alt="Gallery item" class="w-full h-full object-cover" />
      </div>
    </div>

    <div class="break-inside-avoid mb-4">
      <div class="relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl" style="height: 24rem;">
        <img src="images/aesthetic5.jpg" alt="Gallery item" class="w-full h-full object-cover" />
      </div>
    </div>

    <div class="break-inside-avoid mb-4">
      <div class="relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl" style="height: 14rem;">
        <img src="images/aesthetic6.jpg" alt="Gallery item" class="w-full h-full object-cover" />
      </div>
    </div>

    <div class="break-inside-avoid mb-4">
      <div class="relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl" style="height: 22rem;">
        <img src="images/aesthetic7.jpg" alt="Gallery item" class="w-full h-full object-cover" />
      </div>
    </div>

    <div class="break-inside-avoid mb-4">
      <div class="relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl" style="height: 8rem;">
        <img src="images/aesthetic8.jpg" alt="Gallery item" class="w-full h-full object-cover" />
      </div>
    </div>

    <div class="break-inside-avoid mb-4">
      <div class="relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl" style="height: 18rem;">
        <img src="images/aesthetic1.jpg" alt="Gallery item" class="w-full h-full object-cover" />
      </div>
    </div>

    <div class="break-inside-avoid mb-4">
      <div class="relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl" style="height: 26rem;">
        <img src="images/aesthetic2.jpg" alt="Gallery item" class="w-full h-full object-cover" />
      </div>
    </div>
  </div>
</div>

<!-- Mobile responsive -->
<style>
@media (max-width: 1024px) {
  .columns-5 { columns: 3; }
}
@media (max-width: 768px) {
  .columns-5 { columns: 2; }
}
@media (max-width: 480px) {
  .columns-5 { columns: 1; }
}
</style>

▢ Window Gallery gallery

Featured

Center spotlight

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Window Gallery</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: system-ui, -apple-system, sans-serif; background: #111827; padding: 2rem; }

    .window-gallery {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
      padding: 2rem;
      background-color: #0f172a;
      border-radius: 1rem;
      max-width: 80rem;
      margin: 0 auto;
    }

    .gallery-item {
      position: relative;
      overflow: hidden;
      border-radius: 0.75rem;
      transition: transform 0.3s ease;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
    }

    .gallery-item:hover { transform: scale(1.05); }
    .gallery-item > div { width: 100%; height: 12rem; }

    .gallery-showcase {
      grid-column: span 2;
      grid-row: span 2;
    }

    .gallery-showcase > div { height: 100%; }

    .showcase-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(15, 23, 42, 0.8), transparent 50%);
      display: flex;
      align-items: flex-end;
      padding: 1.5rem;
      color: white;
    }

    .showcase-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 0.5rem; }
    .showcase-subtitle { color: #cbd5e1; }

    @media (max-width: 768px) {
      .window-gallery { grid-template-columns: repeat(2, 1fr); }
    }
  </style>
</head>
<body>
  <div class="window-gallery">
    <div class="gallery-item"><div style="background:linear-gradient(135deg,#667eea,#764ba2)"></div></div>
    <div class="gallery-item"><div style="background:linear-gradient(135deg,#f093fb,#f5576c)"></div></div>
    <div class="gallery-item"><div style="background:linear-gradient(135deg,#4facfe,#00f2fe)"></div></div>
    <div class="gallery-item"><div style="background:linear-gradient(135deg,#43e97b,#38f9d7)"></div></div>
    <div class="gallery-item"><div style="background:linear-gradient(135deg,#fa709a,#fee140)"></div></div>
    <div class="gallery-item gallery-showcase">
      <div style="background:linear-gradient(135deg,#30cfd0,#330867)"></div>
      <div class="showcase-overlay">
        <div>
          <div class="showcase-title">Featured</div>
          <div class="showcase-subtitle">Center spotlight</div>
        </div>
      </div>
    </div>
    <div class="gallery-item"><div style="background:linear-gradient(135deg,#a8edea,#fed6e3)"></div></div>
    <div class="gallery-item"><div style="background:linear-gradient(135deg,#ff9a9e,#fecfef)"></div></div>
    <div class="gallery-item"><div style="background:linear-gradient(135deg,#ffecd2,#fcb69f)"></div></div>
  </div>
</body>
</html>

<style>
.window-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 2rem;
  background-color: #0f172a;
  border-radius: 1rem;
  max-width: 80rem;
  margin: 0 auto;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  transition: transform 0.3s ease;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
}

.gallery-item:hover {
  transform: scale(1.05);
}

.gallery-item img {
  width: 100%;
  height: 12rem;
  object-fit: cover;
  display: block;
}

.gallery-showcase {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-showcase img {
  height: 100%;
}

.showcase-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.8), transparent 50%);
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  color: white;
}

.showcase-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.showcase-subtitle {
  color: #cbd5e1;
}

@media (max-width: 768px) {
  .window-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>

<div class="window-gallery">
  <div class="gallery-item">
    <div style="width:100%;height:12rem;background:linear-gradient(135deg,#667eea,#764ba2)"></div>
  </div>
  <div class="gallery-item">
    <div style="width:100%;height:12rem;background:linear-gradient(135deg,#f093fb,#f5576c)"></div>
  </div>
  <div class="gallery-item">
    <div style="width:100%;height:12rem;background:linear-gradient(135deg,#4facfe,#00f2fe)"></div>
  </div>
  <div class="gallery-item">
    <div style="width:100%;height:12rem;background:linear-gradient(135deg,#43e97b,#38f9d7)"></div>
  </div>
  <div class="gallery-item">
    <div style="width:100%;height:12rem;background:linear-gradient(135deg,#fa709a,#fee140)"></div>
  </div>
  <div class="gallery-item gallery-showcase">
    <div style="width:100%;height:100%;background:linear-gradient(135deg,#30cfd0,#330867)"></div>
    <div class="showcase-overlay">
      <div>
        <div class="showcase-title">Featured</div>
        <div class="showcase-subtitle">Center spotlight</div>
      </div>
    </div>
  </div>
  <div class="gallery-item">
    <div style="width:100%;height:12rem;background:linear-gradient(135deg,#a8edea,#fed6e3)"></div>
  </div>
  <div class="gallery-item">
    <div style="width:100%;height:12rem;background:linear-gradient(135deg,#ff9a9e,#fecfef)"></div>
  </div>
  <div class="gallery-item">
    <div style="width:100%;height:12rem;background:linear-gradient(135deg,#ffecd2,#fcb69f)"></div>
  </div>
</div>

<div class="grid grid-cols-2 md:grid-cols-4 gap-4 p-8 rounded-2xl max-w-7xl mx-auto">
  <!-- Top row -->
  <div class="relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
    <img src="images/aesthetic1.jpg" alt="Gallery item" class="w-full h-48 object-cover" />
  </div>
  <div class="relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
    <img src="images/aesthetic2.jpg" alt="Gallery item" class="w-full h-48 object-cover" />
  </div>
  <div class="relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
    <img src="images/aesthetic3.jpg" alt="Gallery item" class="w-full h-48 object-cover" />
  </div>
  <div class="relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
    <img src="images/aesthetic4.jpg" alt="Gallery item" class="w-full h-48 object-cover" />
  </div>

  <!-- Middle row with center showcase -->
  <div class="relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
    <img src="images/aesthetic5.jpg" alt="Gallery item" class="w-full h-48 object-cover" />
  </div>
  <div class="col-span-2 row-span-1 md:row-span-2 relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
    <img src="images/aesthetic6.jpg" alt="Gallery showcase" class="w-full h-full object-cover" />
    <div class="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-transparent flex items-end">
      <div class="p-6 text-white">
        <h3 class="text-2xl font-bold mb-2">Featured</h3>
        <p class="text-slate-300">Center spotlight</p>
      </div>
    </div>
  </div>
  <div class="relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
    <img src="images/aesthetic7.jpg" alt="Gallery item" class="w-full h-48 object-cover" />
  </div>

  <!-- Bottom row -->
  <div class="relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
    <img src="images/aesthetic8.jpg" alt="Gallery item" class="w-full h-48 object-cover" />
  </div>
  <div class="relative overflow-hidden rounded-xl transition-transform hover:scale-105 shadow-2xl">
    <img src="images/aesthetic1.jpg" alt="Gallery item" class="w-full h-48 object-cover" />
  </div>
</div>

▢ Zigzag Gallery gallery


    <div id="bento-div" class="bt-div">
      <div class="bento-item bento-item-1"></div>
      <div class="bento-item bento-item-2"></div>
      <div class="bento-item bento-item-3"></div>
      <div class="bento-item bento-item-4"></div>
      <div class="bento-item bento-item-5"></div>
      <div class="bento-item bento-item-6"></div>
    </div>


      :root {
        --space-sm: 1rem;
        --border-radius: 0.375rem;
        --transition-fast: 0.5s ease-in-out;
      }

      #bento-div {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: 18rem;
        gap: var(--space-sm);
        padding: var(--space-sm);
      }

      .bento-item {
        overflow: hidden;
        border-radius: var(--border-radius);
        transition: transform var(--transition-fast);
      }

      .bento-item:hover {
        transform: scale(1.05);
      }

      .bento-item-1 {
        grid-column: span 8;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      .bento-item-2 {
        grid-column: span 4;
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      .bento-item-3 {
        grid-column: span 4;
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }

      .bento-item-4 {
        grid-column: span 8;
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }

      .bento-item-5 {
        grid-column: span 8;
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
      }

      .bento-item-6 {
        grid-column: span 4;
        background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
      }

      @media (max-width: 768px) {
        #bento-div {
          grid-template-columns: repeat(2, 1fr);
        }

        .bento-item-1,
        .bento-item-2,
        .bento-item-3,
        .bento-item-4,
        .bento-item-5,
        .bento-item-6 {
          grid-column: span 2;
        }
      }


    <div
    id="bento-div"
    class="w-full grid grid-cols-12 auto-rows-[18rem] gap-4 p-4"
    >
      <div class="col-span-12 lg:col-span-8 group overflow-hidden rounded-md">
        <img
          src="images/aesthetic1.jpg"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
      <div class="col-span-12 lg:col-span-4 group overflow-hidden rounded-md">
        <img
          src="images/aesthetic2.jpg"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
      <div class="col-span-12 lg:col-span-4 group overflow-hidden rounded-md">
        <img
          src="images/aesthetic3.jpg"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
      <div class="col-span-12 lg:col-span-8 group overflow-hidden rounded-md">
        <img
          src="images/aesthetic4.jpg"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
      <div class="col-span-12 lg:col-span-8 group overflow-hidden rounded-md">
        <img
          src="images/aesthetic5.jpg"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
      <div class="col-span-12 lg:col-span-4 group overflow-hidden rounded-md">
        <img
          src="images/aesthetic6.jpg"
          class="h-full w-full object-cover
        group-hover:scale-105 transition-transform duration-500 ease-in-out"
        />
      </div>
    </div>

▢ Image Portfolio portfolio

Brand Identity

Complete visual identity for modern startup

Design Branding

E-commerce App

Mobile shopping experience with modern UI

React Native UI/UX

Dashboard Design

Analytics platform with data visualization

Vue.js Charts

Photography Site

Minimalist portfolio for visual artist

Next.js Gallery

Fitness Tracker

Health monitoring app with gamification

SwiftUI HealthKit

Restaurant Menu

Digital menu with ordering system

React Stripe

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Portfolio</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: system-ui, -apple-system, sans-serif; background: #111827; padding: 2rem; }

    .portfolio-grid {
      background-color: #0f172a;
      padding: 2rem;
      border-radius: 1rem;
      max-width: 80rem;
      margin: 0 auto;
    }

    .portfolio-container {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 1rem;
    }

    .portfolio-item {
      grid-column: span 4;
      grid-row: span 2;
      position: relative;
      overflow: hidden;
      border-radius: 0.75rem;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
      transition: transform 0.3s ease;
      cursor: pointer;
    }

    .portfolio-item:hover { transform: scale(1.05); }
    .portfolio-item > div { width: 100%; height: 100%; }

    .portfolio-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, #0f172a 0%, rgba(15, 23, 42, 0.6) 50%, transparent 100%);
      opacity: 1;
      transition: opacity 0.3s ease;
    }

    .portfolio-item:hover .portfolio-overlay { opacity: 0.9; }

    .portfolio-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 1.5rem;
      transform: translateY(0);
      transition: transform 0.3s ease;
    }

    .portfolio-title {
      color: white;
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 0.5rem;
    }

    .portfolio-description {
      color: #cbd5e1;
      font-size: 0.875rem;
      margin-bottom: 0.75rem;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .portfolio-item:hover .portfolio-description { opacity: 1; }

    .portfolio-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .portfolio-tag {
      padding: 0.25rem 0.5rem;
      background-color: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(8px);
      border-radius: 0.25rem;
      color: white;
      font-size: 0.75rem;
    }

    @media (max-width: 768px) {
      .portfolio-container { grid-template-columns: 1fr; }
      .portfolio-item {
        grid-column: span 1;
        min-height: 300px;
      }
    }
  </style>
</head>
<body>
  <div class="portfolio-grid">
    <div class="portfolio-container">
      <div class="portfolio-item">
        <div style="background:linear-gradient(135deg,#667eea,#764ba2)"></div>
        <div class="portfolio-overlay">
          <div class="portfolio-content">
            <h3 class="portfolio-title">Brand Identity</h3>
            <p class="portfolio-description">Complete visual identity for modern startup</p>
            <div class="portfolio-tags">
              <span class="portfolio-tag">Design</span>
              <span class="portfolio-tag">Branding</span>
            </div>
          </div>
        </div>
      </div>

      <div class="portfolio-item">
        <div style="background:linear-gradient(135deg,#f093fb,#f5576c)"></div>
        <div class="portfolio-overlay">
          <div class="portfolio-content">
            <h3 class="portfolio-title">E-commerce App</h3>
            <p class="portfolio-description">Mobile shopping experience with modern UI</p>
            <div class="portfolio-tags">
              <span class="portfolio-tag">React Native</span>
              <span class="portfolio-tag">UI/UX</span>
            </div>
          </div>
        </div>
      </div>

      <div class="portfolio-item">
        <div style="background:linear-gradient(135deg,#4facfe,#00f2fe)"></div>
        <div class="portfolio-overlay">
          <div class="portfolio-content">
            <h3 class="portfolio-title">Dashboard Design</h3>
            <p class="portfolio-description">Analytics platform with data visualization</p>
            <div class="portfolio-tags">
              <span class="portfolio-tag">Vue.js</span>
              <span class="portfolio-tag">Charts</span>
            </div>
          </div>
        </div>
      </div>

      <div class="portfolio-item">
        <div style="background:linear-gradient(135deg,#43e97b,#38f9d7)"></div>
        <div class="portfolio-overlay">
          <div class="portfolio-content">
            <h3 class="portfolio-title">Photography Site</h3>
            <p class="portfolio-description">Minimalist portfolio for visual artist</p>
            <div class="portfolio-tags">
              <span class="portfolio-tag">Next.js</span>
              <span class="portfolio-tag">Gallery</span>
            </div>
          </div>
        </div>
      </div>

      <div class="portfolio-item">
        <div style="background:linear-gradient(135deg,#fa709a,#fee140)"></div>
        <div class="portfolio-overlay">
          <div class="portfolio-content">
            <h3 class="portfolio-title">Fitness Tracker</h3>
            <p class="portfolio-description">Health monitoring app with gamification</p>
            <div class="portfolio-tags">
              <span class="portfolio-tag">SwiftUI</span>
              <span class="portfolio-tag">HealthKit</span>
            </div>
          </div>
        </div>
      </div>

      <div class="portfolio-item">
        <div style="background:linear-gradient(135deg,#30cfd0,#330867)"></div>
        <div class="portfolio-overlay">
          <div class="portfolio-content">
            <h3 class="portfolio-title">Restaurant Menu</h3>
            <p class="portfolio-description">Digital menu with ordering system</p>
            <div class="portfolio-tags">
              <span class="portfolio-tag">React</span>
              <span class="portfolio-tag">Stripe</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

<style>
.portfolio-grid {
  background-color: #0f172a;
  padding: 2rem;
  border-radius: 1rem;
  max-width: 80rem;
  margin: 0 auto;
}

.portfolio-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.portfolio-item {
  grid-column: span 4;
  grid-row: span 2;
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease;
  cursor: pointer;
}

.portfolio-item:hover {
  transform: scale(1.05);
}

.portfolio-item > div {
  width: 100%;
  height: 100%;
}

.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #0f172a 0%, rgba(15, 23, 42, 0.6) 50%, transparent 100%);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.portfolio-item:hover .portfolio-overlay {
  opacity: 0.9;
}

.portfolio-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  transform: translateY(0);
  transition: transform 0.3s ease;
}

.portfolio-title {
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.portfolio-description {
  color: #cbd5e1;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.portfolio-item:hover .portfolio-description {
  opacity: 1;
}

.portfolio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.portfolio-tag {
  padding: 0.25rem 0.5rem;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  border-radius: 0.25rem;
  color: white;
  font-size: 0.75rem;
}

@media (max-width: 768px) {
  .portfolio-container {
    grid-template-columns: 1fr;
  }
  .portfolio-item {
    grid-column: span 1;
    min-height: 300px;
  }
}
</style>

<div class="portfolio-grid">
  <div class="portfolio-container">
    <div class="portfolio-item">
      <div style="background:linear-gradient(135deg,#667eea,#764ba2)"></div>
      <div class="portfolio-overlay">
        <div class="portfolio-content">
          <h3 class="portfolio-title">Brand Identity</h3>
          <p class="portfolio-description">Complete visual identity for modern startup</p>
          <div class="portfolio-tags">
            <span class="portfolio-tag">Design</span>
            <span class="portfolio-tag">Branding</span>
          </div>
        </div>
      </div>
    </div>

    <div class="portfolio-item">
      <div style="background:linear-gradient(135deg,#f093fb,#f5576c)"></div>
      <div class="portfolio-overlay">
        <div class="portfolio-content">
          <h3 class="portfolio-title">E-commerce App</h3>
          <p class="portfolio-description">Mobile shopping experience with modern UI</p>
          <div class="portfolio-tags">
            <span class="portfolio-tag">React Native</span>
            <span class="portfolio-tag">UI/UX</span>
          </div>
        </div>
      </div>
    </div>

    <div class="portfolio-item">
      <div style="background:linear-gradient(135deg,#4facfe,#00f2fe)"></div>
      <div class="portfolio-overlay">
        <div class="portfolio-content">
          <h3 class="portfolio-title">Dashboard Design</h3>
          <p class="portfolio-description">Analytics platform with data visualization</p>
          <div class="portfolio-tags">
            <span class="portfolio-tag">Vue.js</span>
            <span class="portfolio-tag">Charts</span>
          </div>
        </div>
      </div>
    </div>

    <div class="portfolio-item">
      <div style="background:linear-gradient(135deg,#43e97b,#38f9d7)"></div>
      <div class="portfolio-overlay">
        <div class="portfolio-content">
          <h3 class="portfolio-title">Photography Site</h3>
          <p class="portfolio-description">Minimalist portfolio for visual artist</p>
          <div class="portfolio-tags">
            <span class="portfolio-tag">Next.js</span>
            <span class="portfolio-tag">Gallery</span>
          </div>
        </div>
      </div>
    </div>

    <div class="portfolio-item">
      <div style="background:linear-gradient(135deg,#fa709a,#fee140)"></div>
      <div class="portfolio-overlay">
        <div class="portfolio-content">
          <h3 class="portfolio-title">Fitness Tracker</h3>
          <p class="portfolio-description">Health monitoring app with gamification</p>
          <div class="portfolio-tags">
            <span class="portfolio-tag">SwiftUI</span>
            <span class="portfolio-tag">HealthKit</span>
          </div>
        </div>
      </div>
    </div>

    <div class="portfolio-item">
      <div style="background:linear-gradient(135deg,#30cfd0,#330867)"></div>
      <div class="portfolio-overlay">
        <div class="portfolio-content">
          <h3 class="portfolio-title">Restaurant Menu</h3>
          <p class="portfolio-description">Digital menu with ordering system</p>
          <div class="portfolio-tags">
            <span class="portfolio-tag">React</span>
            <span class="portfolio-tag">Stripe</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class=" p-8 rounded-2xl max-w-7xl mx-auto">
  <div class="grid grid-cols-1 md:grid-cols-12 gap-4">
    <!-- Project 1 -->
    <div class="col-span-1 md:col-span-4 row-span-1 md:row-span-2 h-[300px] md:h-auto group relative overflow-hidden rounded-xl shadow-2xl transition-transform hover:scale-105 cursor-pointer">
      <img src="images/aesthetic1.jpg" alt="Project" class="w-full h-full object-cover" />
      <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/60 to-transparent opacity-100 group-hover:opacity-90 transition-opacity">
        <div class="absolute bottom-0 left-0 right-0 p-6 transform translate-y-0 group-hover:translate-y-0 transition-transform">
          <h3 class="text-white text-2xl font-bold mb-2">Brand Identity</h3>
          <p class="text-slate-300 text-sm mb-3 opacity-0 group-hover:opacity-100 transition-opacity">Complete visual identity for modern startup</p>
          <div class="flex flex-wrap gap-2">
            <span class="px-2 py-1 bg-white/20 backdrop-blur-sm rounded text-white text-xs">Design</span>
            <span class="px-2 py-1 bg-white/20 backdrop-blur-sm rounded text-white text-xs">Branding</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Project 2 -->
    <div class="col-span-1 md:col-span-4 row-span-1 md:row-span-2 h-[300px] md:h-auto group relative overflow-hidden rounded-xl shadow-2xl transition-transform hover:scale-105 cursor-pointer">
      <img src="images/aesthetic2.jpg" alt="Project" class="w-full h-full object-cover" />
      <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/60 to-transparent opacity-100 group-hover:opacity-90 transition-opacity">
        <div class="absolute bottom-0 left-0 right-0 p-6 transform translate-y-0 group-hover:translate-y-0 transition-transform">
          <h3 class="text-white text-2xl font-bold mb-2">E-commerce App</h3>
          <p class="text-slate-300 text-sm mb-3 opacity-0 group-hover:opacity-100 transition-opacity">Mobile shopping experience with modern UI</p>
          <div class="flex flex-wrap gap-2">
            <span class="px-2 py-1 bg-white/20 backdrop-blur-sm rounded text-white text-xs">React Native</span>
            <span class="px-2 py-1 bg-white/20 backdrop-blur-sm rounded text-white text-xs">UI/UX</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Project 3 -->
    <div class="col-span-1 md:col-span-4 row-span-1 md:row-span-2 h-[300px] md:h-auto group relative overflow-hidden rounded-xl shadow-2xl transition-transform hover:scale-105 cursor-pointer">
      <img src="images/aesthetic3.jpg" alt="Project" class="w-full h-full object-cover" />
      <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/60 to-transparent opacity-100 group-hover:opacity-90 transition-opacity">
        <div class="absolute bottom-0 left-0 right-0 p-6 transform translate-y-0 group-hover:translate-y-0 transition-transform">
          <h3 class="text-white text-2xl font-bold mb-2">Dashboard Design</h3>
          <p class="text-slate-300 text-sm mb-3 opacity-0 group-hover:opacity-100 transition-opacity">Analytics platform with data visualization</p>
          <div class="flex flex-wrap gap-2">
            <span class="px-2 py-1 bg-white/20 backdrop-blur-sm rounded text-white text-xs">Vue.js</span>
            <span class="px-2 py-1 bg-white/20 backdrop-blur-sm rounded text-white text-xs">Charts</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Project 4 -->
    <div class="col-span-1 md:col-span-4 row-span-1 md:row-span-2 h-[300px] md:h-auto group relative overflow-hidden rounded-xl shadow-2xl transition-transform hover:scale-105 cursor-pointer">
      <img src="images/aesthetic4.jpg" alt="Project" class="w-full h-full object-cover" />
      <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/60 to-transparent opacity-100 group-hover:opacity-90 transition-opacity">
        <div class="absolute bottom-0 left-0 right-0 p-6 transform translate-y-0 group-hover:translate-y-0 transition-transform">
          <h3 class="text-white text-2xl font-bold mb-2">Photography Site</h3>
          <p class="text-slate-300 text-sm mb-3 opacity-0 group-hover:opacity-100 transition-opacity">Minimalist portfolio for visual artist</p>
          <div class="flex flex-wrap gap-2">
            <span class="px-2 py-1 bg-white/20 backdrop-blur-sm rounded text-white text-xs">Next.js</span>
            <span class="px-2 py-1 bg-white/20 backdrop-blur-sm rounded text-white text-xs">Gallery</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Project 5 -->
    <div class="col-span-1 md:col-span-4 row-span-1 md:row-span-2 h-[300px] md:h-auto group relative overflow-hidden rounded-xl shadow-2xl transition-transform hover:scale-105 cursor-pointer">
      <img src="images/aesthetic5.jpg" alt="Project" class="w-full h-full object-cover" />
      <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/60 to-transparent opacity-100 group-hover:opacity-90 transition-opacity">
        <div class="absolute bottom-0 left-0 right-0 p-6 transform translate-y-0 group-hover:translate-y-0 transition-transform">
          <h3 class="text-white text-2xl font-bold mb-2">Fitness Tracker</h3>
          <p class="text-slate-300 text-sm mb-3 opacity-0 group-hover:opacity-100 transition-opacity">Health monitoring app with gamification</p>
          <div class="flex flex-wrap gap-2">
            <span class="px-2 py-1 bg-white/20 backdrop-blur-sm rounded text-white text-xs">SwiftUI</span>
            <span class="px-2 py-1 bg-white/20 backdrop-blur-sm rounded text-white text-xs">HealthKit</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Project 6 -->
    <div class="col-span-1 md:col-span-4 row-span-1 md:row-span-2 h-[300px] md:h-auto group relative overflow-hidden rounded-xl shadow-2xl transition-transform hover:scale-105 cursor-pointer">
      <img src="images/aesthetic6.jpg" alt="Project" class="w-full h-full object-cover" />
      <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/60 to-transparent opacity-100 group-hover:opacity-90 transition-opacity">
        <div class="absolute bottom-0 left-0 right-0 p-6 transform translate-y-0 group-hover:translate-y-0 transition-transform">
          <h3 class="text-white text-2xl font-bold mb-2">Restaurant Menu</h3>
          <p class="text-slate-300 text-sm mb-3 opacity-0 group-hover:opacity-100 transition-opacity">Digital menu with ordering system</p>
          <div class="flex flex-wrap gap-2">
            <span class="px-2 py-1 bg-white/20 backdrop-blur-sm rounded text-white text-xs">React</span>
            <span class="px-2 py-1 bg-white/20 backdrop-blur-sm rounded text-white text-xs">Stripe</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Mobile responsive -->
<style>
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .col-span-4 {
    grid-column: span 1;
    min-height: 300px;
  }
}
</style>

▢ Magazine Blog Layout blog

Featured

The Future of Web Design

Explore the latest trends and technologies shaping the future of web design and development.

Jan 15, 2024 5 min read

Design

Color Theory in Modern UI

Jan 14, 2024

Development

Building Responsive Grids

Jan 13, 2024

Tutorial

Getting Started with Bento

A complete guide to building beautiful layouts

Jan 12, 2024

Tips

10 CSS Tricks You Need

Essential techniques for modern web development

Jan 11, 2024


    <div id="bento-div" class="bt-div">
      <div class="bento-item bento-item-1">
        <span class="bento-category">Featured</span>
        <h2 class="bento-post-title">The Future of Web Design</h2>
        <p class="bento-post-excerpt">Explore the latest trends and technologies shaping the future of web design and development.</p>
        <div class="bento-post-meta">
          <span class="bento-date">Jan 15, 2024</span>
          <span class="bento-read-time">5 min read</span>
        </div>
      </div>
      <div class="bento-item bento-item-2">
        <span class="bento-category">Design</span>
        <h3 class="bento-post-title-small">Color Theory in Modern UI</h3>
        <span class="bento-date">Jan 14, 2024</span>
      </div>
      <div class="bento-item bento-item-3">
        <span class="bento-category">Development</span>
        <h3 class="bento-post-title-small">Building Responsive Grids</h3>
        <span class="bento-date">Jan 13, 2024</span>
      </div>
      <div class="bento-item bento-item-4">
        <span class="bento-category">Tutorial</span>
        <h3 class="bento-post-title-small">Getting Started with Bento</h3>
        <p class="bento-post-excerpt-small">A complete guide to building beautiful layouts</p>
        <span class="bento-date">Jan 12, 2024</span>
      </div>
      <div class="bento-item bento-item-5">
        <span class="bento-category">Tips</span>
        <h3 class="bento-post-title-small">10 CSS Tricks You Need</h3>
        <p class="bento-post-excerpt-small">Essential techniques for modern web development</p>
        <span class="bento-date">Jan 11, 2024</span>
      </div>
    </div>


      :root {
        --space-xs: 0.25rem;
        --space-sm: 1rem;
        --space-md: 1.25rem;
        --space-lg: 4rem;

        --border-radius: 0.375rem;
        --transition-fast: 0.5s ease-in-out;
      }

      .bt-section {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        margin-top: 4rem /* 64px */;
      }

      #bento-div {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: 12rem; /* 192px */
        gap: var(--space-sm);
        padding: var(--space-sm);
      }

      .bento-item {
        overflow: hidden;
        border-radius: var(--border-radius);
        padding: 2rem;
        display: flex;
        flex-direction: column;
        background: #f7fafc;
        border: 2px solid #e2e8f0;
        transition: transform var(--transition-fast), box-shadow var(--transition-fast);
      }

      .bento-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      }

      .bento-item-1 {
        grid-column: span 8;
        grid-row: span 2;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        justify-content: space-between;
      }

      .bento-item-2,
      .bento-item-3 {
        grid-column: span 4;
        justify-content: space-between;
      }

      .bento-item-4,
      .bento-item-5 {
        grid-column: span 6;
        justify-content: space-between;
      }

      .bento-category {
        display: inline-block;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0.25rem 0.75rem;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 9999px;
        width: fit-content;
        margin-bottom: 1rem;
      }

      .bento-item-2 .bento-category,
      .bento-item-3 .bento-category,
      .bento-item-4 .bento-category,
      .bento-item-5 .bento-category {
        background: #667eea;
        color: white;
      }

      .bento-post-title {
        font-size: 2rem;
        font-weight: bold;
        line-height: 1.2;
        margin-bottom: 1rem;
      }

      .bento-post-title-small {
        font-size: 1.25rem;
        font-weight: 600;
        line-height: 1.3;
        margin-bottom: 1rem;
        color: #2d3748;
      }

      .bento-post-excerpt {
        font-size: 1.125rem;
        line-height: 1.6;
        opacity: 0.9;
        margin-bottom: 1rem;
      }

      .bento-post-excerpt-small {
        font-size: 0.875rem;
        line-height: 1.5;
        color: #718096;
        margin-bottom: 1rem;
      }

      .bento-post-meta {
        display: flex;
        gap: 1rem;
        font-size: 0.875rem;
        opacity: 0.8;
      }

      .bento-date {
        font-size: 0.875rem;
        color: #718096;
      }

      .bento-item-1 .bento-date {
        color: white;
        opacity: 0.8;
      }

      .bento-read-time {
        font-size: 0.875rem;
      }

      @media (max-width: 768px) {
        .bt-div,
        #bento-div {
          grid-template-columns: repeat(12, 1fr);
        }

        .bento-item-1,
        .bento-item-2,
        .bento-item-3,
        .bento-item-4,
        .bento-item-5 {
          grid-column: span 12;
        }
      }


    <div
    id="bento-div"
    class="w-full grid grid-cols-12 auto-rows-[12rem] gap-4 p-1"
    >
      <div class="col-span-12 md:col-span-8 row-span-2 bg-gray-800 rounded-md overflow-hidden hover:-translate-y-1 hover:shadow-xl transition-all duration-500">
        <div class="h-32 overflow-hidden"><img src="images/aesthetic1.jpg" class="h-full w-full object-cover" /></div>
        <div class="p-8 flex flex-col justify-between text-white">
          <div>
            <span class="inline-block text-xs font-semibold uppercase tracking-wide px-3 py-1 bg-white/20 rounded-full mb-4">Featured</span>
            <h2 class="text-3xl font-bold leading-tight mb-4">The Future of Web Design</h2>
            <p class="text-lg opacity-90 mb-4">Explore the latest trends and technologies shaping the future of web design and development.</p>
          </div>
          <div class="flex gap-4 text-sm opacity-80">
            <span>Jan 15, 2024</span>
            <span>5 min read</span>
          </div>
        </div>
      </div>
      <div class="col-span-12 md:col-span-4 bg-gray-50 border-2 border-gray-200 rounded-md overflow-hidden hover:-translate-y-1 hover:shadow-xl transition-all duration-500">
        <div class="h-32 overflow-hidden"><img src="images/aesthetic2.jpg" class="h-full w-full object-cover" /></div>
        <div class="p-6 flex flex-col justify-between">
          <div>
            <span class="inline-block text-xs font-semibold uppercase tracking-wide px-3 py-1 bg-gray-800 text-white rounded-full mb-4">Design</span>
            <h3 class="text-xl font-semibold text-gray-800 mb-4">Color Theory in Modern UI</h3>
          </div>
          <span class="text-sm text-gray-600">Jan 14, 2024</span>
        </div>
      </div>
      <div class="col-span-12 md:col-span-4 bg-gray-50 border-2 border-gray-200 rounded-md overflow-hidden hover:-translate-y-1 hover:shadow-xl transition-all duration-500">
        <div class="h-32 overflow-hidden"><img src="images/aesthetic3.jpg" class="h-full w-full object-cover" /></div>
        <div class="p-6 flex flex-col justify-between">
          <div>
            <span class="inline-block text-xs font-semibold uppercase tracking-wide px-3 py-1 bg-gray-800 text-white rounded-full mb-4">Development</span>
            <h3 class="text-xl font-semibold text-gray-800 mb-4">Building Responsive Grids</h3>
          </div>
          <span class="text-sm text-gray-600">Jan 13, 2024</span>
        </div>
      </div>
      <div class="col-span-12 md:col-span-6 bg-gray-50 border-2 border-gray-200 rounded-md overflow-hidden hover:-translate-y-1 hover:shadow-xl transition-all duration-500">
        <div class="h-32 overflow-hidden"><img src="images/aesthetic4.jpg" class="h-full w-full object-cover" /></div>
        <div class="p-6 flex flex-col justify-between">
          <div>
            <span class="inline-block text-xs font-semibold uppercase tracking-wide px-3 py-1 bg-gray-800 text-white rounded-full mb-4">Tutorial</span>
            <h3 class="text-xl font-semibold text-gray-800 mb-2">Getting Started with Bento</h3>
            <p class="text-sm text-gray-600 mb-4">A complete guide to building beautiful layouts</p>
          </div>
          <span class="text-sm text-gray-600">Jan 12, 2024</span>
        </div>
      </div>
      <div class="col-span-12 md:col-span-6 bg-gray-50 border-2 border-gray-200 rounded-md overflow-hidden hover:-translate-y-1 hover:shadow-xl transition-all duration-500">
        <div class="h-32 overflow-hidden"><img src="images/aesthetic5.jpg" class="h-full w-full object-cover" /></div>
        <div class="p-6 flex flex-col justify-between">
          <div>
            <span class="inline-block text-xs font-semibold uppercase tracking-wide px-3 py-1 bg-gray-800 text-white rounded-full mb-4">Tips</span>
            <h3 class="text-xl font-semibold text-gray-800 mb-2">10 CSS Tricks You Need</h3>
            <p class="text-sm text-gray-600 mb-4">Essential techniques for modern web development</p>
          </div>
          <span class="text-sm text-gray-600">Jan 11, 2024</span>
        </div>
      </div>
    </div>

▢ Photo Journal blog

Travel Photography

Journey Through Mountains

January 15, 2024 • 8 min read

Design

Minimalist Architecture

Exploring the beauty of simplicity in modern design. How less can truly be more when crafted with intention.

January 12, 2024 • 5 min read

Nature

Coastal Wanderings

A journey along forgotten shores where the ocean meets ancient stone. Discovering hidden coves and timeless views.

January 10, 2024 • 6 min read

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Photo Journal</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: system-ui, -apple-system, sans-serif; background: #111827; padding: 2rem; }

    .photo-journal {
      background-color: #0f172a;
      padding: 2rem;
      border-radius: 1rem;
      max-width: 80rem;
      margin: 0 auto;
    }

    .journal-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 1.5rem;
    }

    .journal-hero {
      grid-column: span 12;
      grid-row: span 2;
      position: relative;
      overflow: hidden;
      border-radius: 0.75rem;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
      transition: transform 0.3s ease;
      height: 500px;
    }

    .journal-hero:hover { transform: scale(1.02); }
    .journal-hero > div { width: 100%; height: 100%; }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, #0f172a 0%, rgba(15, 23, 42, 0.6) 40%, transparent 100%);
      display: flex;
      align-items: flex-end;
      padding: 2rem;
      color: white;
    }

    .hero-content { width: 100%; }

    .hero-tags {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 0.75rem;
    }

    .hero-tag {
      padding: 0.25rem 0.75rem;
      background-color: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(8px);
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 500;
    }

    .hero-title {
      font-size: 2.5rem;
      font-weight: bold;
      margin-bottom: 0.75rem;
      line-height: 1.2;
    }

    .hero-meta {
      display: flex;
      align-items: center;
      gap: 1rem;
      font-size: 0.875rem;
      color: #cbd5e1;
    }

    .journal-card {
      grid-column: span 6;
      position: relative;
      overflow: hidden;
      border-radius: 0.75rem;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
      transition: transform 0.3s ease;
      background-color: #1e293b;
    }

    .journal-card:hover { transform: scale(1.02); }

    .card-image {
      height: 16rem;
      overflow: hidden;
    }

    .card-image > div { width: 100%; height: 100%; }

    .card-content { padding: 1.5rem; }

    .card-tags {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 0.75rem;
    }

    .card-tag {
      padding: 0.25rem 0.5rem;
      background-color: #334155;
      color: #cbd5e1;
      border-radius: 0.25rem;
      font-size: 0.75rem;
    }

    .card-title {
      font-size: 1.5rem;
      font-weight: bold;
      color: white;
      margin-bottom: 0.5rem;
    }

    .card-excerpt {
      color: #94a3b8;
      font-size: 0.875rem;
      margin-bottom: 1rem;
      line-height: 1.6;
    }

    .card-meta {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      font-size: 0.75rem;
      color: #64748b;
    }

    @media (max-width: 768px) {
      .journal-card { grid-column: span 12; }
      .hero-title { font-size: 2rem; }
    }
  </style>
</head>
<body>
  <div class="photo-journal">
    <div class="journal-grid">
      <div class="journal-hero">
        <div style="background:linear-gradient(135deg,#667eea,#764ba2)"></div>
        <div class="hero-overlay">
          <div class="hero-content">
            <div class="hero-tags">
              <span class="hero-tag">Travel</span>
              <span class="hero-tag">Photography</span>
            </div>
            <h1 class="hero-title">Journey Through Mountains</h1>
            <div class="hero-meta">
              <span>January 15, 2024</span>
              <span>•</span>
              <span>8 min read</span>
            </div>
          </div>
        </div>
      </div>

      <div class="journal-card">
        <div class="card-image">
          <div style="background:linear-gradient(135deg,#f093fb,#f5576c)"></div>
        </div>
        <div class="card-content">
          <div class="card-tags">
            <span class="card-tag">Design</span>
          </div>
          <h2 class="card-title">Minimalist Architecture</h2>
          <p class="card-excerpt">Exploring the beauty of simplicity in modern design. How less can truly be more when crafted with intention.</p>
          <div class="card-meta">
            <span>January 12, 2024</span>
            <span>•</span>
            <span>5 min read</span>
          </div>
        </div>
      </div>

      <div class="journal-card">
        <div class="card-image">
          <div style="background:linear-gradient(135deg,#4facfe,#00f2fe)"></div>
        </div>
        <div class="card-content">
          <div class="card-tags">
            <span class="card-tag">Nature</span>
          </div>
          <h2 class="card-title">Coastal Wanderings</h2>
          <p class="card-excerpt">A journey along forgotten shores where the ocean meets ancient stone. Discovering hidden coves and timeless views.</p>
          <div class="card-meta">
            <span>January 10, 2024</span>
            <span>•</span>
            <span>6 min read</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

<style>
.photo-journal {
  background-color: #0f172a;
  padding: 2rem;
  border-radius: 1rem;
  max-width: 80rem;
  margin: 0 auto;
}

.journal-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

.journal-hero {
  grid-column: span 12;
  grid-row: span 2;
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease;
  height: 500px;
}

.journal-hero:hover {
  transform: scale(1.02);
}

.journal-hero > div {
  width: 100%;
  height: 100%;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #0f172a 0%, rgba(15, 23, 42, 0.6) 40%, transparent 100%);
  display: flex;
  align-items: flex-end;
  padding: 2rem;
  color: white;
}

.hero-content {
  width: 100%;
}

.hero-tags {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.hero-tag {
  padding: 0.25rem 0.75rem;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.hero-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
  color: #cbd5e1;
}

.journal-card {
  grid-column: span 6;
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease;
  background-color: #1e293b;
}

.journal-card:hover {
  transform: scale(1.02);
}

.card-image {
  height: 16rem;
  overflow: hidden;
}

.card-image > div {
  width: 100%;
  height: 100%;
}

.card-content {
  padding: 1.5rem;
}

.card-tags {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.card-tag {
  padding: 0.25rem 0.5rem;
  background-color: #334155;
  color: #cbd5e1;
  border-radius: 0.25rem;
  font-size: 0.75rem;
}

.card-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  margin-bottom: 0.5rem;
}

.card-excerpt {
  color: #94a3b8;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: #64748b;
}

@media (max-width: 768px) {
  .journal-card {
    grid-column: span 12;
  }
  .hero-title {
    font-size: 2rem;
  }
}
</style>

<div class="photo-journal">
  <div class="journal-grid">
    <div class="journal-hero">
      <div style="background:linear-gradient(135deg,#667eea,#764ba2)"></div>
      <div class="hero-overlay">
        <div class="hero-content">
          <div class="hero-tags">
            <span class="hero-tag">Travel</span>
            <span class="hero-tag">Photography</span>
          </div>
          <h1 class="hero-title">Journey Through Mountains</h1>
          <div class="hero-meta">
            <span>January 15, 2024</span>
            <span>•</span>
            <span>8 min read</span>
          </div>
        </div>
      </div>
    </div>

    <div class="journal-card">
      <div class="card-image">
        <div style="background:linear-gradient(135deg,#f093fb,#f5576c)"></div>
      </div>
      <div class="card-content">
        <div class="card-tags">
          <span class="card-tag">Design</span>
        </div>
        <h2 class="card-title">Minimalist Architecture</h2>
        <p class="card-excerpt">Exploring the beauty of simplicity in modern design. How less can truly be more when crafted with intention.</p>
        <div class="card-meta">
          <span>January 12, 2024</span>
          <span>•</span>
          <span>5 min read</span>
        </div>
      </div>
    </div>

    <div class="journal-card">
      <div class="card-image">
        <div style="background:linear-gradient(135deg,#4facfe,#00f2fe)"></div>
      </div>
      <div class="card-content">
        <div class="card-tags">
          <span class="card-tag">Nature</span>
        </div>
        <h2 class="card-title">Coastal Wanderings</h2>
        <p class="card-excerpt">A journey along forgotten shores where the ocean meets ancient stone. Discovering hidden coves and timeless views.</p>
        <div class="card-meta">
          <span>January 10, 2024</span>
          <span>•</span>
          <span>6 min read</span>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="p-8 rounded-2xl max-w-7xl mx-auto">
  <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
    <!-- Hero image with title overlay -->
    <div class="col-span-1 md:col-span-12 row-span-1 md:row-span-2 relative overflow-hidden rounded-xl shadow-2xl transition-transform hover:scale-[1.02] h-[300px] md:h-[500px]">
      <img src="images/aesthetic1.jpg" alt="Hero post" class="w-full h-full object-cover" />
      <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/60 to-transparent flex items-end">
        <div class="p-8 text-white w-full">
          <div class="flex gap-2 mb-3">
            <span class="px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full text-xs font-medium">Travel</span>
            <span class="px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full text-xs font-medium">Photography</span>
          </div>
          <h1 class="text-4xl md:text-5xl font-bold mb-3">Journey Through Mountains</h1>
          <div class="flex items-center gap-4 text-sm text-slate-300">
            <span>January 15, 2024</span>
            <span>•</span>
            <span>8 min read</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Card 1: Image + Content -->
    <div class="col-span-1 md:col-span-6 relative overflow-hidden rounded-xl shadow-2xl transition-transform hover:scale-[1.02] bg-slate-900">
      <div class="h-64 overflow-hidden">
        <img src="images/aesthetic2.jpg" alt="Post image" class="w-full h-full object-cover" />
      </div>
      <div class="p-6">
        <div class="flex gap-2 mb-3">
          <span class="px-2 py-1 bg-slate-800 text-slate-300 rounded text-xs">Design</span>
        </div>
        <h2 class="text-2xl font-bold text-white mb-2">Minimalist Architecture</h2>
        <p class="text-slate-400 text-sm mb-4">Exploring the beauty of simplicity in modern design. How less can truly be more when crafted with intention.</p>
        <div class="flex items-center gap-3 text-xs text-slate-500">
          <span>January 12, 2024</span>
          <span>•</span>
          <span>5 min read</span>
        </div>
      </div>
    </div>

    <!-- Card 2: Image + Content -->
    <div class="col-span-1 md:col-span-6 relative overflow-hidden rounded-xl shadow-2xl transition-transform hover:scale-[1.02] bg-slate-900">
      <div class="h-64 overflow-hidden">
        <img src="images/aesthetic3.jpg" alt="Post image" class="w-full h-full object-cover" />
      </div>
      <div class="p-6">
        <div class="flex gap-2 mb-3">
          <span class="px-2 py-1 bg-slate-800 text-slate-300 rounded text-xs">Nature</span>
        </div>
        <h2 class="text-2xl font-bold text-white mb-2">Coastal Wanderings</h2>
        <p class="text-slate-400 text-sm mb-4">A journey along forgotten shores where the ocean meets ancient stone. Discovering hidden coves and timeless views.</p>
        <div class="flex items-center gap-3 text-xs text-slate-500">
          <span>January 10, 2024</span>
          <span>•</span>
          <span>6 min read</span>
        </div>
      </div>
    </div>
  </div>
</div>

▢ Portfolio Grid portfolio

Featured

Web Dashboard

Web Design

React UI/UX

New

Brand Identity

Branding

Logo Design

Mobile Banking

App Design

iOS Android

E-Learning Platform

Web Development

Vue.js Node

Social Network

Full Stack

GraphQL AWS

Fitness Tracker

Mobile App

Swift HealthKit


    <div id="bento-div" class="bt-div">
      <div class="bento-item bento-item-1">
        <div class="project-overlay">
          <span class="project-badge">Featured</span>
          <div class="overlay-content">
            <h3 class="overlay-title">Web Dashboard</h3>
            <p class="overlay-category">Web Design</p>
            <div class="overlay-tags">
              <span class="tag">React</span>
              <span class="tag">UI/UX</span>
            </div>
          </div>
        </div>
      </div>
      <div class="bento-item bento-item-2">
        <div class="project-overlay">
          <span class="project-badge">New</span>
          <div class="overlay-content">
            <h3 class="overlay-title">Brand Identity</h3>
            <p class="overlay-category">Branding</p>
            <div class="overlay-tags">
              <span class="tag">Logo</span>
              <span class="tag">Design</span>
            </div>
          </div>
        </div>
      </div>
      <div class="bento-item bento-item-3">
        <div class="project-overlay">
          <div class="overlay-content">
            <h3 class="overlay-title">Mobile Banking</h3>
            <p class="overlay-category">App Design</p>
            <div class="overlay-tags">
              <span class="tag">iOS</span>
              <span class="tag">Android</span>
            </div>
          </div>
        </div>
      </div>
      <div class="bento-item bento-item-4">
        <div class="project-overlay">
          <div class="overlay-content">
            <h3 class="overlay-title">E-Learning Platform</h3>
            <p class="overlay-category">Web Development</p>
            <div class="overlay-tags">
              <span class="tag">Vue.js</span>
              <span class="tag">Node</span>
            </div>
          </div>
        </div>
      </div>
      <div class="bento-item bento-item-5">
        <div class="project-overlay">
          <div class="overlay-content">
            <h3 class="overlay-title">Social Network</h3>
            <p class="overlay-category">Full Stack</p>
            <div class="overlay-tags">
              <span class="tag">GraphQL</span>
              <span class="tag">AWS</span>
            </div>
          </div>
        </div>
      </div>
      <div class="bento-item bento-item-6">
        <div class="project-overlay">
          <div class="overlay-content">
            <h3 class="overlay-title">Fitness Tracker</h3>
            <p class="overlay-category">Mobile App</p>
            <div class="overlay-tags">
              <span class="tag">Swift</span>
              <span class="tag">HealthKit</span>
            </div>
          </div>
        </div>
      </div>
    </div>


      :root {
        --space-sm: 1rem;
        --space-md: 1.25rem;
        --border-radius: 0.75rem;
        --transition-fast: 0.3s ease-in-out;
      }

      #bento-div {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: 20rem;
        gap: var(--space-md);
        padding: var(--space-sm);
      }

      .bento-item {
        grid-column: span 4;
        overflow: hidden;
        border-radius: var(--border-radius);
        position: relative;
        cursor: pointer;
        transition: transform var(--transition-fast), box-shadow var(--transition-fast);
        background: #111827;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
      }

      .bento-item:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
      }

      .bento-item-1 {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      .bento-item-2 {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      .bento-item-3 {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }

      .bento-item-4 {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }

      .bento-item-5 {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
      }

      .bento-item-6 {
        background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
      }

      .project-overlay {
        position: absolute;
        inset: 0;
        padding: 1.5rem;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        transition: background var(--transition-fast);
      }

      .bento-item:hover .project-overlay {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.2) 100%);
      }

      .project-badge {
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        padding: 0.375rem 0.75rem;
        background: rgba(255, 255, 255, 0.95);
        color: #2d3748;
        border-radius: 0.25rem;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      .overlay-content {
        transform: translateY(0);
        transition: transform var(--transition-fast);
      }

      .bento-item:hover .overlay-content {
        transform: translateY(-0.5rem);
      }

      .overlay-title {
        font-size: 1.5rem;
        font-weight: 700;
        margin: 0 0 0.5rem 0;
        color: white;
      }

      .overlay-category {
        font-size: 0.875rem;
        opacity: 0.9;
        margin: 0 0 1rem 0;
        color: rgba(255, 255, 255, 0.9);
      }

      .overlay-tags {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
      }

      .tag {
        padding: 0.25rem 0.625rem;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 0.25rem;
        font-size: 0.75rem;
        font-weight: 500;
        backdrop-filter: blur(10px);
        color: white;
      }

      @media (max-width: 768px) {
        #bento-div {
          grid-template-columns: repeat(1, 1fr);
          grid-auto-rows: 16rem;
        }

        .bento-item {
          grid-column: span 1;
        }
      }


    <div
      id="bento-div"
      class="w-full grid grid-cols-12 auto-rows-[20rem] gap-5 p-4"
    >
      <div class="col-span-12 md:col-span-4 overflow-hidden rounded-xl bg-gradient-to-br from-indigo-600 to-purple-700 relative cursor-pointer group hover:-translate-y-2 hover:shadow-2xl transition-all duration-300 shadow-lg">
        <div class="absolute inset-0">
          <img src="images/aesthetic1.jpg" class="w-full h-full object-cover" alt="Project" />
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/40 to-transparent group-hover:from-black/90 group-hover:via-black/50 transition-all duration-300"></div>
        <span class="absolute top-6 right-6 px-3 py-1.5 bg-white/95 text-gray-800 rounded text-xs font-semibold uppercase tracking-wide">Featured</span>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform group-hover:-translate-y-2 transition-transform duration-300">
          <h3 class="text-2xl font-bold mb-2">Web Dashboard</h3>
          <p class="text-sm opacity-90 mb-4">Web Design</p>
          <div class="flex gap-2 flex-wrap">
            <span class="px-2.5 py-1 bg-white/20 backdrop-blur-md rounded text-xs font-medium">React</span>
            <span class="px-2.5 py-1 bg-white/20 backdrop-blur-md rounded text-xs font-medium">UI/UX</span>
          </div>
        </div>
      </div>
      <div class="col-span-12 md:col-span-4 overflow-hidden rounded-xl bg-gradient-to-br from-pink-500 to-red-500 relative cursor-pointer group hover:-translate-y-2 hover:shadow-2xl transition-all duration-300 shadow-lg">
        <div class="absolute inset-0">
          <img src="images/aesthetic2.jpg" class="w-full h-full object-cover" alt="Project" />
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/40 to-transparent group-hover:from-black/90 group-hover:via-black/50 transition-all duration-300"></div>
        <span class="absolute top-6 right-6 px-3 py-1.5 bg-white/95 text-gray-800 rounded text-xs font-semibold uppercase tracking-wide">New</span>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform group-hover:-translate-y-2 transition-transform duration-300">
          <h3 class="text-2xl font-bold mb-2">Brand Identity</h3>
          <p class="text-sm opacity-90 mb-4">Branding</p>
          <div class="flex gap-2 flex-wrap">
            <span class="px-2.5 py-1 bg-white/20 backdrop-blur-md rounded text-xs font-medium">Logo</span>
            <span class="px-2.5 py-1 bg-white/20 backdrop-blur-md rounded text-xs font-medium">Design</span>
          </div>
        </div>
      </div>
      <div class="col-span-12 md:col-span-4 overflow-hidden rounded-xl bg-gradient-to-br from-blue-500 to-cyan-400 relative cursor-pointer group hover:-translate-y-2 hover:shadow-2xl transition-all duration-300 shadow-lg">
        <div class="absolute inset-0">
          <img src="images/aesthetic3.jpg" class="w-full h-full object-cover" alt="Project" />
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/40 to-transparent group-hover:from-black/90 group-hover:via-black/50 transition-all duration-300"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform group-hover:-translate-y-2 transition-transform duration-300">
          <h3 class="text-2xl font-bold mb-2">Mobile Banking</h3>
          <p class="text-sm opacity-90 mb-4">App Design</p>
          <div class="flex gap-2 flex-wrap">
            <span class="px-2.5 py-1 bg-white/20 backdrop-blur-md rounded text-xs font-medium">iOS</span>
            <span class="px-2.5 py-1 bg-white/20 backdrop-blur-md rounded text-xs font-medium">Android</span>
          </div>
        </div>
      </div>
      <div class="col-span-12 md:col-span-4 overflow-hidden rounded-xl bg-gradient-to-br from-emerald-500 to-teal-400 relative cursor-pointer group hover:-translate-y-2 hover:shadow-2xl transition-all duration-300 shadow-lg">
        <div class="absolute inset-0">
          <img src="images/aesthetic6.jpg" class="w-full h-full object-cover" alt="Project" />
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/40 to-transparent group-hover:from-black/90 group-hover:via-black/50 transition-all duration-300"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform group-hover:-translate-y-2 transition-transform duration-300">
          <h3 class="text-2xl font-bold mb-2">E-Learning Platform</h3>
          <p class="text-sm opacity-90 mb-4">Web Development</p>
          <div class="flex gap-2 flex-wrap">
            <span class="px-2.5 py-1 bg-white/20 backdrop-blur-md rounded text-xs font-medium">Vue.js</span>
            <span class="px-2.5 py-1 bg-white/20 backdrop-blur-md rounded text-xs font-medium">Node</span>
          </div>
        </div>
      </div>
      <div class="col-span-12 md:col-span-4 overflow-hidden rounded-xl bg-gradient-to-br from-pink-500 to-yellow-400 relative cursor-pointer group hover:-translate-y-2 hover:shadow-2xl transition-all duration-300 shadow-lg">
        <div class="absolute inset-0">
          <img src="images/aesthetic7.jpg" class="w-full h-full object-cover" alt="Project" />
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/40 to-transparent group-hover:from-black/90 group-hover:via-black/50 transition-all duration-300"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform group-hover:-translate-y-2 transition-transform duration-300">
          <h3 class="text-2xl font-bold mb-2">Social Network</h3>
          <p class="text-sm opacity-90 mb-4">Full Stack</p>
          <div class="flex gap-2 flex-wrap">
            <span class="px-2.5 py-1 bg-white/20 backdrop-blur-md rounded text-xs font-medium">GraphQL</span>
            <span class="px-2.5 py-1 bg-white/20 backdrop-blur-md rounded text-xs font-medium">AWS</span>
          </div>
        </div>
      </div>
      <div class="col-span-12 md:col-span-4 overflow-hidden rounded-xl bg-gradient-to-br from-cyan-500 to-indigo-800 relative cursor-pointer group hover:-translate-y-2 hover:shadow-2xl transition-all duration-300 shadow-lg">
        <div class="absolute inset-0">
          <img src="images/aesthetic8.jpg" class="w-full h-full object-cover" alt="Project" />
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/40 to-transparent group-hover:from-black/90 group-hover:via-black/50 transition-all duration-300"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform group-hover:-translate-y-2 transition-transform duration-300">
          <h3 class="text-2xl font-bold mb-2">Fitness Tracker</h3>
          <p class="text-sm opacity-90 mb-4">Mobile App</p>
          <div class="flex gap-2 flex-wrap">
            <span class="px-2.5 py-1 bg-white/20 backdrop-blur-md rounded text-xs font-medium">Swift</span>
            <span class="px-2.5 py-1 bg-white/20 backdrop-blur-md rounded text-xs font-medium">HealthKit</span>
          </div>
        </div>
      </div>
    </div>