.wpsp{
 display:flex;
 padding:12px;
 border-radius:12px;
 max-width:280px;
 align-items:center;
 gap:10px;
 color:#fff;
 box-shadow:0 10px 25px rgba(0,0,0,.2);
}

.wpsp img{
 width:50px;
 height:50px;
 border-radius:8px;
}

/* TEMPLATE */
.style1{background:linear-gradient(135deg,#667eea,#764ba2);}
.style2{background:#111;}
.style3{background:#fff;color:#000;}
.style4{background:#ff416c;}
.style5{background:rgba(0,0,0,.8);}

@media(max-width:600px){
 .wpsp{
  max-width:90%;
  font-size:14px;
 }
}


.wpsp-img{
 width:50px;
 height:50px;
 object-fit:cover;
 border-radius:8px;
 box-shadow:0 4px 10px rgba(0,0,0,.1);
}

/* Responsive */
@media(max-width:768px){

 .wpsp-table thead{
  display:none;
 }

 .wpsp-table tr{
  display:block;
  margin-bottom:15px;
  border:1px solid #ddd;
  padding:10px;
  border-radius:10px;
 }

 .wpsp-table td{
  display:block;
  width:100%;
  margin-bottom:8px;
 }

 .wpsp-table td:before{
  font-weight:bold;
  display:block;
  margin-bottom:4px;
 }

 .wpsp-table td:nth-child(1):before{content:"Nama Produk";}
 .wpsp-table td:nth-child(2):before{content:"Gambar";}
 .wpsp-table td:nth-child(3):before{content:"Aksi";}
}

.wpsp-table img.wpsp-img{
    width: 48px !important;
    height: 48px !important;
    object-fit: cover !important;
    max-width: 48px !important;
}