/* =======================
WORKS
======================= */

:root{
    --space: clamp(100px, 8vw, 280px);
}

.works-page{

    overflow-y:auto;
    height: auto;
}

.works-scale{
    width:3840px;
    height:2160px;
    transform-origin: top left;
}
.works-container{

    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding-top: calc(var(--space) * 1.5);
    padding-bottom: calc(var(--space) * 2.5);

    display:flex;
    flex-direction:column;

    align-items:center;

    gap: calc(var(--space) * 1.5);
}

/* =======================
ARCHIVE CARD
======================= */

.archive-card{

    width: clamp(280px, 80vw, 1000px);

    aspect-ratio:1000/750;

    height:auto;

    position:relative;

    cursor:pointer;
    
    display:block;
    text-decoration:none;
    color:inherit;
    
}

.archive-frame{

    width:100%;
    height:100%;

    position:relative;
}

.folder-image{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:contain;

    z-index:1;
}

/* =======================
PREVIEW
======================= */

.preview-stack{

    position:absolute;

    top:clamp(80px, 10%, 140px);

    left: 55%;

    transform:translateX(-50%);

    width:100%;

    z-index:3;
}

.preview-stack img{

    position:absolute;

    width:40%;

    left:22%;

    box-shadow:
    0 10px 25px rgba(0,0,0,.15);

    transition:.7s ease;
}

.preview-stack img:nth-child(1){

    transform:
    translate(0,0)
    rotate(-5deg);

    z-index:3;
}

.preview-stack img:nth-child(2){

    transform:
    translate(35px,15px)
    rotate(4deg);

    z-index:2;
}

.preview-stack img:nth-child(3){

    transform:
    translate(70px,30px)
    rotate(-2deg);

    z-index:1;
}

/* Hover */

.archive-card:hover .preview-stack img:nth-child(1){
    transform:
        translate(calc(-22vw), -10px)
        rotate(-4deg);
}

.archive-card:hover .preview-stack img:nth-child(2){
    transform:
        translate(0px, 8px)
        rotate(0deg);
}

.archive-card:hover .preview-stack img:nth-child(3){
    transform:
        translate(calc(22vw), -10px)
        rotate(4deg);
}

/* =======================
TITLE
======================= */

.archive-title{

    position:absolute;

    top:1%;
    left: 27%;

    z-index:5;

    color:#4d3920;

    font-size:22px;

    font-weight:600;

    letter-spacing:1px;
}

@media (max-width:768px){

    .works-container{

        gap: clamp(130px, 10%, 180px);

        margin:0 auto;

        padding-top: clamp(150px, 10%, 220px);
        padding-bottom: clamp(120px, 10%, 220px);
    }

    .archive-title{

        font-size: clamp(6px, 2.5vw, 14px);
    }

    .preview-stack{
        width:69%;
        left:62%;
        top:12%;
        transform:translateX(-50%);
    }

    .preview-stack img{
        width:60%;
        left:0;
    }

    .preview-stack img:nth-child(1){
        transform:translate(0,0) rotate(-3deg);
    }

    .preview-stack img:nth-child(2){
        transform:translate(10px,8px) rotate(2deg);
    }

    .preview-stack img:nth-child(3){
        transform:translate(20px,16px) rotate(-1deg);
    }

}