/* CASES */

.top_hack {
    padding-top: var(--box-space) !important;
}

.case_grid img {
    height: 100%;
    width: 100%;
   
}

/* TABLE HOVER */
.post {
    display: flex;
    flex-direction: column;
    position: relative;
    
}

.post_bg {
    display: block;
    width: 100%;
    height: 100%;
}

.grid a {
    transition: var(--ani-m) var(--easing);
}

.grid a .post_bg {
    opacity: 0.5;
    transition: var(--ani-m) var(--easing);
}

.grid a:hover {
    opacity: 1 !important;
    transition: var(--ani-m) var(--easing);
}

.grid a:hover .post_bg {
    opacity: 1 !important;
    transition: var(--ani-m) var(--easing);
}

.grid .description {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.grid a .client::before {
    display: inline-block;
    content: "\2197\fe0e";
    opacity: 0;
    margin-left: calc(var(--f_s) * -0.65);
    transform: rotate(-45deg);
    transition: var(--ani-m) var(--easing);
}

.grid a:hover .client::before {
    opacity: 1;
    margin-left: 0;
    margin-right: var(--tight);
    transform: rotate(0deg);
    transition: var(--ani-m) var(--easing);
}

.grid a::before {
    content: "";
}

.grid a:hover{
    margin: 0;
}

.grid .case__reel {
    grid-column: 2 / span 10;
    margin-bottom: var(--box-space)
}

    #case_film {
        /* height: 100%; */
        width: 100%;
        aspect-ratio: 16 / 9;
    }


.grid .case__big {
    grid-column: 3 / span 8;
}

.grid .case__tall {
    grid-column: span 3;
}

.grid .case {
    grid-column: span 5;
    align-self: flex-end;
}

    .case .post_bg {
        aspect-ratio: 16 / 9;
        object-fit: cover;
        object-position: 50% 50%;

    }

.grid .spacer {
    place-self: center stretch;
}

.case__big {
    width: 100%;
}

.case__big .post_bg {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 50% 50%;
}

.case__square {
    grid-column: span 6;
    aspect-ratio: 1 / 1;
}

    .case__square .post_bg, .case__square mux-player {
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: 50% 50%;

    }

.case__tall {
    width: 100%;
}

    .case__tall .post_bg, .case__tall mux-player {
        aspect-ratio: 9 / 16;
        object-fit: cover;
        object-position: 50% 50%;

    }

/*          FOOTER          */
.grid .footer_case {
    grid-column: span 2;
    height: max-content;
}

.footer_case .post_bg {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 50% 50%;

}


/*          EXPERIMENTS         */

.xp .description {
    margin-top: var(--unit);
}
    .xp .xp_name {
        max-width: 30ch;
    }

    .xp .xp_desc {
        max-width: 40ch;
        min-width: 20ch;
    }


/*          MOBILE          */    

@media only screen and (max-width: 900px) {
    
    
    .top_hack {
        padding-top: calc(var(--box-space) + var(--f_s)) !important;
    }

    
    .grid .case__reel {
        grid-column: -1 / 1;
        max-width: 1920px;
        max-height: 1080px;
        aspect-ratio: 16/9;
        margin-left: calc(var(--space) * -1);
        margin-right: calc(var(--space) * -1);
    }

    .grid .case__big {
        width: 100%;
        grid-column: -1 / 1;

    }

        .case__big .post_bg {
            aspect-ratio: 3 / 4;
        }

    .grid .case__square {
        grid-column: 2 / span 10;
    }

    .grid .case__tall {
        grid-column: 2 / span 10;
    }

        .case__tall .post_bg {
            aspect-ratio: 2 / 3;
        }
    
    .grid .case {
        grid-column: -1 / 1;
    }

    .grid a {
        opacity: 1;
    }

    .grid a .post_bg {
        opacity: 1;
    }

    .grid a .client::before {
        opacity: 1;
        margin-left: 0;
        transform: rotate(0deg);
        margin-right: var(--tight);
    }

    .grid .footer_case {
        grid-column: -1 / 1;
    }
}


/*

TO SOLVE FOR MOBILE

RESET GRID => 100vw and 100vw+padding
RESET FLEXBOX => Stack 

AR 1:1 for case--big
AR 1:2 for tall
AR 16:9 for regular

DEFAULT OPACITY 1
Enable ::before

*/