/* Your base state */
.comicdiv {
    display: block;
    width: 100%; /* Makes sure it fills the Bootstrap column nicely */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    transform: scale(1) translateY(0);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); 
    position: relative;
    z-index: 1; /* Low base z-index */
}

/* Your popped state */
.comicdiv.pop-up {
    transform: scale(1.05) translateY(-10px); 
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.4); 
    z-index: 10; /* Brings the hovered item to the absolute front */
}

.comic-cover-wrap {
    width: 100%;
    height: 250px;
    overflow: hidden; /* Prevents the image from spilling out when it expands */
    position: relative;
}

.comic-cover-wrap img {
    width: 100%;
    height: 100%;
    
    cursor: pointer;
    /* The Magic Line: Crops the image to fill the container without distorting */
    object-fit: cover; 
    
    /* Centers the crop (centers the comic artwork) */
    object-position: center top; 
    
    /* Makes the expansion smooth */
    transition: height 0.3s ease-in-out; 
}

/* This class will be added by jQuery to reveal the full vertical height */
.expanded {
    height: auto; /* Lets it expand to its natural aspect ratio height */
    
    /* Alternatively, if you want a fixed expanded height: */
    /* height: 675px; (keeps the 450px width aspect ratio) */
}

body {
    background-color: #121212;
}