.tsr-wrap{position:relative}
.tsr--grid{display:grid;gap:16px}
.tsr-cols-1{grid-template-columns:1fr}
.tsr-cols-2{grid-template-columns:repeat(2,1fr)}
.tsr-cols-3{grid-template-columns:repeat(3,1fr)}
.tsr-cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.tsr-cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.tsr-cols-2,.tsr-cols-3,.tsr-cols-4{grid-template-columns:1fr}}

/* карточка — без скруглений и теней */
.tsr-card{background: #fff;display: flex;flex-direction: column;padding: 20px 10px;height: 350px;justify-content: space-between;}
.tsr-card__top{display:flex; align-items:center; padding:12px; gap:12px}
.tsr-card__image{width:64px; height:64px; background:#f3f3f3; display:flex; align-items:center; justify-content:center}
.tsr-card__img{width:64px; height:64px; object-fit:cover; display:block}
.tsr-card__img--ph{width:64px; height:64px}
.tsr-card__meta{display: flex;align-items: center;gap: 8px;justify-content: space-between;}
.tsr-card__date{font-size:12px; color:#666}
.tsr-card__body{padding:0 12px 12px}
.tsr-card__title{font-size:18px; margin:0 0 6px}
.tsr-card__text{font-size:16px; color:#222; line-height:1.45}
.tsr-card__actions{padding:0 12px 12px}
.tsr-link{font-weight:600; text-decoration:none; border-bottom:1px solid currentColor}

/* Карусель (без внешних библиотек) */
.tsr--carousel{overflow:hidden}
.tsr--carousel .tsr-track{display:flex; gap:0px; padding-bottom:4px}
.tsr--carousel .tsr-slide{flex:0 0 calc((100% - 3*16px)/4); scroll-snap-align:start}
@media (max-width:1024px){.tsr--carousel .tsr-slide{flex-basis:calc((100% - 1*16px)/2)}}
@media (max-width:640px){.tsr--carousel .tsr-slide{flex-basis:100%}}


.tsr-dots{display:flex; gap:6px; justify-content:center; margin-top:8px}
.tsr-dot{width:6px; height:6px; background:#bbb}
.tsr-dot.is-active{background:#111}

.tsr-icon{
  display:block;
  width:80px; height:auto;
  object-fit:contain; /* корректно вписывает PNG/SVG */
  line-height:0;
}
/* Карусель — стрелки и плавное движение */
.tsr--carousel {
  position: relative;
  overflow: hidden;
}

.tsr-track {
  display: flex;
  transition: transform 0.6s ease;
}

.tsr-slide {
  flex: 0 0 25%; /* 4 карточки на десктоп */
  box-sizing: border-box;
  padding: 0 8px;
}

@media (max-width: 1024px) {
  .tsr-slide { flex: 0 0 50%; }
}
@media (max-width: 640px) {
  .tsr-slide { flex: 0 0 100%; }
}

/* стрелки */
.tsr-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}
.tsr-btn {
  pointer-events: auto;
  background-color: transparent!important;
  color: #111;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 50px;
  line-height: 36px;
}

.tsr-btn:hover {
  background: #000000;
}
