Responsive Grid Gallery - Copy this Angular, Tailwind Component to your project

necesito adaptar este codigo para que los espacios de la derecha no pierdan su tamaño si agrego imagenes <div class="border border-black cursor-pointer shadow-md h-48 overflow-hidden p-4" id="tb2"> <!-- Contenedor principal con cinco columnas --> <div class="grid grid-cols-5 gap-2 items-center h-full"> <!-- Sección de imágenes (rectángulo grande) --> <div class="col-span-3 h-full flex items-center justify-center bg-gray-200 rounded-lg"> <img src="https://directus.prodelec.app/assets/7faa74c6-69b3-4826-84ff-12e57ef93caa" alt="Spei" class="w-40 h-40 object-contain" /> </div> <div class="col-span-2 grid grid-cols-2 gap-2 w-full h-full"> <!-- Espacio vacío superior izquierda --> <div class="w-full h-full bg-gray-200 rounded-lg"></div> <!-- Espacio vacío superior derecha --> <div class="w-full h-full bg-gray-200 rounded-lg"></div> <!-- Espacio vacío inferior izquierda --> <div class="w-full h-full bg-gray-200 rounded-lg"></div> <!-- Logo en la parte inferior derecha con texto encima --> <div class="max-h-full max-w-full flex flex-col items-center justify-center bg-gray-200 rounded-lg overflow-hidden"> <!-- Etiqueta del logo con tamaño fijo y sin cambio de tamaño --> <label class="text-sm font-bold mb-1 text-center flex-shrink-0">Transacciones realizadas vía:</label> <!-- Imagen del logo que ocupa el 75% del ancho del contenedor, manteniendo el tamaño --> <img src="https://directus.prodelec.app/assets/f5dece22-ab12-4ccc-9573-0dd4095bccd3" alt="Logo OpenPay" class="object-contain max-h-full max-w-full" /> </div> </div> </div> </div>