/*===========================================
album
===========================================*/

/*-------------------------------------------
album list
-------------------------------------------*/
.albumList{
    --album-col:3;
    --album-item-py:20px;
    --album-item-px:20px;
    --album-text-p:15px;
    --album-fs:1rem;
    list-style:none;
    margin:calc(0px - var(--album-item-py)) calc(0px - var(--album-item-px));
    padding:0;
    display:flex;
    flex-wrap:wrap;
}
    .albumItem{
        padding:var(--album-item-py) var(--album-item-px);
        width:calc(100% / var(--album-col));
    }
        .albumCard{
            display:block;
            box-shadow:0 3px 12px rgba(0,0,0,.1);
            height:100%;
            outline:0;
            position:relative;
        }
            .albumCover{
                margin:0;
                aspect-ratio:16 / 9;
                position:relative;
                overflow:hidden;
            }
                .albumCover::before{
                    content:"";
                    display:block;
                    aspect-ratio:1;
                    width:16px;
                    background-color:#fff;
                    -webkit-mask:url(../images/icon_blank_12x12@2x.png) center / contain no-repeat;
                            mask:url(../images/icon_blank_12x12@2x.png) center / contain no-repeat;
                    position:absolute; top:15px; right:15px; z-index:2;
                    pointer-events:none;
                }
                .albumCover img{
                    display:block;
                    margin:0 auto;
                    object-fit:cover;
                    width:100%;
                    height:100%;
                    transition:.3s;
                }
                .albumCard:focus img,
                .albumCard:hover img{
                    transform:scale(1.03);
                }
            .albumName{
                color:#000;
                font-size:var(--album-fs);
                line-height:1.3;
                padding:var(--album-text-p);
                transition:.2s;
            }
            .albumCard:focus .albumName,
            .albumCard:hover .albumName{
                color:var(--hover-color);
            }
@media screen and (max-width:1024px){
    .albumList{
        --album-item-py:15px;
        --album-item-px:15px;
        --album-fs:.95rem;
    }
}
@media screen and (max-width:820px){/* iPad Air and Portrait */
    .albumList{
        --album-col:2;
        --album-fs:1rem;
    }
}
@media screen and (max-width:576px){
    .albumList{
        --album-item-px:10px;
        --album-text-p:10px;
        --album-fs:.875rem;
    }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .albumList{
        --album-item-py:10px;
        --album-item-px:5px;
    }
}