@everymatrix/casino-games-category-section 1.44.0 → 1.45.0

package/src/CasinoGamesCategorySection.svelte

@@ -1,1428 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { platformFavorite, getDevice, isMobile } from 'rvhelper';
-  import { _, addNewMessages, setLocale } from './i18n';
-  import type { CategoryData } from './CasinoGamesCategorySection.type';
-  import { TRANSLATIONS } from './translations';
-  import moment from 'moment';
-
-  import '@everymatrix/casino-game-thumbnail';
-  import '@everymatrix/casino-filter';
-  import '@everymatrix/casino-sort';
-
-  const MASONRY_CLASS_PREFIX = 'game-tile-';
-
-  export let endpoint:string = '';
-  export let datasource:string = '';
-  export let lang:string = ''; // Language
-  export let session:string = ''; // Value for sessionID
-  export let userid:string = ''; // Value for UserID;
-  export let favorites:string = '';
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = '';
-  export let translationurl:string = '';
-  export let currency:string = '';
-
-  export let categoryid:string = '';
-  export let showgamename:string = '';
-  export let livecasino:string = 'false';
-  export let gamepagemodalurl:string = 'true';
-  export let integratedgameframedesktop:string = 'false';
-  export let integratedgameframemobile:string = 'false';
-  export let casinomygames:string = 'false';
-  export let addfilterselector:string = 'false';
-  export let addsortingselector:string = 'false';
-  export let filterbylogo:string = '';
-  export let casinogamesgridslider:string = 'false'; 
-  export let fetchviaevent:string = 'false';
-  export let showallpage:string = 'casino';
-  export let actionevent:string = 'CategoryChange';
-  export let displayedgamecount:string = '10';
-  export let showallbuttongamescount: string = '10';
-
-  //Revert manually
-  // let livelobbyendpoint = `${endpoint}/lobby/tables`;
-
-  // CasinoPage loading state
-  let isLoading:boolean = true;
-  let hasErrors:boolean = false;
-  let sessionID:string;
-  let playerID:string;
-
-  let lobbyView:boolean = true;
-  
-
-  let userAgent = window.navigator.userAgent;
-
-  let operatorSpecifications:Object;
-  let categoryData:CategoryData;
-  let shownCategoryData = [];
-  let showLoadCategory:boolean = true;
-  let offset:number = 0;
-  let limit:number = 40;
-  let searched:boolean = false;
-  let recentSearched:boolean = false;
-  let scrollTop:boolean = false;
-  let searchItem:boolean = false;
-  let presentFilters:boolean = false;
-  let showItems:boolean = true;
-
-  /* Start Lazy Loading */
-  let nativeLoading:boolean = true;
-  let intersecting:boolean = false;
-  let isLazyLoading:boolean = false;
-  let container:any;
-  let maxTotal:number;
-  let categoryName:HTMLElement;
-  let showFavGamesCategory:boolean = false;
-  let customStylingContainer:HTMLElement;
-  let validObservers:boolean = false;
-  
-  let thumbnailContainer:Array<HTMLElement> = new Array(10000);
-  let intersectingIndexes:Object = {};
-  let visibilityconnect:string = '';
-  let sortedBy:string = '';
-  let hidden;
-  let visibilityChange;
-  let dataloaded;
-  
-  let favoriteGames:Array<Object>;
-  let listOfGamesIDs:Array<string> = [];
-
-  let abortController = new AbortController();
-
-  let favoriteGamesData:any = {
-    items: [],
-    count: 0,
-    name: ''
-  };
-  /* End Lazy Loading */
-
-  const setTranslationUrl = ():void => {
-    let url:string = translationurl;
-
-    fetch(url).then((res:any) => res.json())
-    .then((res) => {
-      Object.keys(res).forEach((item:any):void => {
-        addNewMessages(item, res[item]);
-      });
-    }).catch((err:any) => {
-      console.log(err);
-    });
-  }
-
-  Object.keys(TRANSLATIONS).forEach((item) => {
-    addNewMessages(item, TRANSLATIONS[item]);
-  });
-
-  if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support
-    hidden = 'hidden';
-    visibilityChange = 'visibilitychange';
-  } else if (typeof document.msHidden !== 'undefined') {
-    hidden = 'msHidden';
-    visibilityChange = 'msvisibilitychange';
-  } else if (typeof document.webkitHidden !== 'undefined') {
-    hidden = 'webkitHidden';
-    visibilityChange = 'webkitvisibilitychange';
-  }
-
-  // IntersectionObserver used for loading more games
-  let observer = new IntersectionObserver((entries) => {
-    entries.forEach(async (entry) => {
-      let gameid = entry.target.gameid; // eslint-disable-line
-      let index = entry.target.elems_index; // eslint-disable-line
-
-      if (entry.isIntersecting) {
-        if (index * 1.2 > limit ) {
-          loadMoreGames(categoryid);
-        }
-        intersectingIndexes[gameid] = 1;
-      } else {
-        intersectingIndexes[gameid] = 0;
-      }
-    });
-  });
-
-   // Start favored games section
-   const getFavoritesGames = (sessionID:string, playerID:string) => {
-    let url = `${endpoint}/v1/player/${playerID}/favorites/`;
-    isLoading = true;
-    let options = {
-        method: "GET",
-        headers: {
-            'X-SessionID': sessionID,
-        }
-    };
-
-    return new Promise((resolve, reject) => {
-        fetch(url, options)
-          .then((res:any) => res.json())
-          .then((updatedArray:any) => {
-                isLoading = false;
-                favoriteGames = [];
-                if (updatedArray) {
-                  updatedArray.items.forEach((item: any) => {
-                    if (item.gameModel) {
-                      favoriteGames.push(item);
-                      if (!listOfGamesIDs.includes(item.id)) {
-                        listOfGamesIDs.push(item.id);
-                      }
-                    }
-                  });
-                  window.postMessage({ type: 'UpdateFavoritesCount', favoriteGames});
-                } else {
-                    favoriteGames = [];
-                }
-
-                if(categoryid === 'FAVORITES') showFavoriteSection(favoriteGames);
-
-                shownCategoryData.forEach((item) => {
-                    item.isFavorite = checkFavorite(item.id);
-                });
-
-                let aux:any = shownCategoryData;
-                shownCategoryData = undefined;
-                shownCategoryData = aux;
-
-                resolve(favoriteGames);
-
-              }).catch((err:any) => {
-                console.error(err);
-                reject(err);
-            });
-    });
-  }
-
-  // @TODO categoryId type
-  const getData = (categoryid:any, offset:number, limit:number) => {
-    if (abortController) {
-        abortController.abort();
-    }
-
-    abortController = new AbortController();
-    const signal = abortController.signal;
-
-    isLoading = true;
-    let categoryidparsed = '';
-    let url:any = '';
-    let vendorFilters = JSON.parse(localStorage.getItem('vendorFiltersByCategory'));
-    let vendorSort = JSON.parse(localStorage.getItem('vendorSortingBy'));
-    
-    if((categoryid.match(/\$/g) || []).length > 1) {
-      categoryidparsed = categoryid.split('$').slice(0, 2).join('$');
-      url = new URL(`${endpoint}/v1/casino/groups/${datasource}/${categoryidparsed}/subGroups`);
-    } else {
-      url = new URL(`${endpoint}/v1/casino/groups/${datasource}/${categoryid}`);
-    }
-
-    return new Promise((resolve, reject) => {
-      url.searchParams.delete("pagination");
-      url.searchParams.append("expand", "games(vendor)");
-      url.searchParams.append("fields", "id,name,games");
-      url.searchParams.append("platform", getDevice(userAgent));
-      url.searchParams.append("pagination", `games(offset=${offset},limit=${limit})`);
-      url.searchParams.append('language', lang);
- 
-      // if vendor filters are active, get filtered games
-      window.postMessage({ type: 'CategoryVendors', categoryid }, window.location.href);
-
-      if (vendorFilters) {
-          if (vendorFilters[categoryid]) {
-            if (vendorFilters[categoryid].length && lobbyView === false && showFavGamesCategory === false) {
-              let queryParamVendorId:string = '';
-
-              presentFilters = true;
-              vendorFilters[categoryid].forEach(vendorId => {
-                queryParamVendorId = queryParamVendorId + (queryParamVendorId ? `,games(vendor(id=${vendorId}))` : `games(vendor(id=${vendorId}))`);
-              });
-              
-              url.searchParams.append('filter', `${queryParamVendorId}`);
-            } else {
-              presentFilters = false;
-            }
-          }
-      }
-
-      if(vendorSort){
-        if (vendorSort[categoryid]) {
-          if (vendorSort[categoryid] && vendorSort[categoryid]!= 'All') {
-            if(vendorSort[categoryid] == 'isNew' || vendorSort[categoryid] == 'advancedTags(name(hot))'){
-              url.searchParams.append('sortedField', `games(${vendorSort[categoryid]})`);
-              url.searchParams.append('orderBy', `DES`);
-            } else {
-              url.searchParams.append('sortedField', `games(${vendorSort[categoryid]})`);
-            }
-          }
-        } else {
-          if (sortedBy && sortedBy!= 'All') {
-            if(sortedBy ==  'advancedTags(name(hot))' || sortedBy == 'isNew'){
-              url.searchParams.append('sortedField', `games(${sortedBy})`);
-              url.searchParams.append('orderBy', `DES`);
-            } else {
-              url.searchParams.append('sortedField', `games(${sortedBy})`);
-            }
-          }
-        }
-      }
-      
-      fetch(url, { signal })
-        .then((res:any) => res.json())
-        .then((categoryData:any) => {
-          if (!signal.aborted) {
-            isLoading = false;
-            if((categoryid.match(/\$/g) || []).length > 1) {
-              categoryData = categoryData.items.filter(subcategory => {
-                if(subcategory.id == categoryid) return subcategory;
-              })[0];
-            }
-
-            dataloaded = true;
-            hasErrors = false;
-            maxTotal = categoryData.games.total;
-
-            isLazyLoading = true;
-            resolve(categoryData);
-          }
-        })
-        .catch((err) => {
-            if (err.name !== 'AbortError') {
-                hasErrors = true;
-                console.error(err);
-                reject(err);
-            }
-        });
-    });
-  }
-
-  //Standalone fetching games using categoryid when fetchviaevent is false
-  const fetchGamesByCategory = (categoryid, displayedgamecount, showallbuttongamescount) => {
-    if(categoryid !== ''){
-      searched = false;
-      lobbyView = true;
-      addfilterselector = 'false';
-      addsortingselector = 'false';
-      searchItem = false;
-      validObservers = false;
-
-      showLoadCategory = (+displayedgamecount > +showallbuttongamescount);
-
-      getData(categoryid, 0, +displayedgamecount).then((res:any) => {
-        categoryData = res;
-        shownCategoryData = categoryData.games.items;
-        if (shownCategoryData) {
-          shownCategoryData.forEach((item:any) => {
-            item.isFavorite = checkFavorite(item.id);
-          });
-        }
-      });
-    }
-  }
-
-  const messageHandler = (e:any) => {
-    if (e.data) {
-      switch(e.data.type) {
-        case 'MostPlayedData':
-            if(categoryid == 'MOSTPLAYED') {
-            searched = false;
-            lobbyView = false;
-            showLoadCategory = false;
-            shownCategoryData = e.data.mostPlayedGames;
-            categoryData = {
-              id: 'MOSTPLAYED',
-              name: 'Most Played Games',
-              games: {
-                count: e.data.mostPlayedGames.length,
-                total: e.data.mostPlayedGames.length,
-                items: e.data.mostPlayedGames
-              }
-            };
-          }
-          isLoading = false;
-          break;
-
-        case 'LastPlayedData':
-          if (categoryid == 'LASTPLAYED') {
-            searched = false;
-            lobbyView = false;
-            showLoadCategory = false;
-            shownCategoryData = e.data.lastPlayedGames;
-            categoryData = {
-              id: 'LASTPLAYED',
-              name: 'Last Played Games',
-              games: {
-                count: e.data.lastPlayedGames.length,
-                total: e.data.lastPlayedGames.length,
-                items: e.data.lastPlayedGames
-              }
-            };
-          }
-          isLoading = false;
-          break;
-
-        case 'CustomOperatorData':
-          operatorSpecifications = e.data.operatordetail;
-          break;
-
-        case "RecentSearchData":
-          searched = true;
-          recentSearched = true;
-          if (e.data.searchData.length > 0) {
-            shownCategoryData = e.data.searchData;
-            showItems = true;
-            if (shownCategoryData) {
-              shownCategoryData.forEach((item:any) => {
-                item.isFavorite = checkFavorite(item.id);
-              });
-            }
-          } else {
-            shownCategoryData = [];
-            showItems = false;
-          }
-          break;
-
-        case 'OutOfRecentSearches':
-          searched = false;
-          recentSearched = false;
-          break;
-
-        case "SearchData":
-          searched = true;
-          recentSearched = false;
-          shownCategoryData = e.data.searchData.items || [];
-          searchItem = true;
-          if (e.data.receivedFavoriteResults) {
-            favoriteGames = e.data.receivedFavoriteResults.items;
-          }
-          if (shownCategoryData) {
-            shownCategoryData.forEach((item:any) => {
-              item.isFavorite = checkFavorite(item.id);
-            });
-          }
-          break;
-
-        case `CategoryData_${categoryid}`:
-          searched = false;
-          lobbyView = true;
-          addfilterselector = 'false';
-          addsortingselector = 'false';
-          searchItem = false;
-          validObservers = false;
-          if (e.data.receivedFavoriteResults) {
-            favoriteGames = e.data.receivedFavoriteResults.items;
-          }
-          getData(e.data.categoryId, 0, e.data.visiblegames).then((res:any) => {
-            categoryData = res;
-            shownCategoryData = categoryData.games.items;
-            maxTotal <= e.data.visiblegames ? showLoadCategory = false : showLoadCategory = true;
-
-            if (shownCategoryData) {
-              shownCategoryData.forEach((item:any) => {
-                item.isFavorite = checkFavorite(item.id);
-              });
-            }
-          });
-          break;
-
-        case 'CategoryChange':
-          limit = 20;
-        break;
-
-        case 'ApplySorter':
-          categoryid = e.data.itemId;
-          sortedBy = e.data.sortBy;
-
-          getData(categoryid, 0, limit).then((res:any) => {
-            categoryData = res;
-            shownCategoryData = categoryData.games.items;
-            showLoadCategory = false;
-          });
-          break;
-
-      case 'CategoryUpdate':
-        categoryUpdateHandler(e.data.itemId);
-        break;
-
-        case `SetUnfavoredGame${categoryid}`:
-          removeFavoredGame(`${endpoint}/v1/player/${userid}/favorites`, session, e.data.id);
-        break;
-
-        case `SetFavoredGame${categoryid}`:
-          addFavoredGame(`${endpoint}/v1/player/${userid}/favorites`, session, e.data.id);
-        break;
-
-        case 'UserSessionID':
-          sessionID = e.data.session;
-          playerID = e.data.userID;
-          if (favorites == 'true') {
-            if (playerID && playerID.length && sessionID && sessionID.length > 0) {
-              getFavoritesGames(sessionID, playerID);
-            }
-          }
-        break;
-
-        case 'UpdateFavoredList':
-          if(categoryid === 'FAVORITES') updateFavoredList(e.data.url, e.data.sessionID)
-        break;
-        
-        default:
-          // do nothing
-        break;
-      }
-    } 
-  }
-
-  const categoryUpdateHandler = (itemId:string):void => {
-    searched = false;
-    lobbyView = false;
-    searchItem = false;
-    validObservers = true;
-    isLazyLoading = false;
-    categoryid = itemId;
-    if (categoryid !== 'MOSTPLAYED') {
-      showLoadCategory = false;
-    }
-    if(casinomygames !== 'true') {
-      getData(categoryid, 0, limit).then((res:any) => {
-        categoryData = res;
-        categoryData.games.items.forEach((item:any) => {
-          item.isFavorite = checkFavorite(item.id);
-        });
-        shownCategoryData = categoryData.games.items;
-        showLoadCategory = false;
-        // @TODO: replace this quick fix - when there are only a few category games, the view scrolls to the footer
-        if(shownCategoryData.length < 10 && e.data.origin ==! 'filters') {
-          scrollTop = true;
-          setTimeout(() => {
-            window.postMessage({ type: 'WidgetTopReference', scrollTop }, window.location.href);
-          }, 500);
-        }
-      });
-    }
-  }
-
-  const addFavoriteState = () => {
-    if(categoryData) {
-      shownCategoryData = categoryData.games.items;
-      shownCategoryData.forEach((item:any) => {
-        item.isFavorite = checkFavorite(item.id);
-      });
-    }
-  }
-
-  //Adding fav. statement to variables
-  const checkFavorite = (gameId: string) => favoriteGames?.some(obj => obj.id === gameId) ?? false;
-
-  let addFavoredGame = async (url, sessionID, gameID) => {
-    // Wait for the updateFavoredList to complete
-    await updateFavoredList(url, sessionID);
-    
-    if (!listOfGamesIDs.includes(gameID)) {
-      listOfGamesIDs.push(gameID);
-    }
-
-    let data = {
-      items: listOfGamesIDs
-    };
-    
-    let options = {
-      method: "POST",
-      headers: {
-        'X-SessionID': sessionID,
-        'Content-Type': 'application/json',
-        'Accept': 'application/json',
-      },
-      body: JSON.stringify(data)
-    };
-
-    fetch(url, options)
-      .then((res) => res.json())
-      .then(() => {
-        window.postMessage({ type: `AddFavoriteThumbnail_${gameID}` }, window.location.href);
-      })
-      .catch((err) => {
-        console.error('Err', err);
-    });
-  }
-
-  const removeFavoredGame = (url:string, sessionID:string, gameID:string) => { 
-    let options = {
-        method: "DELETE",
-        headers: {
-          'X-SessionID': sessionID,
-        }
-    };
-
-    fetch(`${url}/${gameID}`, options)
-      .then((res:any) => res.json())
-      .then(() => {
-        window.postMessage({ type: `RemoveFavoriteThumbnail_${gameID}` }, window.location.href);
-        updateFavoredList(url, sessionID);
-      });
-      
-      if (listOfGamesIDs.includes(gameID)) {
-      listOfGamesIDs =  listOfGamesIDs.filter(x => {
-        return x != gameID;
-      });
-    }
-  }
-
-  //Fetch fav list and pass to be updated
-  const updateFavoredList = async (url, sessionID) => {
-    let options = {
-      method: "GET",
-      headers: {
-        'X-SessionID': sessionID,
-      }
-    };
-
-    return fetch(url, options)
-    .then((res:any) => res.json())
-      .then((updatedArray:any) => {
-        favoriteGames = updatedArray.items;
-          if (!fetchviaevent) {
-            favoriteGames.forEach((item: any) => {
-              item.isFavorite = checkFavorite(item.id);
-            });
-          } else {
-            favoriteGames.forEach((item: any) => {
-              if (!listOfGamesIDs.includes(item.id)) {
-                listOfGamesIDs.push(item.id);
-              }
-            })
-            addFavoriteState();
-          } 
-
-        if (categoryid === 'FAVORITES') { window.postMessage({ type: 'UpdateFavoritesCount', favoriteGames }); showFavoriteSection(favoriteGames); }
-
-      }).catch((err:any) => {
-        console.error(err);
-      });
-  }
-
-  const showFavoriteSection = (receivedFavoriteResults) => {
-    if (!receivedFavoriteResults) return;
-      let favGameArray;
-      favGameArray = receivedFavoriteResults?.items || receivedFavoriteResults || [];
-      if (favGameArray.length > 0) {
-        favGameArray.forEach((item: any) => {
-          if (item.gameModel) {
-            item.gameModel.isFavorite = true;
-          }
-        });
-      }
-      favoriteGamesData.items = platformFavorite(favGameArray, favoriteGamesData.items);
-      favoriteGamesData.name = "Favorites";
-      isLoading = false;
-  }
-
-  // @TODO categoryId type fix
-  const loadMoreGames = (categoryId:any) => {
-    limit += 1;
-    isLazyLoading = true;
-
-    if (limit <= maxTotal) {
-      getData(categoryId, offset, limit).then((res:any) => {
-        categoryData = res;
-        // @TODO categoryData type fix
-        /**
-         * This check is needed to prevent requests with less items
-         * that started before but ended after the last request to add items to list
-         * This could also use abort controller instead but refactoring is needed
-        */
-        if(categoryData.games.items.length > shownCategoryData.length){
-          shownCategoryData = categoryData.games.items;
-          shownCategoryData.forEach((item:any) => {
-            item.isFavorite = checkFavorite(item.id);
-          });
-        }
-        isLazyLoading = false;
-      });
-    }
-  }
-
-  const addGameTag = (tags:any[]):string => {
-    if (tags?.length === 0) return '';
-
-    let tagName:string = '';
-    let differenceOfTime = 999999999999;
-    let firstToExpire:number;
-
-    const currentDate = new Date(Date.now());
-
-    tags.forEach((tag, index)=> {
-      const startDateOfTag = new Date(tag.schedules[0].startTime);
-      const endDateOfTag = new Date(tag.schedules[0].endTime);
-
-      if (moment(endDateOfTag).diff(currentDate) < differenceOfTime) {
-        differenceOfTime = moment(endDateOfTag).diff(currentDate)
-        firstToExpire = index;
-      }
-
-      if (moment(currentDate).isAfter(startDateOfTag) && moment(currentDate).isBefore(endDateOfTag)) {
-        tagName = tags[firstToExpire].name;
-      }
-    });
-    return tagName;
-  }
-
-  // @TODO categoryId type fix
-  const showCategory = (categoryId:any) => {
-      window.postMessage({ type: `${actionevent}`, itemId: categoryId, showallpage}, window.location.href);
-  }
-
-  const initialSetup = () => {
-    // showFavGamesCategory vs categoryData
-    // favoriteGamesData vs shownCategoryData
-    switch(categoryid) {
-      case 'FAVORITES':
-        if (userid && session) showFavGamesCategory = true;
-      break;
-      case 'MOSTPLAYED':
-          if(casinomygames === 'false' && userid && session) {
-            showFavGamesCategory = false;
-          }
-          break;
-      case 'LASTPLAYED':
-          if(casinomygames === 'false' && userid && session) {
-            showFavGamesCategory = false;
-          }
-          break;
-      default:
-          categoryUpdateHandler(categoryid);
-          break;
-    }
-  }
-
-  const handleVisibilityChange = () => {
-    if (!document[hidden]) {
-      visibilityconnect = 'connect';
-    } else {
-      visibilityconnect = 'disconnect';
-    }
-  }
-
-  const setupObserver = () => {
-    if (validObservers) {
-      thumbnailContainer.forEach((item, index) => {
-        if (item) {
-          // Hack to make sure that I can identify the thumbnail index
-          item.elems_index = index;
-          observer.observe(item);
-        }
-      });
-    }
-  }
-
-  const setActiveLanguage = ():void => {
-    setLocale(lang);
-  }
-
-  const setClientStyling = ():void => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    customStylingContainer.appendChild(sheet);
-  }
-
-  const setClientStylingURL = ():void => {
-    let url:URL = new URL(clientstylingurl);
-    let cssFile:HTMLElement = document.createElement('style');
-
-    fetch(url.href)
-      .then((res:any) => res.text())
-      .then((data:any) => {
-        cssFile.innerHTML = data
-
-        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
-      });
-  }
-
-  onMount(() => {
-      window.addEventListener('visibilitychange', (e) => handleVisibilityChange())
-      window.addEventListener('message', messageHandler, false);
-      
-      
-      return () => {
-        window.removeEventListener('message', messageHandler);
-        window.removeEventListener('visibilitychange', messageHandler);
-      }
-  });
-    
-  $: lang && setActiveLanguage();
-  //Widget is working as standalone when fetchviaevent isn't set
-  $: (fetchviaevent === 'false' || fetchviaevent === '') && endpoint && lang && categoryid && datasource && displayedgamecount && showallbuttongamescount && fetchGamesByCategory(categoryid, displayedgamecount, showallbuttongamescount);
-  //Call the fav. list fetch when widget is standalone
-  $: favorites === 'true' && endpoint && session && userid && getFavoritesGames(session, userid);
-  $: dataloaded && thumbnailContainer && setupObserver();
-  $: lang && categoryid && initialSetup();
-  $: translationurl && setTranslationUrl();
-  $: clientstyling && customStylingContainer && setClientStyling();
-  $: clientstylingurl && customStylingContainer && setClientStylingURL();
-</script>
-
-<div class="CasinoGamesCategorySectionContainer" bind:this={customStylingContainer}>
-  {#if hasErrors}
-    <!-- @TODO diversify error handling -->
-    {#if presentFilters}
-      <p class="SearchLoading">404 Error - No result found.</p>
-    {:else}
-      <p class="SearchLoading">500 Error - Internal Server Error.</p>
-    {/if}
-  {:else}
-    {#if searched}
-      <div class="CasinoGamesContainer">
-        <div class="CasinoGamesHeader Searched {isMobile(userAgent) ? 'CasinoGamesHeaderMobile' : ''}">
-          {#if recentSearched}
-            <h3 class="StatusText">
-              {$_('recentSearchedItems')}
-            </h3>
-          {:else}
-            {#if !shownCategoryData.length}
-              <h3 class="StatusText">
-                {$_('noResults')}
-              </h3>
-            {:else}
-              <h3 class="StatusText">
-                {$_('searchedItems')}
-              </h3>
-            {/if}
-          {/if}
-        </div>
-        {#if shownCategoryData}
-
-          {#if !showItems}
-            <p class="NoSearchResults NoRecentSearches NoRecentSearchesCenter {isMobile(userAgent) ? 'NoRecentSearchesMobile' : ''}">{$_('noRecentSearch')}</p>
-          {/if}
-          <ul class="CasinoGamesGrid SearchedGamesGrid GamesListIncreasedGap">
-            {#each shownCategoryData as gameprops, index}
-              <casino-game-thumbnail
-                class="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
-                part="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
-                session={session}
-                userid={userid}
-                lang={lang}
-                searchitem={searchItem}
-                favorites={favorites}
-                categoryid={categoryid}
-                gamethumbnail={gameprops.thumbnail}
-                gamename={gameprops.name}
-                gamevendor={gameprops.vendor.displayName}
-                gameLaunchUrl={gameprops.launchUrl}
-                gameisnew={gameprops.isNew}
-                gametag={gameprops.advancedTags?.length > 0 && addGameTag(gameprops.advancedTags)}
-                gamecellsize={gameprops.cellSize}
-                gameid={gameprops.id}
-                gamefunmode={gameprops.hasFunMode}
-                {showgamename}
-                {translationurl}
-                gamefavorite={gameprops.isFavorite}
-                {currency}
-                livelobbyendpoint={gameprops.details ? gameprops.href : ''}
-                {clientstyling}
-                {clientstylingurl}
-                {endpoint}
-                {livecasino}
-                {gamepagemodalurl}
-                {integratedgameframedesktop}
-                {integratedgameframemobile}
-              ></casino-game-thumbnail>
-            {/each}
-          </ul>
-        {:else}
-          <p class="SearchWaiting">Waiting</p>
-        {/if}
-      </div>
-    {:else}
-      <div>
-        {#if categoryData}
-          <div class="CasinoGamesContainer">
-            {#if casinomygames !== 'true'}
-              <div class="CasinoGamesHeader">
-                <h3 class="CategoryName" bind:this={categoryName}>
-                  {categoryData.name}
-                </h3>
-                {#if showLoadCategory}
-                  <!-- svelte-ignore a11y-missing-attribute -->
-                  <a class="CategoryNameLink" on:click="{e => showCategory(categoryData.id, categoryData)}">
-                    <span class="CategoryLoadMore">
-                      {$_('viewAll')} ({categoryData.games.total})
-                    </span>
-                  </a>
-                {:else}
-                    <div class="{(addfilterselector == 'true' && addsortingselector == 'true') ? 'CategoryFilterContainer' : ''}">
-                      {#if addfilterselector == "true"}
-                        <casino-filter
-                          {clientstylingurl}
-                          {clientstyling}
-                          {endpoint}
-                          {datasource}
-                          {lang}
-                          {categoryid}
-                          {addfilterselector}
-                          {addsortingselector}
-                          {filterbylogo}>
-                        </casino-filter>
-                      {/if}
-                      {#if addsortingselector == "true"}
-                        <casino-sort
-                          {clientstylingurl}
-                          {clientstyling}
-                          {lang}
-                          {categoryid}
-                          {addsortingselector}>
-                        </casino-sort>
-                      {/if}
-                    </div>
-                {/if}
-              </div>
-            {/if}
-            {#if isLoading && !isLazyLoading}
-              <div class="lds-dual-ring" part="lds-dual-ring"></div>
-            {:else}
-              {#if shownCategoryData.length !== 0 }
-                <ul class="{(favoriteGamesData.items.length === 0 && showFavGamesCategory) ? '' : 'CasinoGamesGrid'}  {(lobbyView && casinogamesgridslider == 'true') ? 'CasinoGamesGridSlider CustomScroll' : '' } GamesListIncreasedGap" bind:this={container}>
-                  {#each shownCategoryData as gameprops, index}
-                  {#if intersecting || nativeLoading}
-                      <casino-game-thumbnail
-                        session={session}
-                        userid={userid}
-                        lang={lang}
-                        class="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
-                        part="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
-                        favorites={favorites}
-                        categoryid={categoryid}
-                        gamethumbnail={gameprops.thumbnail}
-                        gamename={gameprops.name}
-                        gamevendor={gameprops.vendor.displayName}
-                        gameLaunchUrl={gameprops.launchUrl}
-                        gameisnew={gameprops.isNew}
-                        gametag={gameprops.advancedTags?.length > 0 && addGameTag(gameprops.advancedTags)}
-                        gamecellsize={gameprops.cellSize}
-                        gameid={gameprops.id}
-                        gamefunmode={gameprops.hasFunMode}
-                        gamefavorite={gameprops.isFavorite}
-                        {translationurl}
-                        {showgamename}
-                        bind:this={thumbnailContainer[index]}
-                        connectlive={intersectingIndexes[gameprops.id] == 1 ? 'connect' : 'disconnect'}
-                        visibilityconnect={visibilityconnect}
-                        {currency}
-                        livelobbyendpoint={gameprops.details ? gameprops.href : ''}
-                        {clientstyling}
-                        {clientstylingurl}
-                        {endpoint}
-                        {livecasino}
-                        {gamepagemodalurl}
-                        {integratedgameframedesktop}
-                        {integratedgameframemobile}
-                        {casinogamesgridslider}
-                      ></casino-game-thumbnail>
-                    {/if}
-                  {/each}
-                </ul>
-              {:else}
-                <p class="NoSearchResults">{$_('noResults')}</p>
-              {/if}
-            {/if}
-          </div>
-        {:else if showFavGamesCategory}
-            <div class="CasinoGamesContainer">
-              {#if casinomygames !== 'true'}
-                <div class="CasinoGamesHeader">
-                  <h3 class="CategoryName" bind:this={categoryName}>
-                    {$_('favorites')}
-                      <span class="CategoryFavName">({favoriteGamesData.items.length})</span>
-                  </h3>
-                </div>
-              {/if}
-
-              <ul class="{(favoriteGamesData.items.length != 0) ? 'CasinoGamesGrid' : ''}  'GamesListIncreasedGap'}" bind:this={container}>
-                {#if isLoading && !isLazyLoading}
-                  <div class="lds-dual-ring"></div>
-                {:else}
-                  {#if favoriteGamesData}
-                    {#each favoriteGamesData.items as gameprops, index}
-                      {#if gameprops.gameModel}
-                        {#if gameprops.gameModel.isFavorite}
-                          {#if intersecting || nativeLoading}
-                            {#if isMobile(userAgent)}
-                              {#if (gameprops.gameModel.platform.includes("iPad") || gameprops.gameModel.platform.includes("iPhone") || gameprops.gameModel.platform.includes("Android"))}
-                              <casino-game-thumbnail
-                                  class="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
-                                  part="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
-                                  session={session}
-                                  userid={userid}
-                                  lang={lang}
-                                  favorites={favorites}
-                                  categoryid={categoryid}
-                                  gamethumbnail={gameprops.gameModel.thumbnail}
-                                  gamename={gameprops.gameModel.name}
-                                  gamevendor={gameprops.gameModel.vendor.displayName}
-                                  gameLaunchUrl={gameprops.launchUrl}
-                                  gameisnew={gameprops.gameModel.isNew}
-                                  gametag={gameprops.gameModel.advancedTags?.length > 0 && addGameTag(gameprops.gameModel.advancedTags)}
-                                  gamecellsize={gameprops.cellSize}
-                                  gameid={gameprops.gameModel.id}
-                                  gamefunmode={gameprops.gameModel.hasFunMode}
-                                  {showgamename}
-                                  gamefavorite={gameprops.gameModel.isFavorite}
-                                  showfavoredcategory={showFavGamesCategory}
-                                  connectlive={intersectingIndexes[gameprops.id] == 1 ? 'connect' : 'disconnect'}
-                                  visibilityconnect={visibilityconnect}
-                                  {translationurl}
-                                  {currency}
-                                  livelobbyendpoint={gameprops.gameModel.details ? gameprops.gameModel.launchUrl : ''}
-                                  {clientstyling}
-                                  {clientstylingurl}
-                                  {endpoint}
-                                  {livecasino}
-                                  {gamepagemodalurl}
-                                  {integratedgameframedesktop}
-                                  {integratedgameframemobile}
-                                ></casino-game-thumbnail>
-                              {/if}
-                            {:else if gameprops.gameModel.platform.includes("PC")}
-                              <casino-game-thumbnail
-                                class="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
-                                part="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
-                                session={session}
-                                userid={userid}
-                                lang={lang}
-                                {translationurl}
-                                favorites={favorites}
-                                categoryid={categoryid}
-                                gamethumbnail={gameprops.gameModel.thumbnail}
-                                gamename={gameprops.gameModel.name}
-                                gamevendor={gameprops.gameModel.vendor.displayName}
-                                gameLaunchUrl={gameprops.launchUrl}
-                                gameisnew={gameprops.gameModel.isNew}
-                                gametag={gameprops.gameModel.advancedTags?.length > 0 && addGameTag(gameprops.gameModel.advancedTags)}
-                                gamecellsize={gameprops.cellSize}
-                                gameid={gameprops.gameModel.id}
-                                gamefunmode={gameprops.gameModel.hasFunMode}
-                                {showgamename}
-                                gamefavorite={gameprops.gameModel.isFavorite}
-                                showfavoredcategory={showFavGamesCategory}
-                                connectlive={intersectingIndexes[gameprops.id] == 1 ? 'connect' : 'disconnect'}
-                                visibilityconnect={visibilityconnect}
-                                {currency}
-                                livelobbyendpoint={gameprops.gameModel.details ? gameprops.gameModel.launchUrl : ''}
-                                {clientstyling}
-                                {clientstylingurl}
-                                {endpoint}
-                                {livecasino}
-                                {gamepagemodalurl}
-                                {integratedgameframedesktop}
-                                {integratedgameframemobile}
-                              ></casino-game-thumbnail>
-                            {/if}
-                          {/if}
-                        {/if}
-                      {/if}
-                    {:else}
-                      <p class="NoFavoriteGames {isMobile(userAgent) ? 'NoFavoriteGamesMobile' : ''}">
-                          <svg width="198" height="148" viewBox="0 0 198 148" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <rect x="1" y="18.053" width="90.263" height="90.263" rx="12" stroke="var(--emfe-w-color-gray-150, #828282)" stroke-width="1.5"/>
-                            <rect x="106.737" y="56.737" width="90.263" height="90.263" rx="12" stroke="var(--emfe-w-color-gray-150, #828282)" stroke-width="1.5"/>
-                            <circle cx="70.5" cy="32.237" r="31.487" stroke="var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C))" stroke-width="1.5" stroke-dasharray="5 0"/>
-                            <path d="M153.909 81.631a.747.747 0 0 0-.166-1.046l-5.466-3.954a.751.751 0 0 0-.882 1.214l4.859 3.514-3.529 4.858a.75.75 0 1 0 1.215.878l3.969-5.464zm-.725-1.18c-.501.081-.999.159-1.493.233l.223 1.482c.498-.075 1-.153 1.506-.234l-.236-1.48zm-4.457.654c-1.006.133-1.996.253-2.97.36l.162 1.49c.985-.109 1.986-.23 3.002-.364l-.194-1.486zm-5.944.65c-1.01.085-2.002.155-2.978.209l.081 1.496c.991-.054 1.997-.125 3.021-.212l-.124-1.493zm-5.955.326c-1.009.022-2 .026-2.974.01l-.026 1.5c.994.015 2.003.011 3.031-.012l-.031-1.498zm-5.953-.099a61.03 61.03 0 0 1-2.961-.245l-.164 1.49c.995.107 2.006.19 3.035.251l.09-1.496zm-5.898-.641a49.97 49.97 0 0 1-2.907-.56l-.332 1.462c.983.22 1.98.412 2.995.577l.244-1.48zm-5.773-1.298a44.435 44.435 0 0 1-2.807-.92l-.518 1.407c.953.348 1.92.665 2.901.951l.424-1.438zm-5.546-2.027A44.285 44.285 0 0 1 111 76.73l-.702 1.326a45.9 45.9 0 0 0 2.748 1.331l.612-1.37zm-5.23-2.75a49.031 49.031 0 0 1-2.472-1.616l-.861 1.229a50.27 50.27 0 0 0 2.548 1.666l.785-1.278zm-4.851-3.378c-.767-.601-1.529-1.231-2.289-1.891l-.987 1.131c.778.676 1.56 1.322 2.348 1.94l.928-1.18zm-4.486-3.889a74.64 74.64 0 0 1-2.11-2.088l-1.078 1.044a76.17 76.17 0 0 0 2.152 2.13L99.091 68zm-4.143-4.259a97.17 97.17 0 0 1-1.965-2.239l-1.145.972a98.31 98.31 0 0 0 1.996 2.274l1.114-1.007zm-3.867-4.536a127.63 127.63 0 0 1-1.845-2.346l-1.192.914c.624.812 1.246 1.603 1.867 2.373l1.17-.94zm-3.64-4.733c-.58-.788-1.163-1.596-1.749-2.423l-1.225.867c.59.834 1.179 1.649 1.764 2.445l1.21-.89z" fill="var(--emfe-w-color-gray-150, #828282)"/>
-                            <path d="M78 43h11v13H78V43z" stroke="var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C))"/>
-                            <path d="m180 65 2.021 6.219h6.539l-5.291 3.843 2.021 6.22-5.29-3.844-5.29 3.843 2.021-6.219-5.291-3.843h6.539L180 65z" fill="var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C))" stroke="var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C))" stroke-linecap="round" stroke-linejoin="round"/>
-                            <path d="m74 27 2.02 6.219h6.54l-5.29 3.843 2.02 6.22L74 39.437l-5.29 3.843 2.02-6.219-5.29-3.843h6.54L74 27z" stroke="var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C))" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                          </svg>
-                        <span class="NoFavoriteText NoFavoriteTextHighlight">{$_('noFavoritesTitle')}</span>
-                        {#if isMobile(userAgent)}
-                          <span class="NoFavoriteText">{$_('noFavoritesMobile')}</span>
-                        {:else}
-                          <span class="NoFavoriteText">{$_('noFavorites')}</span>
-                        {/if}
-                      </p>
-                    {/each}
-                  {:else}
-                    <p>{$_('waiting')}</p>
-                  {/if}
-                {/if}
-              </ul>
-            </div>
-          {/if}
-      </div>
-    {/if}
-  {/if}
-</div>
-
-
-<style lang="scss">
-  $grid-gap: 16px;
-  $grid-cell-size: 192px;
-  $grid-cell-size-small: 110px;
-  $grid-cell-size-medium: 122px;
-
-  $grid-gap-scroll: 16px;
-  $grid-cell-size-scroll: 182px;
-  $grid-cell-size-medium-scroll: 105px;
-  $grid-cell-size-small-scroll: 100px;
-
-  *, *::before, *::after {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
-
-  .CasinoGamesCategorySectionContainer {
-    container-type: inline-size;
-  }
-
-  .CustomScroll:-webkit-scrollbar-track
-    {
-      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-      border-radius: 5px;
-      background-color: transparent;
-    }
-
-  .CustomScroll::-webkit-scrollbar
-    {
-      height: 5px;
-      background-color: transparent;
-    }
-
-  .CustomScroll::-webkit-scrollbar-thumb
-    {
-      border-radius: 5px;
-      height: 5px;
-      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
-      background-color: rgba(255,255,255,.3);
-    }
-
-  .CategoryName,
-  .StatusText {
-    color: var(--emfe-w-casino-typography, var(--emfe-w-color-contrast, #FFFFFF));
-    font-size: 22px;
-    font-weight: 500;
-  }
-
-  .CategoryLoadMore {
-    font-size: 14px;
-    color: var(--emfe-w-casino-typography, var(--emfe-w-color-contrast, #FFFFFF));
-  }
-
-  .NoSearchResults {
-    color: var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));
-    text-align: center;
-    width: 100%;
-    padding-left: 5px;
-    font-size: 16px;
-  }
-
-  .NoRecentSearches {
-    padding-bottom: 30px;
-  }
-
-  .NoRecentSearchesCenter {
-    text-align: center;
-  }
-
-  .NoFavoriteGames {
-    color: var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));
-    font-size: 16px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 0 20px;
-    height: 20vh;
-    .UnfavoredIcon {
-      width: 50px;
-      height: 50px;
-    }
-    .NoFavoriteText {
-      text-align: center;
-    }
-    .NoFavoriteTextHighlight {
-      font-weight: 600;
-      font-size: 18px;
-      padding: 15px 0;
-    }
-  }
-
-  .NoFavoriteGamesMobile {
-    height: 50vh;
-  }
-
-  .SearchWaiting {
-    grid-column: 1/-1;
-    color: var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));
-    font-size: 13px;
-    text-align: center;
-  }
-
-  .CasinoGamesHeader {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 0 0;
-    margin-bottom: 16px;
-    .CategoryNameLink {
-      display: block;
-      cursor: pointer;
-    }
-
-    .CategoryLoadMore {
-      font-weight: normal;
-    }
-
-    &.Searched {
-      justify-content: center;
-    }
-  }
-
-  .CasinoGamesContainer {
-    width: 100%;
-    margin-top: 24px;
-    padding-bottom: 16px;
-  }
-
-  .CasinoGamesGrid {
-    display: grid;
-    gap: $grid-gap;
-    grid-template-columns: repeat(auto-fill, minmax(min($grid-cell-size, 46%), 1fr));
-    grid-template-rows: repeat(auto-fill, $grid-cell-size);
-    grid-auto-rows: $grid-cell-size;
-    grid-auto-columns: $grid-cell-size;
-    grid-auto-flow: row dense;
-
-    .game-tile-2x1 {
-      grid-row: span 2;
-
-      @container  (max-width: 375px) {
-        grid-row: span 1;
-      }
-    }
-
-    .game-tile-2x2 {
-      grid-row: span 2;
-      grid-column: span 2;
-
-      @container  (max-width: 375px) {
-        grid-row: span 1;
-        grid-column: span 1;
-      }
-    }
-
-    .game-tile-1x2 {
-      grid-column: span 2;
-
-      @container  (max-width: 375px) {
-        grid-column: span 1;
-      }
-    }
-
-    &.GamesListIncreasedGap {
-      gap: $grid-gap + 12;
-    }
-  }
-
-  .CasinoGamesGridSlider {
-    display: grid;
-    gap: $grid-gap;
-    grid-template-columns: repeat(auto-fill, minmax(min($grid-cell-size-scroll, 46%), 2fr));
-    grid-template-rows: repeat(auto-fill, $grid-cell-size-scroll);
-    grid-auto-rows: $grid-cell-size-scroll;
-    grid-auto-columns: $grid-cell-size-scroll;
-    grid-auto-flow: column;
-    overflow-x: auto;
-    overflow-y: hidden;
-    padding-bottom: 5px;
-    overscroll-behavior-x: none;
-
-    .game-tile-2x1 {
-      grid-row: span 2;
-
-      @container (max-width: 375px) {
-        grid-row: span 1;
-      }
-    }
-
-    .game-tile-2x2 {
-      grid-row: span 2;
-      grid-column: span 2;
-
-      @container (max-width: 375px) {
-        grid-row: span 2;
-        grid-column: span 2;
-      }
-    }
-
-    .game-tile-1x2 {
-      grid-column: span 2;
-
-      @container (max-width: 375px) {
-        grid-column: span 1;
-      }
-    }
-
-    &.GamesListIncreasedGap {
-      gap: $grid-gap + 12;
-    }
-  }
-
-  .CategoryFilterContainer {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 20px;
-  }
-
-
-  @container (max-width: 768px) {
-    .CasinoGamesHeader {
-      align-items: unset;
-      flex-direction: row;
-      flex-wrap: wrap;
-    }
-
-    .CategoryName {
-      margin-bottom: 20px;
-    }
-
-    .CategoryFilterContainer {
-      width: 100%;
-    }
-  }
-
-  @container  (min-width: 1100px) {
-    .CasinoGamesGrid {
-      grid-template-rows: repeat(auto-fill, 142px);
-      grid-auto-rows: 142px;
-    }
-  }
-
-  .SearchLoading {
-    display: block;
-    padding: 50px;
-    color: var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));
-  }
-
-  .lds-dual-ring {
-    display: block;
-    width: 80px;
-    height: 80px;
-    margin: 0 auto
-  }
-  .lds-dual-ring:after {
-    content: " ";
-    display: block;
-    width: 64px;
-    height: 64px;
-    margin: 8px;
-    border-radius: 50%;
-    border: 6px solid var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
-    border-color: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)) transparent var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));
-    animation: lds-dual-ring 1.2s linear infinite;
-  }
-  @keyframes lds-dual-ring {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  @container (max-width: 385px) {
-
-  .CasinoGamesGrid {
-    display: grid;
-    gap: $grid-gap;
-    grid-template-columns: repeat(auto-fill, minmax(min($grid-cell-size-small, 46%), 1fr));
-    grid-template-rows: repeat(auto-fill, $grid-cell-size-small);
-    grid-auto-rows: $grid-cell-size-small;
-    grid-auto-columns: $grid-cell-size-small;
-
-    &.GamesListIncreasedGap {
-      gap: $grid-gap;
-      }
-  }
-
-  .CasinoGamesGridSlider {
-    display: grid;
-    gap: $grid-gap-scroll !important;
-    grid-template-columns: repeat(auto-fill, minmax(min($grid-cell-size-small-scroll, 46%), 2fr));
-    grid-template-rows: repeat(auto-fill, $grid-cell-size-small-scroll);
-    grid-auto-rows: $grid-cell-size-small-scroll;
-    grid-auto-columns: $grid-cell-size-small-scroll;
-    grid-auto-flow: column;
-    overflow-x: auto;
-    overflow-y: hidden;
-    padding-bottom: 5px;
-
-    & .GameInnerContainer .GameInfoWrapper .GameInfoName {
-        font-size: 10px !important;
-      }
-    & .GameInnerContainer .GameInfoWrapper .GameInfoVendor {
-        font-size: 10px !important;
-    }  
-  }
-}
-
-@container (max-width: 410px) {
-
-    .CasinoGamesGridSlider {
-      display: grid;
-      gap: $grid-gap-scroll;
-      grid-template-columns: repeat(auto-fill, minmax(min($grid-cell-size-small-scroll, 46%), 2fr));
-      grid-template-rows: repeat(auto-fill, $grid-cell-size-small-scroll);
-      grid-auto-rows: $grid-cell-size-small-scroll;
-      grid-auto-columns: $grid-cell-size-small-scroll;
-      grid-auto-flow: column;
-      overflow-x: auto;
-      overflow-y: hidden;
-      padding-bottom: 5px;
-
-      & .GameInnerContainer .GameInfoWrapper .GameInfoName {
-        font-size: 10px !important;
-      }
-
-      & .GameInnerContainer .GameInfoWrapper .GameInfoVendor {
-        font-size: 10px !important;
-      }  
-    }
-  }
-
-@container (max-width: 480px) {
-
-  .CasinoGamesGrid {
-      display: grid;
-      gap: $grid-gap;
-      grid-template-columns: repeat(auto-fill, minmax(min($grid-cell-size-medium, 46%), 1fr));
-      grid-template-rows: repeat(auto-fill, $grid-cell-size-medium);
-      grid-auto-rows: $grid-cell-size-medium;
-      grid-auto-columns: $grid-cell-size-medium;
-
-      &.GamesListIncreasedGap {
-        gap: $grid-gap;
-      }
-    }
-
-  .CasinoGamesGridSlider {
-    display: grid;
-    gap: $grid-gap-scroll !important;
-    grid-template-columns: repeat(auto-fill, minmax(min($grid-cell-size-medium-scroll, 46%), 2fr));
-    grid-template-rows: repeat(auto-fill, $grid-cell-size-medium-scroll);
-    grid-auto-rows: $grid-cell-size-medium-scroll;
-    grid-auto-columns: $grid-cell-size-medium-scroll;
-    grid-auto-flow: column;
-    overflow-x: auto;
-    overflow-y: hidden;
-    padding-bottom: 5px;
-
-    & .GameInnerContainer .GameInfoWrapper .GameInfoName {
-        font-size: 10px !important;
-      }
-    & .GameInnerContainer .GameInfoWrapper .GameInfoVendor {
-        font-size: 10px !important;
-      }  
-  }
-}
-
-</style>