Prepare for og tailwind use

src/image-response/CameraImageResponse.tsx

@@ -27,11 +27,7 @@ export default function CameraImageResponse({
 }) {
   const camera = cameraFromPhoto(photos[0], cameraProp);
   return (
-    <ImageContainer {...{
-      width,
-      height,
-      ...photos.length === 0 && { background: 'black' },
-    }}>
+    <ImageContainer solidBackground={photos.length === 0}>
       <ImagePhotoGrid
         {...{
           photos,

src/image-response/FilmSimulationImageResponse.tsx

@@ -24,11 +24,7 @@ export default function FilmSimulationImageResponse({
   fontFamily: string
 }) {  
   return (
-    <ImageContainer {...{
-      width,
-      height,
-      ...photos.length === 0 && { background: 'black' },
-    }}>
+    <ImageContainer solidBackground={photos.length === 0}>
       <ImagePhotoGrid
         {...{
           photos,

src/image-response/FocalLengthImageResponse.tsx

@@ -20,11 +20,7 @@ export default function FocalLengthImageResponse({
   fontFamily: string
 }) {  
   return (
-    <ImageContainer {...{
-      width,
-      height,
-      ...photos.length === 0 && { background: 'black' },
-    }}>
+    <ImageContainer solidBackground={photos.length === 0}>
       <ImagePhotoGrid
         {...{
           photos,

src/image-response/HomeImageResponse.tsx

@@ -17,7 +17,7 @@ export default function HomeImageResponse({
   fontFamily: string
 }) {
   return (
-    <ImageContainer {...{ width, height }} >
+    <ImageContainer>
       <ImagePhotoGrid
         {...{
           photos,

src/image-response/PhotoImageResponse.tsx

@@ -32,7 +32,7 @@ export default function PhotoImageResponse({
     .trim();
 
   return (
-    <ImageContainer {...{ width, height }}>
+    <ImageContainer>
       <ImagePhotoGrid {...{
         photos: isNextImageReady ? [photo] : [],
         width,

src/image-response/RecipeImageResponse.tsx

@@ -20,11 +20,7 @@ export default function RecipeImageResponse({
   fontFamily: string
 }) {  
   return (
-    <ImageContainer {...{
-      width,
-      height,
-      ...photos.length === 0 && { background: 'black' },
-    }}>
+    <ImageContainer solidBackground={photos.length === 0}>
       <ImagePhotoGrid
         {...{
           photos,

src/image-response/TagImageResponse.tsx

@@ -20,11 +20,7 @@ export default function TagImageResponse({
   fontFamily: string
 }) {  
   return (
-    <ImageContainer {...{
-      width,
-      height,
-      ...photos.length === 0 && { background: 'black' },
-    }}>
+    <ImageContainer solidBackground={photos.length === 0}>
       <ImagePhotoGrid
         {...{
           photos,

src/image-response/components/ImageContainer.tsx

@@ -1,25 +1,21 @@
 import { ReactNode } from 'react';
 
 export default function ImageContainer({
-  width,
-  height,
-  background = 'transparent',
+  solidBackground,
   children,
 }: {
-  width: number
-  height: number
-  background?: 'transparent' | 'black'
+  solidBackground?: boolean
   children: ReactNode
 }) {
   return (
     <div style={{
-      position: 'relative',
+      height: '100%',
+      width: '100%',
       display: 'flex',
+      flexDirection: 'column',
       alignItems: 'center',
       justifyContent: 'center',
-      background,
-      width,
-      height,
+      backgroundColor: solidBackground ? 'black' : 'transparent',
     }}>
       {children}
     </div>