@font-face {
  font-family: "Britney Variable";
  src:
    url("fonts/Britney-Variable.ttf") format("truetype");
}

@font-face {
  font-family: "Domine";
  src:
    url("fonts/Domine.ttf") format("truetype");
}

.card-link {border-bottom: none}

.card{width:360px;background:#fff;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,.1);transition:.3s;margin:20px auto;overflow:hidden;position:relative}
.badge{position:absolute;top:10px;right:10px;background: linear-gradient(to right,  rgba(169,3,41,1) 0%,rgba(196,72,72,1) 44%,rgba(170,34,56,1) 100%);color:#fff;padding:5px 10px;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;border-radius:10px;box-shadow:0 3px 10px rgba(0,0,0,.2);z-index:10}
.tilt{overflow:hidden}
.img{height:400px;overflow:hidden}
.img img{width:100%;height:100%;object-fit:contain;transition:transform .5s}
.info{padding:20px}
.cat{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#71717A;margin-bottom:5px}
.title{font-size:24px;margin:0 0 10px; color: black}
.desc{font-size:13px;color:#52525B;line-height:1.4;margin-bottom:12px}
.feats{display:flex;gap:6px;margin-bottom:15px; flex-wrap: wrap}
.feat {
  font-size: 14px;
  border: 1px solid black;
  color: black;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 500;
  white-space: normal;
  display: inline-block;
  height: 24px;
  box-sizing: border-box;
  vertical-align: middle;
}
.bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:12px}
.price{display:flex;flex-direction:column}
.old{font-size:13px;text-decoration:line-through;color:#A1A1AA;margin-bottom:2px}
.new{font-size:20px;font-weight:700;color:#18181B}
.feat sup {
  font-size: 0.7em;
  vertical-align: super;
  line-height: 1;
}
.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);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}
.icon{transition:transform .3s}
.meta{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #F4F4F5;padding-top:12px}
.rating{display:flex;align-items:center;gap:2px}
.rcount{margin-left:6px;font-size:11px;color:#71717A}
.stock{font-size:11px;font-weight:600;color:#22C55E}
@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}}

.card-container {
  display: grid;
  grid-template-columns: repeat(3, 360px);
  gap: 1em;
  max-width: 1200px;
  /*margin: 0 auto;*/
  justify-content: start;
}

@media (max-width: 960px) {
  .card-container {
    grid-template-columns: 1fr;
  }
}

body {
  font-family: "Domine";
  padding-left: 5%;
  background-color: black;
  color: white;
}

.intro {font-size: 16pt}

p {max-width: 65ch; color: #e2e2e2}

h1 {
font-family: "Britney Variable";
font-weight: bold;
}
  
a {color: #42d4f4; border-bottom: 0.5px solid #42d4f4; text-decoration: none; transition: .5s;}
/* a:hover {color: #800000; transition: 0s} */
    
.link {margin-right: 15px}

p, li {margin-top: 10px}

span.links {
  border-bottom: 0.5px solid #42d4f4;
  text-decoration: none;
  }

h2 {font-weight: bold}