/* ==========================================================================
        1. Thumbnail Container / Group Row Setup
        ========================================================================== */
        .thumbnail-group {
            display: flex;
            flex-wrap: wrap;
            gap: 3rem;
            justify-content: center;
            max-width: 1200px;
            margin: 40px auto;
            padding: 0 20px;
        }
        /* ==========================================================================
        2. Thumbnail Card Wrapper & Image Setup
        ========================================================================== */
        /* The parent wrapper container for each thumbnail unit */
        .thumbnail-card {
            width: 8rem;
            display: flex;
            flex-direction: column;
            cursor: pointer;
            transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 8px;
        }
        /* Updated image selector to target images inside the card */
        .thumbnail-card .mini-thumb {
            width: 8rem;
            height: 8rem;
            object-fit: cover;
            border-radius: 8px;
            background-color: #f0f0f0;
        }
        /* ==========================================================================
        3. Text Descriptor Styling (with Truncation)
        ========================================================================== */
        .thumbnail-card .thumb-description {
            margin-top: 8px;
            font-family: sans-serif;
            font-size: 14px;
            font-weight: 525;
            color: black;
            text-align: center;
            line-height: 1.4;
            width: 100%;             /* Ensures text honors the card width bounds */
            box-sizing: border-box;  /* Includes padding in the total width calculation */
        /* OPTION A: Multi-Line Truncation (Clamped to exactly 2 lines) */
            display: -webkit-box;
            -webkit-line-clamp: 4;   /* Set this to 1, 2, 3, etc. depending on your needs */
            -webkit-box-orient: vertical;
            overflow: hidden;
        /* OPTION B: Single-Line Truncation (Uncomment below and comment out Option A if preferred) */
        /* 
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; 
        */
        }
        /* ==========================================================================
        4. Hover, Focus, and Active Interaction States
        ========================================================================== */
        /* Triggers a subtle premium elevation rise effect on user hover */
        .thumbnail-card:hover {
            transform: translateY(-4px);
        }
        /* Optional: Adds shadow depth to the image itself on hover */
        .thumbnail-card:hover .mini-thumb {
         /*   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); */
            box-shadow: 0 5px 20px rgba(106, 64, 21, 0.50);
        }

        /* Important: Style focus ring for keyboard accessibility users (A11y) */
            .thumbnail-card:focus-visible {
                outline: 3px solid #0076ff;
                outline-offset: 4px;
                transform: translateY(-4px);
            }

        /* Tactile push click down response */
            .thumbnail-card:active {
                transform: translateY(-1px);
            }
            .thumbnail-card:active .mini-thumb {
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            }