/*====================================

LOOKBOOK
&
GALLERY

====================================*/

.lookbook{

    padding:180px 8%;

    background:#080808;

}

.lookbook h2{

    text-align:center;

    margin-bottom:80px;

}



.lookbook-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

}



.lookbook-grid a{

    position:relative;

    display:block;

    overflow:hidden;

    border-radius:24px;

    background:#111;

    cursor:pointer;

}



.lookbook-grid img{

    width:100%;

    height:620px;

    object-fit:cover;

    transition:1.1s cubic-bezier(.2,.8,.2,1);

}



.lookbook-grid a::after{

    content:"VIEW";

    position:absolute;

    left:35px;

    bottom:35px;

    color:white;

    letter-spacing:5px;

    font-size:13px;

    opacity:0;

    transform:translateY(20px);

    transition:.45s;

}



.lookbook-grid a::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.8),

        transparent

    );

    opacity:0;

    transition:.45s;

    z-index:2;

}



.lookbook-grid a:hover img{

    transform:scale(1.08);

    filter:brightness(.55);

}



.lookbook-grid a:hover::before{

    opacity:1;

}



.lookbook-grid a:hover::after{

    opacity:1;

    transform:translateY(0);

}



/*====================================

EDITORIAL GALLERY

====================================*/

.gallery{

    padding:200px 8%;

    display:grid;

    grid-template-columns:repeat(12,1fr);

    grid-auto-rows:90px;

    gap:22px;

}



.gallery-item{

    overflow:hidden;

    border-radius:26px;

    position:relative;

    cursor:pointer;

    background:#111;

}



.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1.2s;

}



/* Sizes */

.large{

    grid-column:span 6;

    grid-row:span 6;

}



.wide{

    grid-column:span 6;

    grid-row:span 4;

}



.tall{

    grid-column:span 3;

    grid-row:span 6;

}



.gallery-item:not(.large):not(.wide):not(.tall){

    grid-column:span 3;

    grid-row:span 4;

}



/* Overlay */

.gallery-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        180deg,

        transparent,

        rgba(0,0,0,.8)

    );

    opacity:0;

    transition:.45s;

    z-index:2;

}



/* Red Glow */

.gallery-item::after{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:80%;

    height:100%;

    transform:skewX(-20deg);

    background:linear-gradient(

        90deg,

        transparent,

        rgba(193,18,31,.25),

        transparent

    );

    transition:.8s;

    z-index:3;

}



/* Hover */

.gallery-item:hover img{

    transform:scale(1.1);

    filter:brightness(.65);

}



.gallery-item:hover::before{

    opacity:1;

}



.gallery-item:hover::after{

    left:150%;

}



/* Caption */

.gallery-item span{

    position:absolute;

    left:30px;

    bottom:30px;

    color:white;

    letter-spacing:5px;

    font-size:13px;

    opacity:0;

    z-index:4;

    transform:translateY(25px);

    transition:.45s;

}



.gallery-item:hover span{

    opacity:1;

    transform:translateY(0);

}



/*====================================

QUOTE

====================================*/

.quote{

    padding:220px 8%;

    text-align:center;

}



.quote h2{

    max-width:1000px;

    margin:auto;

    font-size:82px;

    line-height:1.2;

}



/*====================================

RESPONSIVE

====================================*/

@media(max-width:1100px){

.lookbook-grid{

grid-template-columns:repeat(2,1fr);

}

.gallery{

grid-template-columns:repeat(2,1fr);

grid-auto-rows:280px;

}

.large,
.wide,
.tall,
.gallery-item{

grid-column:auto;

grid-row:auto;

}

}



@media(max-width:768px){

.lookbook-grid{

grid-template-columns:1fr;

}

.lookbook-grid img{

height:500px;

}

.gallery{

grid-template-columns:1fr;

padding:120px 6%;

}

.quote h2{

font-size:44px;

}

}