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;