.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
align-items:start;
}
.card{
background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
border-radius:var(--radius);
padding:22px;
box-shadow:var(--shadow);
border:1px solid rgba(255,255,255,0.03);
min-height:420px;
display:flex;
flex-direction:column;
}
.card__head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:12px;
margin-bottom:14px;
}
.title{
font-weight:600;
font-size:18px;
line-height:1.05;
}
.price{
background:linear-gradient(90deg, rgba(217,200,159,0.12), rgba(217,200,159,0.06));
color:var(--accent);
padding:8px 12px;
border-radius:10px;
font-weight:700;
font-size:14px;
white-space:nowrap;
}
.desc{
color:var(--muted);
margin-bottom:12px;
font-size:13px;
}
.list{
margin:10px 0 16px 0;
padding:0;
list-style:none;
display:grid;
gap:8px;
font-size:13px;
color:var(--muted);
}
.list li{
display:flex;
gap:10px;
align-items:flex-start;
}
.dot{
width:8px;height:8px;border-radius:50%;
background:var(--accent);
margin-top:6px;
flex:0 0 8px;
}
.meta{
margin-top:auto;
display:flex;
gap:12px;
align-items:center;
justify-content:space-between;
}
.for{
color:var(--muted);
font-size:13px;
}
.cta{
display:flex;
gap:8px;
align-items:center;
}
.btn{
background:linear-gradient(90deg,var(--accent), #f0e6c6);
color:#0b0b09;
padding:10px 14px;
border-radius:10px;
font-weight:700;
font-size:14px;
text-decoration:none;
box-shadow:0 6px 18px rgba(217,200,159,0.12);
border:0;
cursor:pointer;
}
.btn--ghost{
background:transparent;
color:var(--muted);
border:1px solid rgba(255,255,255,0.03);
padding:8px 12px;
border-radius:10px;
font-size:13px;
}
.badge{
display:inline-block;
padding:6px 10px;
border-radius:999px;
background:rgba(217,200,159,0.06);
color:var(--accent);
font-weight:600;
font-size:12px;
}
@media (max-width:920px){
.cards{grid-template-columns:1fr;}
body{padding:20px;}
}