/* Custom CSS for showing game titles below the image instead of on hover */

/* Change card body from absolute positioning to relative, and make it visible */
.card-masonry .card .card-body {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    background: var(--body-bg-color) !important;
    color: var(--common-text-color) !important;
    padding: 0.75rem 0.5rem !important;
    margin-top: 0 !important;
    text-align: center !important;
}

/* Change text color for better visibility */
.card-masonry .card h3,
.card-masonry .card .h3 {
    color: #c6c4d1 !important;
    font-weight: 500 !important;
    -webkit-line-clamp: 2 !important; /* Allow 2 lines for longer titles */
}

/* Adjust the margin and padding for improved layout */
.card-masonry .card {
    display: flex !important;
    flex-direction: column !important;
    background-color: var(--body-bg-color) !important;
    border-radius: 1rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.2s ease-in-out !important;
}

.card-masonry .card:hover {
    transform: translateY(-5px) !important;
}

/* Ensure the picture container maintains proper dimensions */
.card-masonry .card picture {
    border-radius: 1rem 1rem 0 0 !important;
    overflow: hidden !important;
}

/* Support for dynamic prefix */
[class*="-card-masonry"] [class*="-card"] [class*="-card-body"] {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    background: var(--body-bg-color) !important;
    color: var(--common-text-color) !important;
    padding: 0.75rem 0.5rem !important;
    margin-top: 0 !important;
    text-align: center !important;
}

[class*="-card-masonry"] [class*="-card"] [class*="-h3"] {
    color: #c6c4d1 !important;
    font-weight: 500 !important;
    -webkit-line-clamp: 2 !important;
}

[class*="-card-masonry"] [class*="-card"] {
    display: flex !important
;
    flex-direction: column !important;
    background-color: var(--body-bg-color) !important;
    border-radius: 1rem !important;
    box-shadow: 0 2px 6px 1px rgb(255 255 255 / 33%) !important;
    transition: transform 0.2s ease-in-out !important;
}



[class*="-card-masonry"] [class*="-card"]:hover {
    transform: translateY(-5px) !important;
}

[class*="-card-masonry"] [class*="-card"] [class*="-picture"] {
    border-radius: 1rem 1rem 0 0 !important;
    overflow: hidden !important;
}