<template>
  <div class="grow flex flex-col w-full h-full relative overflow-auto">
    <div class="m-4 relative">
      <h4 class="m-auto font-medium text-lg max-w-[375px]">Inventory</h4>
      <div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]">
        <div v-for="n in 24" class="bg-gray-300/80 border-solid border-2 border-gray-500 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
      </div>
      <div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-gray-500"></div>
    </div>
    <div class="m-4">
      <h4 class="m-auto font-medium text-lg max-w-[375px]">Chest items</h4>
      <div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]">
        <div v-for="n in 12" class="bg-gray-300/80 border-solid border-2 border-gray-500 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
      </div>
    </div>
  </div>
</template>
