.banner {
    width: 100%;
    max-width: 1308px;
    min-height: 608px; 

    background-image: url('images/mobile.jpg');
    /* @supports (background-image: url('images/mobile.webp')) {
        background-image: url('images/mobile.webp');
      } */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: var(--palette-primary_500);
}

@media (max-width: 600px) {
    .banner{
        padding-top: 0;
    }
    .banner .banner-content {
        justify-content: flex-start;
        padding-bottom: 9em;
    }
    img.banner-image{
        width: 220px;
    }
}

@media (min-width: 600px) {
    .banner {
        background-image: url('images/tablet.jpg');
        /* @supports (background-image: url('images/tablet.webp')) {
            background-image: url('images/tablet.webp');
          } */
    }
    img.banner-image{
        width: 280px;
    }
}
@media (min-width: 972px) {
    .banner {
        height: initial;
        min-height: 680px;
        background-image: url('images/desktop.jpg');
        /* @supports (background-image: url('images/desktop@2x.webp')) {
            background-image: url('images/desktop@2x.webp');
          } */
        background-position: bottom;
    }
}
@media (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) and (min-width: 972px) {
    .banner {
        background-image: url('images/desktop@2x.jpg');
        /* @supports (background-image: url('images/desktop@2x.webp')) {
            background-image: url('images/desktop@2x.webp');
          } */
    }
}

/* Beacon Input field fix */
.BcnFilledInput-root:hover{
    background-color: #fff !important;
}


.product-component{
    background-image: url('images/product/product-bg-mobile@2x.jpg');
    background-position: center center;
    background-size: cover;
}
@media (min-width: 636px) {
    .product-component {
        background-image: url('images/product/product-bg-desktop@2x.jpg');
    }
}

.product-logo {
    width: 100%;
    object-fit: cover;
}

.video-container {
    position: relative;
    width: 100%;
    padding-top: 63%;
    overflow: hidden;
}

.product-video {
    position: absolute;
    top: 25%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 69%;
    z-index: 1;
}

.frame {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
}

.product-video::-webkit-media-controls {
    opacity: 0;
}

.product-video:hover::-webkit-media-controls {
    opacity: 1;
}


.product-jackpot{
    background-image: url('images/jackpot-block-vgn.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 137px;
    width: auto;
    position: relative;
    margin: 0 auto;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

@media (min-width: 636px) {
    .product-jackpot{
        height: 148px;
    }
}

.product-jackpot p, .product-jackpot, .winners-component, .winners-component p{
    color: var(--palette-on-primary-high-emphasis) !important;
}

.winners-component .splide *{
    color: var(--palette-on-background-high-emphasis) !important;
}

.winners-component .splide span {
    color: var(--palette-primary_500) !important;
}

.winners-component {
    background-image: url('images/brand-bg-mobile@2x.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

@media (min-width: 636px) {
    .winners-component{
        background-image: url('images/brand-bg-desktop@2x.jpg');
    }
}


/* Label adjustment */

.design-detail{
    position: relative;
    left: 5%;
}