.collection-card{
  display:inherit;
  overflow:hidden;
  position:relative;
  border-radius:var(--collection-card-border-radius);
  border:1px solid color-mix(in srgb, currentColor 8%, transparent);
}
.collection-card .cover{
  height:calc(var(--collection-height) * 1px);
  transition:var(--transition-duration-slow);
}
@media (max-width: 1280px){
  .collection-card .cover{
    height:calc((var(--collection-height) - 50) * 1px);
  }
}
.collection-card .cover img{
  -o-object-fit:cover;
     object-fit:cover;
  border-radius:var(--collection-card-border-radius);
}
.collection-card .cover .card-placeholder{
  background-color:rgba(var(--collection-card-foreground), 0.05);
  border-radius:var(--collection-card-border-radius);
}
.collection-card .cover .card-placeholder svg{
  color:rgba(var(--collection-card-foreground), 0.3);
}
.collection-card .cover::before{
  content:"";
  position:absolute;
  opacity:0;
  width:100%;
  height:100%;
  border-radius:var(--collection-card-border-radius);
  background-color:var(--overlay-background);
  transition:var(--transition-duration-normal);
}
.collection-card .info{
  display:flex;
  justify-content:var(--collection-card-text-alignment);
  position:absolute;
  inset-block-end:1em;
  inset-inline:1em;
}
.collection-card .info .name{
  padding:12px 20px;
  color:rgb(var(--collection-card-foreground));
  background-color:var(--collection-card-background);
  border-radius:calc(var(--collection-card-border-radius) * 0.66);
}
.collection-card .info[data-small] .name{
  padding:7px 14px;
  font-size:var(--text-sm);
}
.collection-card:hover .cover{
  scale:1.03;
}
.collection-card:hover .cover::before{
  opacity:1;
}