From 375f8c8a7658c0286f5650de4fcaa9cd8595ea86 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Mon, 15 Jul 2024 12:46:10 +0700
Subject: [PATCH] style list bg fix

---
 packages/fakeyou.com/src/common/StyleOptions.ts            | 2 +-
 .../pages/style-video/StyleSelection/StyleSelection.scss   | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/fakeyou.com/src/common/StyleOptions.ts b/packages/fakeyou.com/src/common/StyleOptions.ts
index 9bc4f727a3..93d9a83a96 100644
--- a/packages/fakeyou.com/src/common/StyleOptions.ts
+++ b/packages/fakeyou.com/src/common/StyleOptions.ts
@@ -158,7 +158,7 @@ export const STYLE_OPTIONS: StyleOption[] = [
   {
     label: "Horror 2.5D",
     value: "25d_horror",
-    image: "/images/styles/gif/2_5d_horror.gif",
+    image: "",
   },
   {
     label: "Creepy",
diff --git a/packages/fakeyou.com/src/v2/view/pages/style-video/StyleSelection/StyleSelection.scss b/packages/fakeyou.com/src/v2/view/pages/style-video/StyleSelection/StyleSelection.scss
index bf84367a7b..13e028fc9c 100644
--- a/packages/fakeyou.com/src/v2/view/pages/style-video/StyleSelection/StyleSelection.scss
+++ b/packages/fakeyou.com/src/v2/view/pages/style-video/StyleSelection/StyleSelection.scss
@@ -24,8 +24,8 @@
     }
 
     .image-container {
-      width: 80px;
-      height: 45px;
+      aspect-ratio: 16 / 9;
+      height: 48px;
       overflow: hidden;
       border-radius: 0.4rem;
       background-color: rgba(20, 20, 20, 1);
@@ -58,6 +58,9 @@
   object-fit: cover;
   border: 2px solid rgba(255, 255, 255, 0.3);
   transition: border-color 0.2s;
+  background-image: url("../../../../../../public/images/placeholders/style_placeholder.png");
+  aspect-ratio: 16 / 9;
+  background-position: center;
 
   &.selected {
     border-color: $primary;