/**
 * Image + Content Block 
 *
 * @package Luckyparty
 */

.image-content {
    color: #F0FCFF;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 36px; /* 225% */
    margin-top:var( --section-top-padding);
    display:flex;
    flex-direction: column;
    gap:20px;
}
.image-content h2 {
    background: linear-gradient(270deg, #FF00B7 -0.86%, #FFF 74.08%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-size: 34px;
    font-style: italic;
    font-weight: 900;
    line-height: 35px; /* 102.941% */    
}
.image-content ul {
    list-style: none;
    padding:0;
    display:flex;
    flex-direction: column;
    gap: 20px;
}
.image-content ul li {
    border-radius: 40px;
    border: 1px solid #1B1B1E;
    background: #27272A;
    backdrop-filter: blur(12.5px);
    padding:11px 0;
}
.image-content ul li.bonus:before {
    background-image: url(../../images/promo-code/chest-mobile.webp);
    background-size: contain;
    background-repeat: no-repeat;
    width: 122px;
    height: 130px;
    aspect-ratio: 61/65;    
    content:"";
    display:block;
    z-index:1;
    margin:0 auto;
}

.image-content  .row {
    display:flex;
    flex-direction: column;
}

.image-content ul li div {
    display:flex;
    flex-direction: column;
    align-items: center;
}
.image-content ul li div span {
    display:flex;
    flex-direction: row; 
    align-items: center;
    gap:8px;
}
.image-content ul li div small {
    color:  #FAFAFA;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 240% */
}
.image-content ul li div span.top-line {
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 36px; /* 225% */
}
.image-content ul li div span.bottom-line {
    color: #F0FCFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 900;
    line-height: 36px;    
}
.image-content ul li div span.bottom-line span {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px; /* 257.143% */
}

.image-content ul li div span.gc {
    color: #FFD763;
    font-size: 24px;
    font-weight: 700;
    line-height: 24px; /* 100% */
}
.image-content ul li div span.sc {
    color: #00E5AF;
    font-size: 24px;
    font-weight: 700;
    line-height: 24px; /* 100% */    
}

.image-content ul li > div span.pink {
    color: #FF00B7;
    font-size: 24px;
    font-weight: 700;
    line-height: 24px; /* 75% */
}

.image-content ul li .coin {
    aspect-ratio: 150/150;
    width:30px;
}

.image-content ul .offers .spotlight .wrapper {
    position:relative;
    overflow: hidden;
}
.image-content ul .offers .spotlight .frame {
    aspect-ratio: 286 / 217;
    height:130px;
}

.image-content ul .offers .spotlight .game {
    position: absolute;
    top: 26%;
    left: 54%;
    z-index: -1;
    width: 43%;
    height: auto;
}

@media (min-width:768px) {
    .image-content ul .offers .spotlight .frame {
        aspect-ratio: 532/437;
        height:228px;
    }

    .image-content ul .offers .spotlight .game {
        top: 17%;
        left: 60%;
        width: 37%;        
    }

    .image-content ul .offers .spotlight .wrapper {
        position:absolute;
        bottom:0;
        left:0;
    }


    .image-content ul li.bonus:before {
        background-position: bottom left;
        background-size: contain;    
        height:100%;
        width:50%;
    }
    .image-content ul li.bonus:before {
        background-image: url(../../images/promo-code/chest-desktop.webp);
        aspect-ratio: 319/251;
    }
    .image-content ul li > div {
        width:50%;
        justify-content: center;
    }

    .image-content ul li {
        display:flex;
        flex-direction: row;
        width:100%;
        padding:0;
        height:250px;
        overflow:hidden;
    }
    .image-content ul li .coin {
        width:38px;
    }
    .image-content ul li > div span.top-line {
        font-size:20px;
    }
    .image-content ul li > div span {
        font-size:24px;
    }
    .image-content ul li > div span.sc,
    .image-content ul li > div span.gc,
    .image-content ul li > div span.pink {
        font-size:32px;
    }
    .image-content ul li > div span.bottom-line {
        font-size:16px;
    }
}
@media (min-width:1024px) {
    .image-content ul .offers .spotlight {
        width:65%;
    }
    .image-content ul .offers .spotlight .frame {
        height:145px;
    }
    .image-content ul {
        flex-direction: row;
    }    
    .image-content ul li {
        height:170px;
    }
    .image-content ul li > div {
        width:100%;
    }
    .image-content ul li.bonus:before {
        width:40%;
    }    
}
@media (min-width:1200px) {
    .image-content ul li {
        height:200px;
    }
    .image-content ul li.bonus:before {
        width:100%;
    }    

    .image-content ul .offers .spotlight .frame {
        height: 180px;
    }
}   

@media (min-width:1366px) {
    .image-content  .row {
        flex-direction: row;
    }

    .image-content ul li {
        height:250px;
    }

    .image-content ul .offers .spotlight .frame {
        height: 220px;
    }    
}