.gallery {width:100% !important; position:relative;  height:auto !important; padding-top:350px; margin:0 auto; text-align:center;}
.gallery:after {content:''; clear: both; display: table;}
.gallery > img {position:absolute; left:0; top:0; max-width:100%; margin:auto; right:0; max-height:330px; padding:10px;}
.gallery input[name='slide_switch'] {display:none}
.gallery label {margin:0 1% 1% 1%; padding:0; display:inline-block; border:2px solid #f7f7f7; box-sizing:border-box; background:#fff;  cursor:pointer; width:18%; height:100px; position:relative; text-align:center;}
.gallery label img {display:block; width:auto; max-width:100%; position:absolute; margin:auto; padding:0; right:0; left:0; top:0; bottom:0; max-height:100%;}
.gallery > input[name='slide_switch']:checked+label {border-color:#f7f7f7;opacity:1}
.gallery > input[name='slide_switch'] ~ img {opacity:0;transform:scale(1)}
.gallery > input[name='slide_switch']:checked+label+img {opacity:1;transform:scale(1)} 
@media screen and (max-width: 780px) {
.gallery label {width:23%;}
}
@media screen and (max-width: 580px) {
.gallery label {width:30.33%;}
}
@media screen and (max-width: 380px) {
.gallery label {width:47%;}
}
.tabarea {margin-bottom:20px;}
.related-box {border:0;}
.related-box .product {
    display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 10px;
grid-row-gap: 0px;
  align-items: start;
}
.related-box .price {padding:10px 0;}
.related-box .btn {background:#004AAD;}
.related-box .btn  a {color:#fff}