.carousel-multi-item {
    width: 200px;  /* Setting the width */
    height: 200px; /* Setting the height */
    object-fit: cover; /* This makes sure the image covers the full width and height without distortion */
    margin-bottom: 10px; /* Spacing between the image and the title below it */
    float: left; /* This can be removed if using flexbox */
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #ccc;

    display: flex;
    flex-direction: column; /* This ensures the children (img and text) stack vertically */
    align-items: center; /* Center the children horizontally */
    justify-content: center; /* Center the children vertically */
}
.carousel-multi-item img {
    width: 180px;  /* Width minus padding */
    height: 180px; /* Height minus padding and space for text */
    object-fit: cover; /* This makes sure the image covers the full width and height without distortion */
}
.carousel-multi-item-link {
    text-decoration: none;
}
.carousel-multi-item-link:hover .carousel-multi-item img {
    transform: scale(1.05);
    transition: transform 0.3s;
}
.carousel-inner {
    width: 1000px; /* 5 items each of 200px */
    margin: 0 auto; /* center the carousel if its parent is wider */
}
.carousel-control-prev, .carousel-control-next {
    z-index: 1; /* To ensure buttons are always on top */
    opacity: 1; /* To make buttons always visible */
}
.carousel-control-prev:hover, .carousel-control-next:hover {
    opacity: 0.7;
}
.close-to-image {
    margin-top: -50px; /* You can adjust this value to your preference */
    display: block;
}
.close-to-image-offset {
    margin-top: -5px; /* You can adjust this value to your preference */
    display: block;
}