/* ==================================================
   SHOWCASE
================================================== */

.showcase{

    padding:180px 0;

}

.showcase-item{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:100px;

    align-items:center;

    min-height:100vh;

}

.showcase-item + .showcase-item{

    margin-top:180px;

}

.showcase-image{

    overflow:hidden;

    border-radius:40px;

}

.showcase-image img{

    width:100%;

    display:block;

    transition:.8s ease;

}

.showcase-image:hover img{

    transform:scale(1.04);

}

.showcase-number{

    display:block;

    font-family:var(--font-heading);

    font-size:120px;

    color:rgba(0,0,0,.08);

    line-height:1;

}

.showcase-category{

    display:block;

    margin:20px 0;

    letter-spacing:4px;

    text-transform:uppercase;

    color:var(--color-accent);

}

.showcase-content h2{

    font-size:clamp(48px,5vw,72px);

    margin-bottom:10px;

}

.showcase-content h3{

    font-weight:400;

    margin-bottom:30px;

    color:var(--color-text-light);

}

.showcase-content p{

    max-width:500px;

    line-height:1.9;

    margin-bottom:40px;

}

.showcase-content a{

    color:var(--color-text);

    text-decoration:none;

    font-weight:600;

}

.reverse{

    direction:rtl;

}

.reverse .showcase-content{

    direction:ltr;

}

.showcase-overlay{

    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:70px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.88),
        rgba(0,0,0,.2),
        transparent
    );

    transition:.5s;

}

.showcase-item:hover .showcase-overlay{

    background:linear-gradient(
        to top,
        rgba(0,0,0,.94),
        rgba(0,0,0,.45),
        transparent
    );

}

.showcase-overlay h2{

    transition:.45s;
}

.showcase-item:hover h2{

    transform:translateY(-8px);

}

.category{

    position:relative;

    display:inline-block;

    margin-bottom:18px;

}

.category::after{

    content:"";

    display:block;

    width:60px;

    height:2px;

    margin-top:12px;

    background:#d8b56d;

    transition:.4s;

}

.showcase-item:hover .category::after{

    width:120px;

}

.showcase-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.4s;

}

.showcase-item:hover .showcase-link{

    gap:18px;

}