{"page":".container {\ndisplay: flex;\nflex-direction: row;\nwidth: 100%;\nmargin-bottom: 40px;\nheight: auto;\n}\n.mobileA {\npadding: 0px 45px;\n}\n.left-side, .right-side {\ndisplay: flex;\nflex-direction: column;\n}\n\n.left-side {\nflex: 1 1 auto;\nmax-width: 50%;\nwidth: 100%;\nmax-width: 600px;\nmargin-right: 20px;\njustify-content: flex-start;\nalign-items: flex-start; /* Align images to the left */\n}\n\n.right-side {\nflex: 1 1 auto;\nmax-width: 40%;\ndisplay: flex;\nflex-direction: column;\njustify-content: flex-start; /* Align descriptions with the top of the image container */\n}\n\n#main-image-container, #main-image-container1, #main-image-container2, #main-image-container3, #main-image-container4 {\ndisplay: flex;\nflex-direction: column;\njustify-content: flex-start;\nwidth: 100%;\nmax-height: 100%;\nalign-items: flex-start;\noverflow: hidden;\n}\n\n#main-image-container img, #main-image-container1 img, #main-image-container2 img, #main-image-container3 img, #main-image-container4 img {\nwidth: 100%;\nheight: auto;\nobject-fit: contain;\nmargin: 0;\nalign-self: flex-start;\n}\n\n#thumbnail-container, #thumbnail-container1, #thumbnail-container2, #thumbnail-container3, #thumbnail-container4 {\ndisplay: flex;\nalign-items: center;\njustify-content: center;\nmargin-top: 10px;\nwidth: 100%;\n}\n\n#thumbnail-container img.thumbnail, #thumbnail-container1 img.thumbnail1, #thumbnail-container2 img.thumbnail2, #thumbnail-container3 img.thumbnail3, #thumbnail-container4 img.thumbnail4 {\nwidth: auto;\nheight: 120px;\nmargin-right: 10px;\ncursor: pointer;\n}\n\n.myDescription, .myDescription1, .myDescription2, .myDescription3, .myDescription4 {\nwidth: 100%;\npadding: 0 10%;\ndisplay: flex;\nflex-direction: column;\njustify-content: flex-start;\nalign-items: flex-start;\nmargin-top: 0;\noverflow: hidden;\n}\n@media (max-width: 768px) {\n.container {\nflex-direction: row;\nwidth: 100%;\nheight: auto; \n}\n\n.left-side, .right-side {\nwidth: 100%;\n}\n\n#main-image-container, #main-image-container1, #main-image-container2, #main-image-container3, #main-image-container4 {\nalign-items: flex-start; /* Align the image to the left */\n}\n\n.myDescription, .myDescription1, .myDescription2, .myDescription3, .myDescription4 {\npadding: 20px 5%;\nwidth: 100%;\nalign-items: flex-start;\n}\n\n#thumbnail-container img.thumbnail, #thumbnail-container1 img.thumbnail1, #thumbnail-container2 img.thumbnail2, #thumbnail-container3 img.thumbnail3, #thumbnail-container4 img.thumbnail4 {\nheight: 50px;\n}\n}\n\n@media (max-width: 600px) {\n.container {\npadding: 20px 0px;\nmin-height: 40vh;\nwidth: 100%;\nheight: auto;\n}\n\n.myDescription, .myDescription1, .myDescription2 {\npadding: 0px 20px;\n}\n\n.mobileA {\npadding: 0px 3%;\n}\n}","js":""}