:root{
    --fr-album-ink:#2d2b28;
    --fr-album-muted:#756f67;
    --fr-album-gold:#c9953f;
    --fr-album-cream:#f7f3ea;
    --fr-album-card:#fffdf8;
    --fr-album-line:#e8dfd1;
}

.fr-albums-page{
    min-height:70vh;
    background:var(--fr-album-cream);
    color:var(--fr-album-ink);
    font-family:'Outfit',Arial,sans-serif;
}

.fr-albums{
    width:min(1420px,calc(100% - 48px));
    margin:0 auto;
    padding:44px 0 70px;
}

.fr-albums__head{
    width:min(100%,1120px);
    margin:0 auto 38px;
    padding:26px 32px;
    border:1px solid rgba(197,184,164,.55);
    background:rgba(255,255,255,.72);
    box-shadow:0 1px 0 rgba(75,62,48,.10);
    text-align:center;
}

.fr-albums__head>span{
    display:block;
    margin-bottom:6px;
    color:var(--fr-album-gold);
    font-size:11px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.fr-albums__head h1{
    margin:0;
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:clamp(42px,4.5vw,62px);
    font-weight:600;
    line-height:.95;
}

.fr-albums__head p{
    margin:12px 0 0;
    color:var(--fr-album-muted);
    font-size:14px;
}

.fr-albums__grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:22px;
}

.fr-album-card{
    min-width:0;
}

.fr-album-card__link{
    position:relative;
    display:block;
    overflow:hidden;
    aspect-ratio:1/1;
    border:1px solid rgba(190,144,67,.14);
    border-radius:4px;
    background:var(--fr-album-card);
    box-shadow:0 8px 28px rgba(58,47,35,.07);
    text-decoration:none;
    transform:translateZ(0);
    transition:transform .25s ease,box-shadow .25s ease;
}

.fr-album-card__link:hover{
    transform:translateY(-2px);
    box-shadow:0 13px 34px rgba(58,47,35,.12);
}

.fr-album-card img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .45s cubic-bezier(.22,.61,.36,1);
}

.fr-album-card__link:hover img{
    transform:scale(1.018);
}

.fr-album-card__shade{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(20,18,16,.50),rgba(20,18,16,0) 35%);
    pointer-events:none;
}

.fr-album-card__badge{
    position:absolute;
    top:8px;
    left:8px;
    padding:6px 9px;
    border-radius:4px;
    background:rgba(18,17,15,.88);
    color:#fff;
    font-size:10px;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.fr-album-card__name{
    position:absolute;
    left:14px;
    right:14px;
    bottom:12px;
    overflow:hidden;
    color:#fff;
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:21px;
    font-weight:600;
    line-height:1;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-shadow:0 1px 5px rgba(0,0,0,.30);
}

.fr-albums__sentinel{height:2px}

.fr-albums__loading{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:30px 0 0;
    color:var(--fr-album-muted);
    font-size:13px;
}

.fr-albums__loading span{
    width:18px;
    height:18px;
    border:2px solid #ded4c5;
    border-top-color:var(--fr-album-gold);
    border-radius:50%;
    animation:frAlbumSpin .8s linear infinite;
}

.fr-albums__empty{
    padding:70px 0;
    color:var(--fr-album-muted);
    text-align:center;
}

@keyframes frAlbumSpin{to{transform:rotate(360deg)}}

@media(max-width:1050px){
    .fr-albums__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:720px){
    .fr-albums{
        width:calc(100% - 24px);
        padding:30px 0 44px;
    }
    .fr-albums__head{
        margin-bottom:24px;
        padding:20px 16px;
    }
    .fr-albums__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }
    .fr-album-card__badge{
        top:6px;
        left:6px;
        padding:5px 7px;
        font-size:8px;
    }
    .fr-album-card__name{
        left:10px;
        right:10px;
        bottom:8px;
        font-size:15px;
    }
}