@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap);*{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;font-family:Open Sans,sans-serif}body{line-height:1.5}.card-wrapper{max-width:1100px;margin:0 auto}img{width:100%;display:block}.img-display{overflow:hidden}.img-showcase{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;-webkit-transition:all .5s ease;transition:all .5s ease}.img-showcase img{min-width:100%}.img-select{display:-webkit-box;display:-ms-flexbox;display:flex}.img-item{margin:.3rem}.img-item:first-child,.img-item:nth-child(2),.img-item:nth-child(3){margin-right:0}.img-item:hover{opacity:.8}.product-content{padding:2rem 1rem}.product-title{font-size:3rem;text-transform:capitalize;font-weight:700;position:relative;color:#12263a;margin:1rem 0}.product-title:after{content:"";position:absolute;left:0;bottom:0;height:4px;width:80px;background:#12263a}.product-link{text-decoration:none;text-transform:uppercase;font-weight:400;font-size:.9rem;display:inline-block;margin-bottom:.5rem;background:#256eff;color:#fff;padding:0 .3rem;-webkit-transition:all .5s ease;transition:all .5s ease}.product-link:hover{opacity:.9}.product-rating{color:#ffc107}.product-rating span{font-weight:600;color:#252525}.product-price{margin:1rem 0;font-size:1rem;font-weight:700}.product-price span{font-weight:400}.last-price span{color:#f64749;text-decoration:line-through}.new-price span{color:#256eff}.product-detail h2{text-transform:capitalize;color:#12263a;padding-bottom:.6rem}.product-detail p{font-size:.9rem;padding:.3rem;opacity:.8}.product-detail ul{margin:1rem 0;font-size:.9rem}.product-detail ul li{margin:0;list-style:none;background:url(https://fadzrinmadu.github.io/hosted-assets/product-detail-page-design-with-image-slider-html-css-and-javascript/checked.png) 0 no-repeat;background-size:18px;padding-left:1.7rem;margin:.4rem 0;font-weight:600;opacity:.9}.product-detail ul li span{font-weight:400}.purchase-info{margin:1.5rem 0}.purchase-info .btn,.purchase-info input{border:1.5px solid #ddd;border-radius:25px;text-align:center;padding:.45rem .8rem;outline:0;margin-right:.2rem;margin-bottom:1rem}.purchase-info input{width:60px}.purchase-info .btn{cursor:pointer;color:#fff}.purchase-info .btn:first-of-type{background:#256eff}.purchase-info .btn:last-of-type{background:#f64749}.purchase-info .btn:hover{opacity:.9}.social-links,.social-links a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.social-links a{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:32px;height:32px;color:#000;border:1px solid #000;margin:0 .2rem;border-radius:50%;text-decoration:none;font-size:.8rem;-webkit-transition:all .5s ease;transition:all .5s ease}.social-links a:hover{background:#000;border-color:transparent;color:#fff}@media screen and (min-width:992px){.card{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:1.5rem}.card-wrapper{height:100vh;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.card-wrapper,.product-imgs{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.product-imgs{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.product-content{padding-top:0}}