/* Responsive Breakpoints */
@media (max-width: 1199px) {
    .main-content {
        flex-direction: column;
    }

    .gallery {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
        order: 2; /* Gallery appears at bottom */
    }

    .book-section {
        width: 100%;
        order: 1; /* Book appears at top */
    }
}

@media (max-width: 900px) {
    .book {
        width: 100%;
        max-width: 600px;
        height: 450px;
    }
    
    .page {
        width: 50%;
        height: 450px;
    }
    
    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .controls {
        justify-content: center;
    }
}