.custom-card {
    /* background-color: rgba(0, 0, 0, 0.65) !important; */
    background-color: rgba(0, 0, 0, 0.55) !important;
    /* background-color: transparent !important; */
}



/* Make hover effect apply to the entire card */
.image-container {
    position: relative;
    display: inline-block;
    overflow: hidden;  /* Optional: ensures that the image and button don't overflow */
    margin-left:2px;
}

.hover-button {
    position: absolute;
    top: 30%;
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    /* transform: none; */
    display: none;  /* Hidden by default */
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    cursor: pointer;
}

.image-container:hover .hover-button {
    display: block;  /* Show button when hovering over the card */
}

/* Apply opacity transition for the image */
.hover_image {
    opacity: 0.5 !important;  /* Default opacity */
    transition: opacity 0.3s ease;
}

.image-container:hover .hover_image {
    opacity: 0.9 !important;  /* Increase opacity when hovering over the card */
}


/* Apply opacity effect to any other elements you want to change on hover */
.hover_image_faint {
    opacity: 1 !important;  /* Default opacity */
    transition: opacity 0.3s ease;
}

.image-container:hover .hover_image_faint {
    opacity: 0.7 !important;  /* Make faint elements more visible when hovering over the card */
}

/* Optional: if you want to make text bold or change styling on hover */
.image-container:hover .hover_image_faint,
.image-container:hover .hover_image {
    font-weight: bold;
}

/* Generic hover image card.
   Visibility variables are 0/1 booleans; opacity is used only to animate show/hide transitions. */
.image-card__image {
    transition: opacity 0.3s ease;
}

.image-card__image--fade-on-hover {
    opacity: 1 !important;
}

.image-container:hover .image-card__image--fade-on-hover {
    opacity: 0.38 !important;
}

.image-card__image--brighten-on-hover {
    opacity: 0.5 !important;
}

.image-container:hover .image-card__image--brighten-on-hover {
    opacity: 0.9 !important;
}

.image-card__image--no-opacity-change {
    opacity: 1 !important;
}

.image-container:hover .image-card__image--no-opacity-change {
    opacity: 1 !important;
}

.image-card__placeholder {
    opacity: 0.5 !important;
    transition: opacity 0.8s ease;
}

.image-container:hover .image-card__placeholder {
    opacity: 1 !important;
    transition-duration: 0.3s;
}

/* Mouse leave: slower */
.hover_image_filter_grayscale_until_hover {
    /* filter: grayscale(1) saturate(0.8); */
    filter: saturate(0);
    /* transition: filter 0.1s ease, opacity 1s ease; */
    transition:
        filter 1s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);

}

/* Mouse enter: quicker */
.image-container:hover .hover_image_filter_grayscale_until_hover {
    /* filter: grayscale(0) saturate(1.1); */
    filter: saturate(1);
    /* transition: filter 0.1s ease, opacity 0.1s ease; */
    transition:
        filter 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Mouse leave: slower */
.hover_image_filter_grayscale_after_hover {
    filter: saturate(1);
    transition:
        filter 1s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Mouse enter: quicker */
.image-container:hover .hover_image_filter_grayscale_after_hover {
    filter: saturate(0);
    transition:
        filter 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.image-card__title {
    opacity: var(--image-card-title-visible, 1) !important;
    transition: opacity 0.3s ease;
}

.image-container:hover .image-card__title {
    opacity: var(--image-card-title-visible-hover, 1) !important;
}

.image-card__text {
    opacity: var(--image-card-text-visible, 1) !important;
    transition: opacity 0.3s ease;
}

.image-container:hover .image-card__text {
    opacity: var(--image-card-text-visible-hover, 1) !important;
}

.image-card__footer {
    opacity: var(--image-card-footer-visible, 1) !important;
    transition: opacity 0.3s ease;
}

.image-container:hover .image-card__footer {
    opacity: var(--image-card-footer-visible-hover, 1) !important;
}

.image-card__actions {
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: var(--image-card-actions-visible, 0) !important;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 3;
}

.image-container:hover .image-card__actions {
    opacity: var(--image-card-actions-visible-hover, 1) !important;
    pointer-events: auto;
}

.image-card__actions.image-card__actions--interactive {
    pointer-events: auto;
}

.image-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* .item {
    background-color: transparent !important;
} */


.butt-no-transform {
    cursor: default !important;
}
.butt-no-transform:active {
    transform: none !important;
}