body {
            font-family: 'Lora', serif;
        }

        /* Card specific styles */
        .card {
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .card-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
            background: black;
        }

        .card-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            /* Semi-transparent black background */
            color: white;
            padding: 1rem;
            transform: translateY(100%);
            transition: transform 0.3s ease-in-out;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
            /* For readability */
            display: flex;
            /* Use flex to align text within content */
            flex-direction: column;
            justify-content: flex-end;
            /* Align text to bottom */
        }

        .card:hover .card-content {
            transform: translateY(0);
        }

        @media (max-width: 767px) {
            .card.active .card-content {
                transform: translateY(0);
            }

            .card-content {
                /* On small screens, keep the content initially hidden but ready for click */
                transform: translateY(100%);
            }
        }

        .grid-container-custom {
            /* On large screens, define auto-fit rows with a minimum height */
            grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
        }

        /* Ensure standard card images have a consistent height when not spanning */
        /* This rule is now less critical since .card-image height is always 100% of its parent */
        /* However, keeping it for clarity if minmax(250px, 1fr) isn't sufficient for desired visual */
        @media (min-width: 768px) {
            .card:not(.md\:row-span-2):not(.lg\:row-span-2) .card-image {
                /* This effectively means small cards will adapt to 250px height if their parent row is 250px */
            }
        }