Overlaying half of a logo on top of an image

<section
  id="streetwear"
  class="flex flex-col justify-between md:h-svh px-4 md:px-12 py-7"
>
  <Logo outline={true} />

  <div class="flex flex-wrap flex-col md:flex-row gap-4">
    {
      [
        {
          src: streetwear1,
          alt: "Person wearing the '?!' socks and yellow Adidas shoes",
          text: '?!',
        },
        {
          src: streetwear2,
          alt: "Person wearing the 'Shine' socks and lightblue Adidas shoes",
          text: 'Shine',
        },
        {
          src: streetwear3,
          alt: "Person on a bike wearing the 'Sunny Side Up' socks and green Nike shoes",
          text: 'Sunny side up',
        },
      ].map(item => (
        <div class="uppercase flex-1 text-orange">
          <Image
            src={item.src}
            class="w-full md:w-auto object-cover"
            alt={item.alt}
          />
          <span>{item.text}</span>
        </div>
      ))
    }
  </div>
</section>