.Product_Page{ .newProductPageV2 { padding: 10px; background-color: var(--themeUltraLight); } .newProductPageV2Main { background-color: #ffffff; padding: 10px; border-radius: 5px; align-items: flex-start; } .imagesV2 { display: grid; grid-template-columns: 130px auto; gap: 10px; align-items: flex-start; position: relative; } .allImages { /* display: grid; grid-template-columns: 1fr; grid-template-rows: 130px; */ gap: 10px; max-height: 600px; overflow: hidden; display: flex; flex-direction: column; } .slideBtn { background-color: #ffffffaa; padding: 5px; position: absolute; text-align: center; width: 120px; z-index: 9; cursor: pointer; left: 0; transition: 0.5s; } .slideBtn:hover { background-color: #ffffff; } .slideBtnTop { top: 0; } .slideBtnBottom { bottom: 0; } .mainImage { position: relative; height: auto; aspect-ratio: 1/1; border: 0.1px solid #00000029; display: flex; align-items: center; justify-content: center; } .zoomSec { position: absolute; bottom: 10px; right: 10px; width: 50px; height: 50px; background-color: var(--btnColor); border-radius: 50%; cursor: pointer; } .zoomSec svg { width: 20px; } .zoomSec svg path { fill: var(--btnTextColor); } .mainImage img { width: 100%; height: 100%; object-fit: contain; } .mainImage video { width: 100%; height: 100%; object-fit: contain; } .imageList { width: 130px; height: 130px; border: 0.1px solid #00000029; position: relative; } .imageList img, .imageList video { width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; } .imagePlayBtn { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 9; display: flex; align-items: center; justify-content: center; font-size: 30px; background-color: #000000aa; color: #ffffff; cursor: pointer; } .slideDescV2Heading { display: grid; grid-template-columns: 1fr 50px; font-weight: 600; font-size: 16px; padding: 10px; border: 0.5px solid #00000019; border-radius: 5px; align-items: center; cursor: pointer; margin-top: 5px; } .headingArrow { display: flex; align-items: center; justify-content: flex-end; } .slideDescV2Desc { padding: 10px; border: 0.5px solid #00000019; margin-top: 5px; } .imagesV2Sticky { position: sticky; top: 160px; } .relatedHeading { font-size: 30px; font-weight: 600; padding: 20px; } @media only screen and (max-width: 900px) { .imagesV2Sticky { position: static; } .imagesV2 { display: flex; flex-direction: column-reverse; width: 100%; } .allImages { height: auto !important; width: 100%; grid-template-columns: repeat(5, 1fr); display: flex; overflow-x: scroll; margin-bottom: 10px; flex-direction: row; } .imageList { flex: 0 0 80px; } .imageList { width: auto; height: auto; } .slideBtn { display: none; } .mainImage { width: 100%; } .relatedHeading { font-size: 20px; } .relatedCon { grid-template-columns: 1fr 1fr; } .elementBox { display: flex; flex-direction: column; text-align: center; font-size: 12px; } .eleIcon { width: 30px; height: 30px; } .newProductPageV2Main { display: block; } .reviewsHeading { grid-template-columns: 1fr 1fr; font-size: 18px; } .newProductPageV2 { padding-bottom: 170px; } .enqBtns, .cartBtns { white-space: nowrap; gap: 5px; margin: 0; } .btnsArea { display: flex; flex-direction: column; gap: 5px; } } .sizeGuide{ display: none; } }.Product_Page{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }