.container {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 20Px;
}

.tools {
    padding: 32Px 32Px 20Px 32Px;
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;

    :global {
        .n-input {
            margin-left: auto;
            width: 361Px;
        }
        .n-button.n-button--disabled{
            cursor: initial;
            padding: 0;
        }
    }

    .tagWrap{
        flex: 1;
        margin-right: 20Px;
    }
    .tags{
        padding: 12px 0;
    }
}

.content {
    flex: 1;
    padding: 20Px 36Px 36Px 36Px;
}

.item {
    position: relative;
    width: 214Px;
    cursor: pointer;
    transition: all .3s;

    .cover {
        position: relative;
        overflow: hidden;

        &::before {
            content: '';
            position: absolute;
            top: 107Px;
            left: 0;
            width: 214Px;
            height: 214Px;
            background: #DDF2FF;
            border-radius: 50%;
        }
    }

    &:hover {
        transform: scale(1.1);
    }

    .itemImg {
        position: relative;
        width: 158Px;
        height: 223Px;
        margin: auto;
        background-color: #EDEFF2;
        background-image: url('./icon_default.svg');
        background-repeat: no-repeat;
        background-position: center center;

        &::before {
            content: '';
            position: absolute;
            top: 4Px;
            right: -4Px;
            width: 4Px;
            height: calc(100% - 8Px);
            background-color: #C5C5C5;
            z-index: 1;
            

        }


        &::after {
            content: '';
            position: absolute;
            top: 2Px;
            right: -2Px;
            width: 4Px;
            height: calc(100% - 4Px);
            background-color: #E7E7E7;
            z-index: 2;
        }

        .itemBg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 4;
            background-repeat: no-repeat;
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0.08) 0%, transparent 0.5%), linear-gradient(to right, rgba(0, 0, 0, 0.1) 0.3%, rgba(255, 255, 255, 0.09) 1.1%, transparent 1.3%);
            background-size: 50% 100%, 50% 100%;
            background-position: 0% top, 9% top;
        }

        :global {
            .n-image {
                position: relative;
                width: 100%;
                height: 100%;
                z-index: 3;
            }
        }

        img {
            transition: opacity .3s;
            opacity: 0;
        }

        img[data-loaded="true"] {
            opacity: 1;
        }


    }

    .itemName {
        margin-top: 16Px;
        font-size: 16Px;
        font-weight: 500;
        color: #333;
        text-align: center;
    }
}