.img-pin {
    border-radius: 50%;
    box-shadow: 0px 0px 10px 2px gray;
    border: 10px solid #efd038;
}

.img-pin:hover {
    box-shadow: 0px 0px 15px 5px gray; /* Optional: Enhances the shadow */
}

.main-story {
    width: 20vw !important;
    max-width: 30vh !important;
    max-height: 30vh !important;
    z-index: 1 !important;
}

.child-story {
    max-width: 25vh !important;
    max-height: 25vh !important;
    z-index: 1 !important;
    display: inline-block; /* Ensures consistent layout */
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.child-story div {
    min-height: 50px; /* Set the minimum height of the text box */
    display: flex;
    align-items: center;
    justify-content: center; /* Center align the text inside */
    font-size: 90%;
}

.child-story img {
    margin-top: auto; /* Align the image to the bottom of its container */
}

.child-img {
    border: 7px solid #efd038;
}

.child-story:hover {
    transform: scale(1.3); /* Increases size by 30% */
    z-index: 100; /* Ensures the hovered element appears on top */
}

.modal-dialog {
    position: fixed !important;
    top: 10vh !important;
    left: 50% !important;
    transform: translate(-50%, 0) !important;
}