#c2888,
#c2892,
#c2890,
#c2894 {
    position: relative;
    width: 300px;               
    height: 330px;              
    background: #ffffff;
    padding: 15px 15px 50px 15px; /* Polaroid-Rahmen */
    box-sizing: border-box;
    box-shadow: 0 12px 25px rgba(0,0,0,0.25);
    border-radius: 4px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -30px; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Desktop: horizontale Verschiebung + Rotation */
#c2888 { transform: translateX(18px) rotate(0deg); }
#c2892 { transform: translateX(-20px) rotate(-2deg); }
#c2890 { transform: translateX(15px) rotate(1.5deg); }
#c2894 { transform: translateX(-17px) rotate(3deg); }

/* Hover-Effekt für Desktop */
@media (hover: hover) {
    #c2888:hover,
    #c2892:hover,
    #c2890:hover,
    #c2894:hover {
        transform: translateX(0) scale(1.05) rotate(0deg);
        box-shadow: 0 18px 35px rgba(0,0,0,0.35);
        z-index: 10;
    }
}

/* Bilder innerhalb der Polaroids */
#c2888 img,
#c2892 img,
#c2890 img,
#c2894 img {
    width: 100%;
    height: calc(100% - 50px); /* Bildhöhe minus unterer Rand */
    object-fit: cover;
    display: block;
}

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
    #c2888,
    #c2892,
    #c2890,
    #c2894 {
        width: 250px;   
        height: 280px;  
    }
    #c2888 { transform: translateX(12px) rotate(0deg); }
    #c2892 { transform: translateX(-12px) rotate(1deg); }
    #c2890 { transform: translateX(12px) rotate(-1.5deg); }
    #c2894 { transform: translateX(-12px) rotate(2deg); }
    #c2888 img,
    #c2892 img,
    #c2890 img,
    #c2894 img { height: calc(100% - 40px); }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
    #c2888,
    #c2890,
    #c2894 {
        width: 70%;       /* kleiner auf Mobile */
        height: auto;
        margin-top: -10px;
        margin-left: auto;
        margin-right: auto;
    }
    
    #c2888 { transform: translateX(0) rotate(1deg); }
    #c2890 { transform: translateX(0) rotate(-1deg); }
    #c2894 { transform: translateX(0) rotate(2deg); }
    #c2888 img,
    #c2890 img,
    #c2894 img { height: auto; }
}


/* Mobile (≤768px) */
@media (max-width: 768px) {
    #c2892 {
        width: 70%;       /* kleiner auf Mobile */
        height: auto;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        transform: translateX(0) rotate(0deg);
    }

    #c2892 img {
        height: auto;
    }
}