.market-container{
        display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}


.card{
  width:360px;
  background:#fff;
  border-radius:15px;
  box-shadow:0 5px 20px rgba(0,0,0,.1);
  transition:.3s;
  font-family:'Segoe UI',sans-serif;
  margin:20px ;
  overflow:hidden;
  position:relative;
  cursor:pointer
}
.card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,.15)
}
.tilt{
    overflow:hidden
}
.img-market{
    height:200px;
    overflow:hidden
}
.img-market img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s
}
.card:hover .img-market img{
    transform:scale(1.05)
}
.info{
    padding:20px
}
.cat{
    font-size:11px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#71717A;
    margin-bottom:5px
}
.title{font-size:18px;
    font-weight:700;
    color:#18181B;
    margin:0 0 10px;
    letter-spacing:-.5px
}

.desc{
    font-size:13px;
    color:#52525B;
    line-height:1.4;
    margin-bottom:12px
}
.feats{
    display:flex;
    gap:6px;
    margin-bottom:15px
}
.feat{
    font-size:10px;
    background:#F4F4F5;
    color:#71717A;
    padding:3px 8px;
    border-radius:10px;
    font-weight:500
}

.bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px
}
.price{
    display:flex;
    flex-direction:column
}
.new{
    font-size:20px;
    font-weight:700;
    color:#18181B
}
.btn{
    background:linear-gradient(45deg,#18181B,#27272A);
    color:#fff;
    border:none;
    border-radius:10px;
    padding:8px 15px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
    transition:.3s;
    box-shadow:0 3px 10px rgba(0,0,0,.1)}
.btn:hover{
    background:linear-gradient(45deg,#27272A,#3F3F46);
    transform:translateY(-2px);
    box-shadow:0 5px 15px rgba(0,0,0,.15)
}
.btn:before{content:'';
    position:absolute;
    top:0;left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
    transition:.5s
}

.btn:hover:before{
    left:100%
}

@media (max-width:400px){
    .card{
        width:90%
    }
    .title{
        font-size:16px
    
    }
    .img{
        height:180px
    }
    .bottom{
        flex-direction:column;
        align-items:flex-start;
        gap:10px
    }
    .price{
        margin-bottom:5px
    }
    .btn{
        width:100%;
        justify-content:center
    }
    }