main {
    width: var(--all-width);
    margin: 4.8rem auto .5333rem;
    background: linear-gradient(180deg, rgba(4, 1, 21, 0) 0%, rgba(4, 1, 21, .7) 34.48%, #030014 82.36%);
    backdrop-filter: blur(.4267rem);
    border: 1px solid #8989892e;
    border-top-color: #a9a9a991;
    border-radius: .2667rem;
    padding: .5333rem;
}

.list {
    margin-bottom: .48rem;
    display: flex;
    flex-direction: column;
}

.list h3 {
    text-align: center;
    font-size: .7467rem;
    margin-bottom: .4rem;
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, .7) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: NZT-48;
}

.big-box {
    display: flex;
    flex-wrap: wrap;
    row-gap: .5333rem;
}

.items {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: radial-gradient(57.89% 132% at 65.79% -35%, rgba(120, 123, 255, .06) 0%, rgba(120, 123, 255, 0) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0) 54.17%, rgba(255, 255, 255, .04) 100%), rgba(255, 255, 255, .01);
    border-radius: 16px;
    padding: 24px 28px;
    position: relative;
    width: 60%;
    margin: 0 auto;
    border: 1px solid rgba(83, 83, 83, 0.781);
    color: #fff;
}

.items .item-top {
    display: flex;
    margin-bottom: .5333rem;
    gap: .4rem;
}

.item-top-right {
    flex: 1;
    max-width: 14.4rem;
    display: flex;
    flex-direction: column;
}

.item-top-right h4 {
    width: 100%;
    color: #f4f0ff;
    font-size: .56rem;
    margin-bottom: .1333rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.item-top-right p {
    width: 100%;
    color: #efedfd99;
    font-size: .4rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.items .img-box {
    width: 13%;
    min-width: 2.1333rem;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
}

.items .img-box::before {
    padding-top: 100%;
}

.item-bot {
    color: #efedfdb3;
    font-size: .48rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 4;
    min-height: 2.4533rem;
}

.addMORE {
    width: 40%;
    margin: .5333rem auto;
    padding: .4rem;
    background: linear-gradient(180deg, rgba(60, 8, 126, 0) 0%, rgba(60, 8, 126, .42) 100%), rgba(113, 47, 255, .24);
    box-shadow: inset 0 0 12px #bf97ff70;
    color: #f4f0ff;
    border-radius: 26.64rem;
    font-size: .56rem;
    text-transform: uppercase;
}

@media screen and (max-width:769px) {
    main {
        padding: .2133rem;
        margin-top: 0;
    }

    .items {
        width: 100%;
        padding: .2667rem;
    }

    .item-top-right {
        max-width: 5.6rem;
    }

    .item-top-right h4 {
        font-size: .5067rem;
    }

    .item-bot {
        font-size: .4267rem;
        min-height: 2.1333rem;
    }

    .addMORE {
        width: 100%;
    }
}