﻿.photo-stack {
    position: relative;
    margin: auto;
    width: 100%; /* Menyesuaikan dengan kolom */
    aspect-ratio: 4 / 3; /* Menjaga aspek rasio */
}

    .photo-stack > p {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        text-align: center;
        z-index: 6;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 5px 0;
    }

    .photo-stack img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%; /* Menyesuaikan dengan stack */
        height: auto; /* Menjaga proporsi */
        border: 1px solid white;
        box-shadow: 0 1px 3px -2px rgba(0,0,0,.5);
        transition: all 0.3s ease-out;
    }

        .photo-stack img:nth-child(1) {
            z-index: 5;
        }

        .photo-stack img:nth-child(2) {
            transform: rotate3d(0,0,1,3deg);
        }

        .photo-stack img:nth-child(3) {
            transform: rotate3d(0,0,1,-3deg);
        }

        .photo-stack img:nth-child(4) {
            transform: rotate3d(0,0,1,2deg);
        }

    .photo-stack:hover img:nth-child(1) {
        transform: scale(1.015); /* Sedikit lebih besar dari sebelumnya */
    }

    .photo-stack:hover img:nth-child(2) {
        transform: translate3d(7%, 0, 0) rotate3d(0,0,1,2.5deg); /* Sebelumnya 5% */
    }

    .photo-stack:hover img:nth-child(3) {
        transform: translate3d(-7%, 0, 0) rotate3d(0,0,1,-2.5deg); /* Sebelumnya -5% */
    }

    .photo-stack:hover img:nth-child(4) {
        transform: translate3d(2%, -3%, 0) rotate3d(0,0,1,1.5deg); /* Sebelumnya 1%, -2% */
    }

    .photo-stack:hover img:nth-child(5) {
        transform: translate3d(-3%, -2%, 0) rotate3d(0,0,1,1.5deg); /* Sebelumnya -2%, -1% */
    }



@media (max-width: 576px) {
    .photo-stack {
        max-width: 100%;
    }
}
