.catalog{padding-block:clamp(70px,9vw,130px)}
.catalog__head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.4rem}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:clamp(36px,4vw,52px)}
a.filter,.filter{
  display:inline-block;text-decoration:none;line-height:1.2;
  font-family:var(--t-display);font-weight:500;font-size:.86rem;letter-spacing:.02em;
  padding:.7em 1.3em;border-radius:100px;border:1px solid var(--line);color:var(--gray);
  background:transparent;cursor:pointer;transition:.35s var(--ease)}
.filter:focus-visible{outline:2px solid var(--gray);outline-offset:2px}
.filter:hover{border-color:var(--gray);color:var(--paper)}
.filter.is-active{background:var(--gray);color:var(--green);border-color:var(--gray)}

.cars-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  gap:clamp(16px,1.6vw,22px);margin-top:clamp(38px,4vw,56px)}

.car{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(165deg,#ffffff 0%,var(--paper) 100%);
  border:1px solid rgba(20,31,28,.10);border-radius:var(--r);padding:24px 24px 22px;
  overflow:hidden;transition:.5s var(--ease);min-height:300px;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.45)}
.car::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(80% 60% at 50% 0%,rgba(20,31,28,.06),transparent 70%);
  opacity:0;transition:.5s var(--ease)}
.car:hover{transform:translateY(-6px);border-color:rgba(20,31,28,.22);
  box-shadow:0 26px 50px -22px rgba(0,0,0,.55)}
.car:hover::before{opacity:1}
.car:hover .car__icon img{transform:scale(1.07) translateX(4px)}
.car__top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:2}
.car__type{font-family:var(--t-display);font-weight:500;font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(20,31,28,.55)}
.car__ev{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--paper);
  background:var(--green);padding:.35em .7em;border-radius:100px;font-family:var(--t-display);font-weight:600}
.car__icon{height:84px;display:flex;align-items:center;justify-content:flex-start;margin:18px 0 6px;position:relative;z-index:2}
.car__icon img{height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(20,31,28,.22));
  transition:.6s var(--ease)}
.car__icon.has-photo{height:110px;width:100%;justify-content:center;margin-top:6px}
.car__icon.has-photo img{height:100%;width:auto;max-width:100%;filter:drop-shadow(0 14px 22px rgba(20,31,28,.26))}
.car:hover .car__icon.has-photo img{transform:scale(1.05)}
.car__name{font-family:var(--t-display);font-weight:500;font-size:1.18rem;line-height:1.15;
  margin-top:8px;position:relative;z-index:2;color:var(--green)}
.car__spec{color:rgba(20,31,28,.6);font-size:.84rem;margin-top:.3rem;position:relative;z-index:2}
.car__foot{margin-top:auto;padding-top:18px;position:relative;z-index:2}
.car__from{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(20,31,28,.5)}
.car__price{font-family:var(--t-display);font-weight:400;font-size:1.72rem;line-height:1;margin-top:.25rem;
  background:none;color:var(--green);-webkit-text-fill-color:var(--green)}
.car__price span{font-size:.86rem;color:rgba(20,31,28,.55);-webkit-text-fill-color:rgba(20,31,28,.55)}
.car__cta{display:inline-flex;align-items:center;gap:.5em;margin-top:16px;
  font-family:var(--t-display);font-weight:500;font-size:.84rem;color:var(--green);
  border-bottom:1px solid rgba(20,31,28,.18);padding-bottom:.35em;transition:.35s var(--ease)}
.car__cta:hover{border-color:var(--green);gap:.8em}
.car__cta svg{width:15px;height:15px;transition:.35s var(--ease)}
.car__cta:hover svg{transform:rotate(45deg)}
.catalog__empty{grid-column:1/-1;text-align:center;color:var(--gray-2);padding:60px 0;display:none}
@media(max-width:560px){.cars-grid{grid-template-columns:1fr}}