/* =========================================
   FOOTER
========================================= */

.playground-footer{
    position:relative;
    overflow:hidden;
    background:transparent;
   border-top:1px solid var(--border);
    padding:80px 80px 100px;
}

.footer-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:100px;
    align-items:start;
}

.footer-status{
    font-size:14px;
    opacity:.65;
    margin-bottom:24px;
}

.footer-title{
    max-width:900px;

    font-size:clamp(3.5rem,8vw,6.5rem);
    line-height:.92;
    letter-spacing:-0.06em;
    font-weight:700;
}

.footer-title em{
    font-style:italic;
    font-weight:400;
}

.footer-right{
    display:flex;
    gap:72px;
    padding-top:12px;
}

.footer-nav-group{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.footer-label{
    font-size:13px;
    letter-spacing:.12em;
    text-transform:uppercase;
    opacity:.5;
    margin-bottom:8px;
}

.footer-nav-group a{
    color:inherit;
    text-decoration:none;
    font-size:22px;
    transition:opacity .2s ease;
}

.footer-nav-group a:hover{
    opacity:.65;
}

/* =========================================
   POSTER WALL
========================================= */

.poster-wall{
    margin-top:80px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    /* align-items:flex-end; */
    gap:10px;
    /* max-width:1400px; */
    margin-left:auto;
    margin-right:auto;
}

/* =========================================
   POSTERS
========================================= */

.poster{
    position:relative;
    background: var(--bg-elevated);
    color:inherit;
    border:1px solid var(--border);
    box-shadow:none;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:18px;
    border:1px solid var(--border);
    box-shadow:
        0 10px 30px var(--shadow);
    transition:
        transform .25s ease,
        box-shadow .25s ease;
    will-change:transform;
}

.poster:hover{
    z-index:10;

    .poster:hover{ 
        transform:
            translateY(-2px)
            rotate(var(--r));

    border-color:var(--blue);
}

    box-shadow:
        0 20px 40px var(--shadow);
}

.poster-art{
    font-size:38px;
    margin-bottom:14px;
    line-height:1;
}

.poster-signature{
    font-size:52px;
    font-weight:700;
    letter-spacing:-0.04em;
}

.poster span{
    font-size:14px;
    line-height:1.45;
}

/* =========================================
   SIZES
========================================= */

.poster-sm{
    width:135px;
    height:170px;
}

.poster-md{
    width:155px;
    height:195px;
}

.poster-lg{
    width:180px;
    height:225px;
}

/* =========================================
   ORGANIC STAGGER
========================================= */

.poster:nth-child(3n){
    margin-top:40px;
}

.poster:nth-child(4n){
    margin-top:70px;
}

.poster:nth-child(5n){
    margin-top:20px;
}

.poster:nth-child(7n){
    margin-top:90px;
}

/* =========================================
   ROTATIONS
========================================= */

.p1  { --r:-6deg; transform:rotate(-6deg); }
.p2  { --r:5deg;  transform:rotate(5deg); }
.p3  { --r:-3deg; transform:rotate(-3deg); }
.p4  { --r:7deg;  transform:rotate(7deg); }
.p5  { --r:-5deg; transform:rotate(-5deg); }
.p6  { --r:4deg;  transform:rotate(4deg); }
.p7  { --r:-2deg; transform:rotate(-2deg); }
.p8  { --r:6deg;  transform:rotate(6deg); }
.p9  { --r:-4deg; transform:rotate(-4deg); }
.p10 { --r:3deg;  transform:rotate(3deg); }
.p11 { --r:-7deg; transform:rotate(-7deg); }
.p12 { --r:5deg;  transform:rotate(5deg); }
.p13 { --r:-3deg; transform:rotate(-3deg); }
.p14 { --r:7deg;  transform:rotate(7deg); }
.p15 { --r:-5deg; transform:rotate(-5deg); }
.p16 { --r:4deg;  transform:rotate(4deg); }
.p17 { --r:-2deg; transform:rotate(-2deg); }
.p18 { --r:6deg;  transform:rotate(6deg); }
.p19 { --r:-4deg; transform:rotate(-4deg); }
.p20 { --r:3deg;  transform:rotate(3deg); }

/* =========================================
   TABLET
========================================= */

@media (max-width:1024px){

    .playground-footer{
        padding:64px 40px 80px;
    }

    .footer-inner{
        grid-template-columns:1fr;
        gap:48px;
    }

    .footer-right{
        gap:48px;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width:768px){

    .playground-footer{
        padding:48px 20px 60px;
    }

    .footer-title{
        font-size:clamp(3rem,14vw,4.5rem);
    }

    .footer-right{
        gap:40px;
        flex-wrap:wrap;
    }

    .poster-wall{
        margin-top:48px;
        display:grid;
        grid-template-columns: repeat(3,1fr);
        /* gap:18px; */
    }

    .poster{
        width:100% !important;
        height:180px;

        margin-top:0 !important;
    }

    .poster-sm,
    .poster-md,
    .poster-lg{
        width:100%;
    }

    .poster-art{
        font-size:30px;
    }

    .poster-signature{
        font-size:42px;
    }

    .poster span{
        font-size:13px;
    }
}