:root{
  --radius:8px;
  --gray-500:#6b6b6b;
  --gray-300:#bfbfbf;
  --fg:#111;
  --tr:cubic-bezier(.32,.72,.3,1);
}

/* ===== СЕКЦИЯ ===== */
.cat{
  padding:4rem 0 3rem;
}
.cat__title{
  font-size:2.2rem;
  font-weight:700;
  letter-spacing:-.015em;
  margin:0 0 2.2rem;
}
.cat__empty{
  text-align:center;
  color:var(--gray-500);
  margin:3rem 0;
}

/* ===== СЕТКА ===== */
.cat__grid{
  display:grid;
  gap:1.2rem 1.6rem;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.cat__grid.one{                /* одиночная карточка */
  max-width:280px;
  margin-inline:auto;
  grid-template-columns:1fr;
}

/* ===== КАРТОЧКА ===== */
.card{
  display:block;
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  text-decoration:none;
  color:inherit;
  transition:transform .25s var(--tr),box-shadow .25s var(--tr);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}

/* превью 3:2 */
.card__img{
  width:100%;
  aspect-ratio:3/2;
  background-size:cover;
  background-position:center;
  filter:grayscale(30%) contrast(1.05);
  transition:filter .3s;
}
.card:hover .card__img{
  filter:none;
}

/* тело */
.card__body{
  padding:.9rem 1rem;
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.card__name{
  margin:0;
  font-size:1rem;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.card__addr{
  margin:0;
  font-size:.82rem;
  color:var(--gray-500);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* meta */
.card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin:0;
  padding:0;
  list-style:none;
  font-size:.8rem;
  color:var(--gray-500);
}
.card__meta li{
  position:relative;
  padding-left:8px;
  white-space:nowrap;
}
.card__meta li:first-child{
  padding-left:0;
}
.card__meta li:not(:first-child)::before{
  content:'•';
  position:absolute;
  left:0;top:0;
  font-weight:700;
}

/* описание (3 строки) */
.card__desc{
  font-size:.8rem;
  color:var(--gray-500);
  margin-top:auto;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ===== improvements ===== */
/* лёгкий скелетон-эффект, когда картинки грузятся */
.card__img::after{
  content:'';
  display:block;
  width:100%;height:100%;
  background:var(--gray-300);
  animation:imgFade .8s ease .2s both;
}
@keyframes imgFade{
  to{opacity:0}
}

/* адаптив */
@media(max-width:900px){.cat__title{font-size:2rem}}
@media(max-width:600px){
  .cat{padding:3rem 0 2rem}
  .cat__title{font-size:1.8rem;margin-bottom:1.8rem}
  .card__img{aspect-ratio:4/3}
}