/*
 * XDCHAT_USERPAGES18D2_OLD_ALBUMS_NATIVE_RESTORE_FINAL
 */

.xdf01-albums{
    margin-top:16px;
    padding:16px;
    border:1px solid rgba(72,179,233,.18);
    border-radius:18px;
    background:
        linear-gradient(
            145deg,
            rgba(6,28,51,.96),
            rgba(5,18,37,.96)
        );
}

.xdf01-albums-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:13px;
}

.xdf01-albums-head span{
    display:block;
    color:#8f6aff;
    font-size:11px;
    font-weight:950;
    letter-spacing:.12em;
}

.xdf01-albums-head h2{
    margin:4px 0 0;
    color:#fff;
    font-size:21px;
}

.xdf01-albums-count{
    min-width:38px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid rgba(70,201,255,.28);
    border-radius:11px;
    background:#082844;
    color:#dff7ff;
    font-weight:950;
}

.xdf01-albums-grid{
    display:grid;
    grid-template-columns:
        repeat(5,minmax(0,1fr));
    gap:11px;
}

.xdf01-album-card{
    min-width:0;
    overflow:hidden;
    border:1px solid rgba(74,177,230,.17);
    border-radius:15px;
    background:#061a31;
    color:#fff;
    text-decoration:none;
    transition:
        transform .16s ease,
        border-color .16s ease;
}

.xdf01-album-card:hover{
    transform:translateY(-2px);
    border-color:rgba(105,205,255,.46);
}

.xdf01-album-cover{
    aspect-ratio:16/10;
    display:grid;
    place-items:center;
    overflow:hidden;
    position:relative;
    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(133,91,255,.42),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #0c4263,
            #24185c
        );
}

.xdf01-album-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.xdf01-album-cover i{
    font-size:30px;
    color:#63dfff;
}

.xdf01-album-body{
    padding:11px;
}

.xdf01-album-body strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
}

.xdf01-album-body small{
    display:block;
    margin-top:5px;
    color:#819caf;
    font-size:10px;
}

.xdf01-album-description{
    margin-top:7px;
    display:-webkit-box;
    overflow:hidden;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    color:#a8bdcc;
    font-size:10px;
    line-height:1.35;
}

.xdf01-album-privacy{
    display:inline-flex;
    margin-top:7px;
    padding:3px 7px;
    border-radius:999px;
    background:#092943;
    color:#8bdcff;
    font-size:9px;
    font-weight:850;
}

@media(max-width:1000px){
    .xdf01-albums-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }
}

@media(max-width:650px){
    .xdf01-albums{
        margin-top:10px;
        padding:11px;
        border-radius:15px;
    }

    .xdf01-albums-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}

@media(max-width:390px){
    .xdf01-albums-grid{
        grid-template-columns:1fr;
    }
}