@import "../../../global.scss";
.topCollection3Card{
    border-radius: 10px;
    overflow: hidden;
    width: 280px;
    margin-bottom: 40px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    align-items: center;
    justify-content: center;
    display: flex;
    @include mobile_potrait{
        margin-bottom: 24px;
        width: 100%;
    }

    img {
        width: 100%;
    }
    .nft-content {
        border-radius: 10px;
        z-index: 1;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        

        @include mobile_potrait{
            padding: 8px;
        }
        .img_div{
            width: 118px;
            height: 118px;
            position: relative;
            overflow: visible;
            margin-bottom: 16px;
            .img_cover{
                position: absolute;
                width: 100%;             
                height: 100%;
                // background-image: linear-gradient(108deg,rgb(255, 198, 255) 16%,#c1fefe);
                top : 0;
                left : 0;
            }

            .item-image {
                border-radius: 20px;
            }

            .badge {
                position: absolute;
                width: 40px;
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 20.412px;
                font-style: normal;
                font-weight: 500;
                line-height: 115%; /* 23.474px */
                letter-spacing: 0.155px;
                border-radius: 20px;
                backdrop-filter: blur(35.72071838378906px);
                bottom: -9px;
                right: -9px;

                &.badge-0 {
                    background: #FFDD28;
                    color: #EA9F06;
                }

                &.badge-1 {
                    background: #D4E4E8;
                    color: #81A5B0;
                }

                &.badge-2 {
                    background: #F8BD88;
                    color: #D39357;
                }
            }
        }
        .item-image{   
            position: absolute;
            width: 100%;             
            height: 100%;
            object-fit: cover;
            top : 0;
            left : 0;
        }   
    }
    .nft-detail-content {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        .nft-title {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;            
            font-weight: 600;
            margin-bottom: 30px;
            text-align: center;
            font-size: 30px;
            font-style: normal;
            font-weight: 500;
            line-height: 115%;
            letter-spacing: 0.232px;
            width: 100%;
            @include mobile_potrait{
                font-size: 16px;
            }
        }
        .col_div {
            width: 100%;
            display: flex;
            flex-direction: column;
            grid-area: auto;
            gap : 12px;
            .row_div{
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
            }
            .sub_text {
                font-size: 14px;
                font-weight: normal;
                text-transform: uppercase;
                margin-bottom: 0;
                margin: 0;
                width: fit-content;
                span{
                    font-weight: 700;
                }
                .color1 {
                    color: #E94949;  
                }
                .color2 {
                    color: #28B833;           
                }
            }
            
            
            .text_color_1_dark{
                font-weight: 700;
            }
            .text_color_1_light{
                font-weight: 700;
            }
            @include mobile_potrait{
                font-size: 14px;
            }
        }
    }
}
