
        /* Container Setup */
        .expand-gallery {
          display: flex;
          width: 100%;
          height: 600px;
          gap: 0; /* No gap for seamless look */
        }

        /* Panel Base Styles */
        .expand-panel {
          position: relative;
          flex: 1; /* Default state: all equal */
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          border-right: 1px solid rgba(255,255,255,0.1);
          cursor: pointer;
          transition: flex 0.7s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth ease-out */
          overflow: hidden;
        }
        
        .expand-panel:last-child {
           border-right: none;
        }

        /* Desktop Hover Interaction */
        @media (min-width: 769px) {
            .expand-panel:hover {
              flex: 6; /* Expand significantly */
            }
            .expand-panel:hover .panel-overlay {
               background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
            }
            .expand-panel:hover .panel-content {
               opacity: 1;
            }
            .expand-panel:hover .panel-desc {
               opacity: 1;
               max-height: 100px; 
               transform: translateY(0);
               margin-bottom: 1rem;
            }
            .expand-panel:hover .panel-btn {
               opacity: 1;
               transform: translateY(0);
            }
            .expand-panel:hover .panel-num {
               opacity: 0.8;
               color: #D21E2B; 
               transform: translateY(-10px) scale(0.8);
               transform-origin: left bottom;
            }
        }

        /* Dark Overlay */
        .panel-overlay {
           position: absolute;
           inset: 0;
           background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.8) 100%);
           transition: background 0.3s ease;
           z-index: 1;
        }

        /* Text Content Handling */
        .panel-content {
           position: relative;
           z-index: 2;
           color: white;
           opacity: 0.8;
           transition: opacity 0.3s ease, transform 0.5s ease;
        }

        .text-wrapper {
           max-width: 400px;
           min-width: 200px; 
        }

        .panel-num {
           font-size: 4rem;
           font-weight: 900;
           line-height: 1;
           opacity: 0.2;
           margin-bottom: -10px;
           transform: translateY(0);
           transition: all 0.5s ease;
        }
        
        .panel-title {
           font-weight: 800;
           font-size: 2rem;
           text-transform: uppercase;
           letter-spacing: 2px;
           margin-bottom: 0.5rem;
           white-space: nowrap;
        }

        .panel-desc {
           font-size: 1.1rem;
           font-weight: 300;
           opacity: 0; /* Hidden by default */
           max-height: 0;
           overflow: hidden;
           transform: translateY(20px);
           transition: all 0.5s ease;
        }
        
        .panel-btn {
           opacity: 0;
           transform: translateY(20px);
           transition: all 0.6s ease 0.1s;
        }

        /* Mobile Responsiveness & Interaction */
        @media (max-width: 768px) {
           .expand-gallery {
              flex-direction: column;
              height: auto;
           }
           .expand-panel {
              height: 100px; /* Collapsed Height */
              flex: none; 
              width: 100%;
              transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
              border-bottom: 1px solid rgba(255,255,255,0.2);
           }
           
           /* --- Mobile Optimization: Prevent Text Cutoff --- */
           
           /* In collapsed state: Shrink font, reduce padding, allow wrap */
           .panel-title {
               font-size: 1.1rem; 
               white-space: normal; /* Allow wrap on mobile */
               margin-bottom: 0.25rem;
               line-height: 1.2;
           }
           
           .panel-num {
               font-size: 1.5rem; /* Shrink number significantly */
               margin-bottom: 0;
           }
           
           .panel-content {
               padding: 1rem !important; /* Tighter padding for mobile strip */
               align-items: center !important; /* Center vertically in the strip */
               justify-content: flex-start !important; /* Align left */
           }
           
           .text-wrapper {
               width: 100%;
           }

           /* --- Active State (Expanded) --- */
           
           /* Mobile Active State (Clicked) */
           .expand-panel.active {
              height: 450px; /* Expanded Height */
           }
           
           /* Restore Sizes when Expanded */
           .expand-panel.active .panel-title {
               font-size: 1.75rem;
               margin-bottom: 0.5rem;
              
           }
           
           .expand-panel.active .panel-num {
               font-size: 3rem;
               margin-bottom: -5px;
           }
           
           .expand-panel.active .panel-content {
               padding: 2rem !important; /* More breathing room when active */
               align-items: flex-end !important; /* Back to bottom alignment */
           }

           /* Active State Effects */
           .expand-panel.active .panel-overlay {
              background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
           }
           
           .panel-content {
               opacity: 0.9;
           }
           .expand-panel.active .panel-content {
               opacity: 1;
           }

           .expand-panel.active .panel-desc {
              opacity: 1;
              max-height: 200px;
              transform: translateY(0);
              margin-bottom: 1rem;
           }
           .expand-panel.active .panel-btn {
              opacity: 1;
              transform: translateY(0);
           }
           .expand-panel.active .panel-num {
              opacity: 0.8;
              color: #D21E2B; 
              transform: translateY(-10px) scale(0.8);
              transform-origin: left bottom;
           }
        }
      