@designcrowd/library.brand-page 5.6.3 → 5.6.4-fluid-2

package/lib/src/brand-page/components/banner-section/BannerSection.mixin.js

@@ -35,6 +35,11 @@ export default defineComponent({
             window.addEventListener('resize', this.onResize);
         });
     },
+    unmounted() {
+        if (typeof window !== undefined) {
+            window.removeEventListener(`resize`, this.onResize);
+        }
+    },
     computed: {
         displayAlignClass() {
             switch (this.viewModel.displayStyle) {

package/lib/src/brand-page/components/payment/__fixtures__/request-payment.d.ts

@@ -19,5 +19,8 @@ export declare const context: {
     isBrandPageOrIsBrandContact: boolean;
     isBrandSite: boolean;
     isBrandContact: boolean;
+    options?: {
+        disableNavigationSideMenu: boolean;
+    } | undefined;
 };
 export declare const viewModel: RequestPaymentViewModel;

package/lib/src/brand-page/components/payment/__fixtures__/support-me.d.ts

@@ -19,5 +19,8 @@ export declare const context: {
     isBrandPageOrIsBrandContact: boolean;
     isBrandSite: boolean;
     isBrandContact: boolean;
+    options?: {
+        disableNavigationSideMenu: boolean;
+    } | undefined;
 };
 export declare const viewModel: SupportMeViewModel;

package/lib/src/brand-page/models/brand-page-context.model.d.ts

@@ -38,4 +38,7 @@ export interface BrandPageContext {
     isBrandPageOrIsBrandContact: boolean;
     isBrandSite: boolean;
     isBrandContact: boolean;
+    options?: {
+        disableNavigationSideMenu: boolean;
+    };
 }

package/lib/src/brand-page/utils/migration/migration-03.d.ts

@@ -0,0 +1,5 @@
+import { type BrandPageModel, type LogoImageModel } from '../..';
+export declare const migration03: (brandPageModel: BrandPageModel, options: {
+    logoImage?: LogoImageModel;
+    isUserDraft: boolean;
+}) => BrandPageModel;

package/lib/src/brand-page/utils/migration/migration-03.js

@@ -0,0 +1,28 @@
+import {} from '../..';
+const handleRecursiveFontSizeMigration = (object) => {
+    if (!object) {
+        return;
+    }
+    if (object['fontSize']) {
+        // Handle conversion here
+        object['fontSize'] = object['fontSize'].replace('rem', 'em');
+    }
+    Object.keys(object).forEach((k) => {
+        if (typeof object[k] === 'object' && !Array.isArray(object[k])) {
+            handleRecursiveFontSizeMigration(object[k]);
+        }
+    });
+};
+export const migration03 = (brandPageModel, options) => {
+    handleRecursiveFontSizeMigration(brandPageModel.pageHeaderDesktop);
+    handleRecursiveFontSizeMigration(brandPageModel.pageHeaderMobile);
+    handleRecursiveFontSizeMigration(brandPageModel.pageFooterDesktop);
+    handleRecursiveFontSizeMigration(brandPageModel.pageFooterMobile);
+    handleRecursiveFontSizeMigration(brandPageModel.styles);
+    brandPageModel.pages.forEach((page) => {
+        page.contents.forEach((content) => {
+            handleRecursiveFontSizeMigration(content);
+        });
+    });
+    return brandPageModel;
+};

package/lib/src/brand-page/utils/migration.util.js

@@ -1,6 +1,7 @@
 import {} from '../models';
 import { migration01 } from './migration/migration-01';
 import { migration02 } from './migration/migration-02';
+import { migration03 } from './migration/migration-03';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -10,6 +11,10 @@ const MIGRATION_TABLE = [
         version: 2,
         migrateFn: migration02,
     },
+    {
+        version: 3,
+        migrateFn: migration03,
+    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
 export const migrateBrandPageModel = (brandPageModel, options) => {

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.js

@@ -100,7 +100,7 @@ export default defineComponent({
             ? JSON.parse(this.viewModel.shopConfigData)
             : null;
         if (!this.containerStore.baseFabricRenderUrl) {
-            throw new Error('base fabric render url is undefined');
+            // throw new Error('base fabric render url is undefined');
         }
         FabricRenderClient.setInstance({
             baseUrl: this.containerStore.baseFabricRenderUrl,

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.stories.js

@@ -138,7 +138,42 @@ export const SampleBanner = () => {
     const pinia = setupStoryPinia();
     const brandPageMakerStore = useBrandPageMakerStore();
     const bannerContent = createInitialBannerSectionContent();
-    bannerContent.description = 'Lorem ipsum dolor sit amet';
+    bannerContent.title = 'LAUNCHING SOON';
+    bannerContent.description = 'This Is Going To Be Epic';
+    bannerContent.buttonText = 'CONTACT US';
+    bannerContent.titleStyle.textStyleType = undefined;
+    bannerContent.titleStyle.fontSize = '6.25em';
+    bannerContent.titleStyle.fontFamily = 'Ubuntu';
+    bannerContent.titleStyle.lineHeight = '1';
+    bannerContent.titleStyle.textAlign = 'left';
+    bannerContent.displayStyle = 'left-aligned';
+    bannerContent.descriptionStyle.textStyleType = undefined;
+    bannerContent.descriptionStyle.fontFamily = 'Work Sans';
+    bannerContent.descriptionStyle.fontSize = '2.6875em';
+    bannerContent.descriptionStyle.textAlign = 'left';
+    bannerContent.buttonTextStyle.textStyleType = undefined;
+    bannerContent.buttonTextStyle.fontFamily = 'Ubuntu';
+    bannerContent.buttonTextStyle.fontSize = '1.5em';
+    bannerContent.buttonTextStyle.textAlign = 'left';
+    console.log('bannerContent', bannerContent);
+    const bannerContent2 = createInitialBannerSectionContent();
+    bannerContent2.title = 'LAUNCHING SOON';
+    bannerContent2.description = 'This Is Going To Be Epic2';
+    bannerContent2.buttonText = 'CONTACT US';
+    bannerContent2.titleStyle.textStyleType = undefined;
+    bannerContent2.titleStyle.fontSize = '6.25em';
+    bannerContent2.titleStyle.fontFamily = 'Ubuntu';
+    bannerContent2.titleStyle.lineHeight = '1';
+    bannerContent2.titleStyle.textAlign = 'left';
+    bannerContent2.displayStyle = 'left-aligned';
+    bannerContent2.descriptionStyle.textStyleType = undefined;
+    bannerContent2.descriptionStyle.fontFamily = 'Work Sans';
+    bannerContent2.descriptionStyle.fontSize = '2.6875em';
+    bannerContent2.descriptionStyle.textAlign = 'left';
+    bannerContent2.buttonTextStyle.textStyleType = undefined;
+    bannerContent2.buttonTextStyle.fontFamily = 'Ubuntu';
+    bannerContent2.buttonTextStyle.fontSize = '1.5em';
+    bannerContent2.buttonTextStyle.textAlign = 'left';
     brandPageMakerStore.setViewport({
         viewport: VIEWPORTS.desktop,
     });
@@ -155,7 +190,7 @@ export const SampleBanner = () => {
                             {
                                 title: 'Home',
                                 slug: 'home',
-                                contents: [bannerContent],
+                                contents: [bannerContent, bannerContent2],
                             },
                         ],
                         brandPageType: BRAND_PAGE_TYPES.brandSite,

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts

@@ -834,6 +834,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     isDraggableEnabled(): boolean;
     isItemSelected(): (itemIdx: any) => boolean;
 }, {
+    dispatchViewPortChangeEvent(): void;
     onDraggingStart(): void;
     onDraggingEnd(ev: any): void;
     onOverlayClick(item: ContentViewModel): void;

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.js

@@ -73,7 +73,13 @@ export default defineComponent({
             };
         },
     },
+    mounted() {
+        this.dispatchViewPortChangeEvent();
+    },
     watch: {
+        viewport() {
+            this.dispatchViewPortChangeEvent();
+        },
         selectedItemId(itemId) {
             this.scrollToContentItemByItemId(itemId);
         },
@@ -93,6 +99,11 @@ export default defineComponent({
         },
     },
     methods: {
+        dispatchViewPortChangeEvent() {
+            window.dispatchEvent(new CustomEvent('editor:viewport', {
+                detail: { viewport: this.viewport },
+            }));
+        },
         onDraggingStart() {
             this.isDraggingContent = true;
             // Unable to set selected item id here because it will cause the draggable to be stuck

package/lib/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.js

@@ -96,6 +96,9 @@ export default defineComponent({
                     this.viewModel?.brandPageType === BRAND_PAGE_TYPES.brandContact,
                 isBrandSite: this.viewModel?.brandPageType === BRAND_PAGE_TYPES.brandSite,
                 isBrandContact: this.viewModel?.brandPageType === BRAND_PAGE_TYPES.brandContact,
+                options: {
+                    disableNavigationSideMenu: true,
+                },
             };
         },
         previewViewport() {

package/lib/src/brand-page-maker/convertors/text-size-value.convertor.js

@@ -1,13 +1,13 @@
 import { DEFAULT_FONT_SIZE } from '../../brand-page/constants/';
-import { pxToRem, remToPx } from '../utils/text.util';
+import { pxToEm, emToPx } from '../utils/text.util';
 export const textSizeValueConvertor = {
     convertBackToMultipleValues: false,
     convert(value) {
-        return (value.fontSize ? remToPx(value.fontSize) : DEFAULT_FONT_SIZE).toString();
+        return (value.fontSize ? emToPx(value.fontSize) : DEFAULT_FONT_SIZE).toString();
     },
     convertBack(valuePx) {
         return {
-            fontSize: pxToRem(valuePx),
+            fontSize: pxToEm(valuePx),
         };
     },
 };

package/lib/src/brand-page-maker/utils/text.util.d.ts

@@ -1,2 +1,2 @@
-export declare const pxToRem: (px: string) => string;
-export declare const remToPx: (rem: string) => string;
+export declare const pxToEm: (px: string) => string;
+export declare const emToPx: (rem: string) => string;

package/lib/src/brand-page-maker/utils/text.util.js

@@ -1,8 +1,8 @@
-export const pxToRem = (px) => {
+export const pxToEm = (px) => {
     const value = parseFloat(px) / 16;
-    return `${value}rem`;
+    return `${value}em`;
 };
-export const remToPx = (rem) => {
+export const emToPx = (rem) => {
     const value = parseFloat(rem) * 16;
     return `${value}`;
 };

package/lib/src/clients/user-media-client.d.ts

@@ -6,12 +6,11 @@ export declare class UserMediaClient {
     policyData: PolicyData | null;
     constructor(endpoints: Endpoints);
     getPolicyDataAsync(isPublic: boolean): Promise<PolicyData | null>;
-    insertUserMediaAsync(mediaToken: string, name: string, type: string, isPublic: boolean, relatedAssetToken: string | undefined, mediaType: string, hasTriggeredProcessing: boolean): Promise<UserMediaItem | undefined>;
+    insertUserMediaAsync(mediaToken: string, name: string, type: string, isPublic: boolean, relatedAssetToken: string | undefined, mediaType: string): Promise<UserMediaItem | undefined>;
     uploadAndInsertMediaByUrlAsync(imageUrl: string, relatedAssetToken: string): Promise<string | undefined>;
     addPolicyToFormDataAndFile(file: MediaFile, formData: FormData): void;
     uploadUserMedia(file: MediaFile): Promise<void>;
     getUserMediaAsync(extensions: string[], isPublic: boolean, mediaType: string): Promise<UserMediaItem[] | undefined>;
-    getUserMediaByTokenAsync(mediaToken: string): Promise<UserMediaItem | undefined>;
     deleteUserMediaByUserMediaToken(userMediaToken: string): Promise<boolean>;
 }
 export declare const getInstance: (endpoints: Endpoints) => UserMediaClient;

package/lib/src/clients/user-media-client.js

@@ -12,7 +12,7 @@ export class UserMediaClient {
             return this.policyData;
         }
         try {
-            const response = await axios.get(`${this.endpoints.userPolicyDataEndpoint}?isPublic=${isPublic}&isUpload=true`);
+            const response = await axios.get(`${this.endpoints.userPolicyDataEndpoint}?isPublic=${isPublic}`);
             if (response.status !== 200) {
                 if (process.env.NODE_ENV !== 'production') {
                     console.error(`getUserPolicy got response status '${response.status}'`);
@@ -29,12 +29,9 @@ export class UserMediaClient {
         }
         return this.policyData;
     }
-    async insertUserMediaAsync(mediaToken, name, type, isPublic, relatedAssetToken, mediaType, hasTriggeredProcessing) {
+    async insertUserMediaAsync(mediaToken, name, type, isPublic, relatedAssetToken, mediaType) {
         try {
-            const reqUrl = hasTriggeredProcessing
-                ? `${this.endpoints.createUserMediaEndpoint}/${mediaToken}?hasTriggeredProcessing=${hasTriggeredProcessing}`
-                : `${this.endpoints.createUserMediaEndpoint}/${mediaToken}`;
-            const response = await axios.put(reqUrl, {
+            const response = await axios.put(`${this.endpoints.createUserMediaEndpoint}/${mediaToken}`, {
                 mediaToken,
                 mimeType: type,
                 name,
@@ -70,7 +67,7 @@ export class UserMediaClient {
                 console.error(e);
             }
         }
-        const newMedia = await this.insertUserMediaAsync(file.mediaToken, file.name, file.type, true, relatedAssetToken, file.mediaType, false);
+        const newMedia = await this.insertUserMediaAsync(file.mediaToken, file.name, file.type, true, relatedAssetToken, file.mediaType);
         return newMedia?.url;
     }
     addPolicyToFormDataAndFile(file, formData) {
@@ -79,7 +76,7 @@ export class UserMediaClient {
         }
         const mediaToken = uuidV4();
         file.mediaToken = mediaToken;
-        const key = `${this.policyData.keyPrefix}${file.mediaToken}`;
+        const key = `${this.policyData.keyPrefix}${file.mediaToken}${getExtensionFromMimeType(file.type)}`;
         file.key = key;
         formData.append('key', key);
         formData.append('acl', this.policyData.acl);
@@ -113,17 +110,6 @@ export class UserMediaClient {
             }
         }
     }
-    async getUserMediaByTokenAsync(mediaToken) {
-        try {
-            const response = await axios.get(`${this.endpoints.getAllUserMediaEndpoint}/${mediaToken}?isPublic=true`);
-            return response.data;
-        }
-        catch (e) {
-            if (process.env.NODE_ENV !== 'production') {
-                console.error(e);
-            }
-        }
-    }
     async deleteUserMediaByUserMediaToken(userMediaToken) {
         try {
             const result = await axios.delete(`${this.endpoints.deleteUserMediaEndpoint}/${userMediaToken}`);

package/lib/src/css/library.brand-page-brandCrowd.min.css

@@ -7219,14 +7219,14 @@ body {
   line-height: 1.5;
 }
 
-.brand-page-root[data-v-91e1b070] {
+.brand-page-root[data-v-2e004a3c] {
   height: 100%;
 }
-.sortable[data-v-91e1b070] {
+.sortable[data-v-2e004a3c] {
   outline-color: #F7768C;
   outline-width: 0.2rem;
 }
-.brand-page[data-v-91e1b070] {
+.brand-page[data-v-2e004a3c] {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -7238,7 +7238,7 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--default[data-v-91e1b070] {
+.brand-page__inner--default[data-v-2e004a3c] {
   position: relative;
   z-index: 10;
   display: -webkit-box;
@@ -7250,16 +7250,16 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--desktop[data-v-91e1b070] {
+.brand-page__inner--desktop[data-v-2e004a3c] {
   min-height: 100vh;
 }
-.brand-site__header[data-v-91e1b070] {
+.brand-site__header[data-v-2e004a3c] {
   container-type: inline-size;
 }
-.brand-page__header[data-v-91e1b070] {
+.brand-page__header[data-v-2e004a3c] {
   padding-top: var(--page-padding);
 }
-.brand-page__content--default[data-v-91e1b070] {
+.brand-page__content--default[data-v-2e004a3c] {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 2.5rem;
@@ -7276,7 +7276,7 @@ body {
           flex-direction: column;
   max-width: var(--page-max-width);
 }
-.brand-page__content--desktop[data-v-91e1b070] {
+.brand-page__content--desktop[data-v-2e004a3c] {
   margin-left: auto;
   margin-right: auto;
   display: -webkit-box;
@@ -7292,15 +7292,15 @@ body {
           flex-direction: column;
   max-width: 100%;
 }
-.brand-page__content--inner[data-v-91e1b070] {
+.brand-page__content--inner[data-v-2e004a3c] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.brand-page__content--inner--brandsite[data-v-91e1b070] {
+.brand-page__content--inner--brandsite[data-v-2e004a3c] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.brand-page__content--outline-selected[data-v-91e1b070] {
+.brand-page__content--outline-selected[data-v-2e004a3c] {
   position: relative;
   z-index: 10;
   outline-color: #F7768C;
@@ -7308,20 +7308,20 @@ body {
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
-.brand-page__content--outline-footer-selected[data-v-91e1b070] {
+.brand-page__content--outline-footer-selected[data-v-2e004a3c] {
   outline-color: #f7768c;
   outline-width: 0.2rem;
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
 @media (max-width: 640px) {
-.brand-page__content--inner--full-width[data-v-91e1b070] {
+.brand-page__content--inner--full-width[data-v-2e004a3c] {
     padding-left: 0;
     padding-right: 0;
 }
 }
 @media (min-width: 640px) {
-.brand-page__content--inner--full-width[data-v-91e1b070] {
+.brand-page__content--inner--full-width[data-v-2e004a3c] {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
 }
@@ -7930,39 +7930,11 @@ body {
   border-bottom: 6px solid #be2626;
 }
 
-.c-media-btn__img[data-v-144c5c39] {
-  border-radius: 0.375rem;
-  -o-object-fit: cover;
-     object-fit: cover;
-  -webkit-transition-property: -webkit-box-shadow;
-  transition-property: -webkit-box-shadow;
-  transition-property: box-shadow;
-  transition-property: box-shadow, -webkit-box-shadow;
-  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  -webkit-transition-duration: 200ms;
-          transition-duration: 200ms;
-  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-          transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  width: 100%;
-  height: 100%;
-}
-.c-media-btn__img[data-v-144c5c39]:hover {
-  -webkit-box-shadow: 0 0 0 3px rgb(0, 151, 215);
-          box-shadow: 0 0 0 3px rgb(0, 151, 215);
-}
-.tw-w-full[data-v-144c5c39] {
-  width: 100%;
-}
-.tw-h-full[data-v-144c5c39] {
-  height: 100%;
-}
-
-.c-media-btn[data-v-4e32152a] {
+.c-media-btn[data-v-d2f038c3] {
   width: 100%;
   aspect-ratio: 1.2;
 }
-.c-media-btn__img[data-v-4e32152a] {
+.c-media-btn__img[data-v-d2f038c3] {
   height: 100%;
   width: 100%;
   border-radius: 0.375rem;
@@ -7979,11 +7951,11 @@ body {
   -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
-.c-media-btn:hover .c-media-btn__img[data-v-4e32152a] {
+.c-media-btn:hover .c-media-btn__img[data-v-d2f038c3] {
   -webkit-box-shadow: 0 0 0 3px rgb(0, 151, 215);
           box-shadow: 0 0 0 3px rgb(0, 151, 215);
 }
-.tw-bottom-15[data-v-4e32152a] {
+.tw-bottom-15[data-v-d2f038c3] {
   bottom: 15px;
 }
 

package/lib/src/css/library.brand-page-brandPage.min.css

@@ -7547,14 +7547,14 @@ body {
   line-height: 1.5;
 }
 
-.brand-page-root[data-v-91e1b070] {
+.brand-page-root[data-v-2e004a3c] {
   height: 100%;
 }
-.sortable[data-v-91e1b070] {
+.sortable[data-v-2e004a3c] {
   outline-color: #F7768C;
   outline-width: 0.2rem;
 }
-.brand-page[data-v-91e1b070] {
+.brand-page[data-v-2e004a3c] {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -7566,7 +7566,7 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--default[data-v-91e1b070] {
+.brand-page__inner--default[data-v-2e004a3c] {
   position: relative;
   z-index: 10;
   display: -webkit-box;
@@ -7578,16 +7578,16 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--desktop[data-v-91e1b070] {
+.brand-page__inner--desktop[data-v-2e004a3c] {
   min-height: 100vh;
 }
-.brand-site__header[data-v-91e1b070] {
+.brand-site__header[data-v-2e004a3c] {
   container-type: inline-size;
 }
-.brand-page__header[data-v-91e1b070] {
+.brand-page__header[data-v-2e004a3c] {
   padding-top: var(--page-padding);
 }
-.brand-page__content--default[data-v-91e1b070] {
+.brand-page__content--default[data-v-2e004a3c] {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 2.5rem;
@@ -7604,7 +7604,7 @@ body {
           flex-direction: column;
   max-width: var(--page-max-width);
 }
-.brand-page__content--desktop[data-v-91e1b070] {
+.brand-page__content--desktop[data-v-2e004a3c] {
   margin-left: auto;
   margin-right: auto;
   display: -webkit-box;
@@ -7620,15 +7620,15 @@ body {
           flex-direction: column;
   max-width: 100%;
 }
-.brand-page__content--inner[data-v-91e1b070] {
+.brand-page__content--inner[data-v-2e004a3c] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.brand-page__content--inner--brandsite[data-v-91e1b070] {
+.brand-page__content--inner--brandsite[data-v-2e004a3c] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.brand-page__content--outline-selected[data-v-91e1b070] {
+.brand-page__content--outline-selected[data-v-2e004a3c] {
   position: relative;
   z-index: 10;
   outline-color: #F7768C;
@@ -7636,20 +7636,20 @@ body {
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
-.brand-page__content--outline-footer-selected[data-v-91e1b070] {
+.brand-page__content--outline-footer-selected[data-v-2e004a3c] {
   outline-color: #f7768c;
   outline-width: 0.2rem;
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
 @media (max-width: 640px) {
-.brand-page__content--inner--full-width[data-v-91e1b070] {
+.brand-page__content--inner--full-width[data-v-2e004a3c] {
     padding-left: 0;
     padding-right: 0;
 }
 }
 @media (min-width: 640px) {
-.brand-page__content--inner--full-width[data-v-91e1b070] {
+.brand-page__content--inner--full-width[data-v-2e004a3c] {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
 }
@@ -8258,39 +8258,11 @@ body {
   border-bottom: 6px solid #be2626;
 }
 
-.c-media-btn__img[data-v-144c5c39] {
-  border-radius: 0.375rem;
-  -o-object-fit: cover;
-     object-fit: cover;
-  -webkit-transition-property: -webkit-box-shadow;
-  transition-property: -webkit-box-shadow;
-  transition-property: box-shadow;
-  transition-property: box-shadow, -webkit-box-shadow;
-  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  -webkit-transition-duration: 200ms;
-          transition-duration: 200ms;
-  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-          transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  width: 100%;
-  height: 100%;
-}
-.c-media-btn__img[data-v-144c5c39]:hover {
-  -webkit-box-shadow: 0 0 0 3px rgb(0, 151, 215);
-          box-shadow: 0 0 0 3px rgb(0, 151, 215);
-}
-.tw-w-full[data-v-144c5c39] {
-  width: 100%;
-}
-.tw-h-full[data-v-144c5c39] {
-  height: 100%;
-}
-
-.c-media-btn[data-v-4e32152a] {
+.c-media-btn[data-v-d2f038c3] {
   width: 100%;
   aspect-ratio: 1.2;
 }
-.c-media-btn__img[data-v-4e32152a] {
+.c-media-btn__img[data-v-d2f038c3] {
   height: 100%;
   width: 100%;
   border-radius: 0.375rem;
@@ -8307,11 +8279,11 @@ body {
   -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
-.c-media-btn:hover .c-media-btn__img[data-v-4e32152a] {
+.c-media-btn:hover .c-media-btn__img[data-v-d2f038c3] {
   -webkit-box-shadow: 0 0 0 3px rgb(0, 151, 215);
           box-shadow: 0 0 0 3px rgb(0, 151, 215);
 }
-.tw-bottom-15[data-v-4e32152a] {
+.tw-bottom-15[data-v-d2f038c3] {
   bottom: 15px;
 }