/*
To add more sprites:
 1. put the into sprite-icons.webp
 1.1 if the file dimensions change, chamge the background-size y size multiplier
 2. create a css class with the given grid position inside the webp, just like .sprite-casino
 3. increase webp version to avoid cache problems
*/
:root {
    --sprite-size: 24px; /* Default size */
    --sprite-columns:6;
    --sprite-rows:5;
}

.sprite-l {
    --sprite-size: 32px;
}

.sprite-xl {
    --sprite-size: 40px;
}

.sprite {
    display: inline-block;
    background-repeat: no-repeat; /* Prevent repetition */
    background-size: cover; /* Ensures resizing works */
    width: var(--sprite-size);
    height: var(--sprite-size);
    background-size: calc(var(--sprite-size) * var(--sprite-columns)) calc(var(--sprite-size) * var(--sprite-rows)); /* Adjust background scaling */
}

.sprite-bonus-central {
    background-position: 0 0;
}

.sprite-bonuses {
    background-position: calc(var(--sprite-size) * -1) 0;
}

.sprite-tournaments {
    background-position: calc(var(--sprite-size) * -2) 0; 
}

.sprite-cashback {
    background-position: calc(var(--sprite-size) * -3) 0; 
}

.sprite-promotions {
    background-position: calc(var(--sprite-size) * -4) 0; 
}

.sprite-my-games {
    background-position: calc(var(--sprite-size) * -5) 0; 
}

.sprite-rtp {
    background-position: calc(var(--sprite-size) * 0) calc(var(--sprite-size) * -1); 
}

.sprite-casino {
    background-position: calc(var(--sprite-size) * -1) calc(var(--sprite-size) * -1); 
}

.sprite-lobby {
    background-position: calc(var(--sprite-size) * -2) calc(var(--sprite-size) * -1); 
}
.sprite-providers {
    background-position: calc(var(--sprite-size) * -3) calc(var(--sprite-size) * -1); 
}
.sprite-top-games {
    background-position: calc(var(--sprite-size) * -4) calc(var(--sprite-size) * -1); 
}
.sprite-slots {
    background-position: calc(var(--sprite-size) * -5) calc(var(--sprite-size) * -1); 
}
.sprite-new-games {
    background-position: calc(var(--sprite-size) * 0) calc(var(--sprite-size) * -2); 
}
.sprite-megaways {
    background-position: calc(var(--sprite-size) * -1) calc(var(--sprite-size) * -2); 
}
.sprite-jackpots {
    background-position: calc(var(--sprite-size) * -2) calc(var(--sprite-size) * -2); 
}
.sprite-hold-wins {
    background-position: calc(var(--sprite-size) * -3) calc(var(--sprite-size) * -2); 
}
.sprite-books {
    background-position: calc(var(--sprite-size) * -4) calc(var(--sprite-size) * -2); 
}
.sprite-live-games {
    background-position: calc(var(--sprite-size) * -5) calc(var(--sprite-size) * -2); 
}
.sprite-table-games {
    background-position: calc(var(--sprite-size) * 0) calc(var(--sprite-size) * -3); 
}
.sprite-account-statement {
    background-position: calc(var(--sprite-size) * -1) calc(var(--sprite-size) * -3); 
}
.sprite-my-account {
    background-position: calc(var(--sprite-size) * -2) calc(var(--sprite-size) * -3); 
}
.sprite-my-documents {
    background-position: calc(var(--sprite-size) * -3) calc(var(--sprite-size) * -3); 
}
.sprite-responsible-gaming {
    background-position: calc(var(--sprite-size) * -4) calc(var(--sprite-size) * -3); 
}
.sprite-my-bonuses {
    background-position: calc(var(--sprite-size) * -5) calc(var(--sprite-size) * -3); 
}
.sprite-game-history {
    background-position: calc(var(--sprite-size) * 0) calc(var(--sprite-size) * -4); 
}
.sprite-scratch-cards {
    background-position: calc(var(--sprite-size) * -1) calc(var(--sprite-size) * -4); 
}
.sprite-bingo {
    background-position: calc(var(--sprite-size) * -2) calc(var(--sprite-size) * -4); 
}
.sprite-vip-benefits {
    background-position: calc(var(--sprite-size) * -3) calc(var(--sprite-size) * -4); 
}
.sprite-sports {
    background-position: calc(var(--sprite-size) * -4) calc(var(--sprite-size) * -4); 
}