.Product_Page{ .stargas_pdp { padding: 50px 0px; background-color: var(--themeBg1); background-position: center; background-repeat: no-repeat; background-size: cover; } .custGrid { grid-template-columns: 1.5fr 1fr; } .leftGrid { grid-template-columns: 120px 1fr; } .outerSec { border-radius: 5px; overflow: hidden; padding: 10px; background-color: var(--themeBg2); margin-bottom: 10px; } .leftInnerSec { max-height: 600px; overflow: hidden; } .swiper { width: 100%; height: 100%; } .imgSec { aspect-ratio: 1/1; line-height: 0px; overflow: hidden; border-radius: 5px; border: 1px solid #e9e9e9; } .arrowSec { pointer-events: none; position: absolute; left: 0px; bottom: 0px; right: 0px; top: 0px; width: 100%; z-index: 1; } .arrows { pointer-events: all; width: calc(100% - 20px); padding: 5px 10px; background-color: rgba(255, 255, 255, 0.8); cursor: pointer; user-select: none; } .arrows svg { width: 18px; height: 18px; stroke: #000; } .bigImgSec { line-height: 0px; border-radius: 5px; aspect-ratio: 1/1; overflow: hidden; border: 1px solid #e9e9e9; } .bigImgSec .contain { width: 100%; height: 100%; object-fit: contain; } .outerInfoSec { border-radius: 5px; overflow: hidden; background-color: var(--themeBg2); padding: 10px; background-position: top left; background-repeat: repeat; background-size: auto; } .tabSec { padding: 10px; background-color: var(--themeBg1); width: fit-content; border-radius: 5px; } .tab { min-width: 100px; padding: 10px; text-align: center; border-radius: 5px; font-size: 14px; font-weight: 500; cursor: pointer; position: relative; z-index: 1; transition: 0.4s; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 5px; } .active { color: var(--btnTextColor); } .tab::after { position: absolute; content: ""; top: 0; left: auto; right: 0; width: 0%; height: 100%; background-color: var(--btnColor); transition: 0.4s; z-index: -1; } .tab:hover::after { width: 100%; right: auto; left: 0; } .tab:hover { color: var(--btnTextColor); } .active::after { width: 100%; right: auto; left: 0; } .tabInfo { margin-top: 30px; } .reviewSec { max-width: 600px; margin: 0 auto; } .zoomSec { pointer-events: none; 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); } .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; } .Product_Page { --themeBg1: #fff; --themeBg2: red; } }.Product_Page{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }