<style>
  /* ЕДИНАЯ КАРТОЧКА */
  .home-card{
    display:block; position:relative;
    background:#fff; border:1px solid #eef0f6; border-radius:12px;
    box-shadow:0 1px 6px rgba(0,0,0,.04);
    overflow:hidden; color:inherit; text-decoration:none;
    transition:transform .08s ease, box-shadow .12s ease;
  }
  .home-card:hover{
    transform:translateY(-1px);
    box-shadow:0 3px 12px rgba(0,0,0,.08);
  }

  /* МЕДИА-ЧАСТЬ */
  .home-card__media{
    position:relative;
    background:#f6f7fb;
      border-radius:12px;       /* ← СКРУГЛЕНИЕ */
  overflow:hidden;
  }
  .home-card__media img{
    width:100%; height:auto; display:block;
    object-fit:cover; border-radius:0;
  }

  /* Бейдж типа (Маршрут / ПВД / Предложение) */
  .home-card__badge{
    position:absolute; right:8px; top:8px; z-index:2;
    background:#465498; color:#fff; border-radius:999px;
    padding:3px 8px; font-weight:700; font-size:12px;
  }

  /* Градиент на картинке (заголовок + цена) */
  .home-card__overlay{
    position:absolute; left:0; right:0; bottom:0; z-index:1;
    display:flex; align-items:flex-end; justify-content:space-between; gap:8px;
    padding:10px 12px;
    background:linear-gradient(
      to top,
      rgba(255,255,255,.90),
      rgba(255,255,255,.50),
      rgba(255,255,255,0.1)
    );
  }
  .home-card__title{
    font-weight:700; font-size:14px; line-height:1.25;
    color:#000; margin:0;
  }
  .home-card__price{
    font-weight:700; font-size:13px; color:#111; margin-left:auto;
  }

  /* ПОДВАЛ ПОД ФОТО */
  .home-card__info{
    display:flex; flex-wrap:wrap; gap:6px 8px;
    padding:8px 10px 10px;
    border-top:1px solid #eef0f6;
    font-size:12px; color:#6c757d; line-height:1.3;
  }

  .home-card__dot{ position:relative; }
  .home-card__dot + .home-card__dot::before,
  .home-card__dot + .info-label::before,
  .info-label + .home-card__dot::before{
    content:"•"; margin:0 6px; color:#98a0a6;
  }

  /* Лейблы: Гид:, Сообщество:, Предложение от: — просто текст */
  .info-label{
    color:#000;
    font-weight:400;
    margin-right:4px;
    display:inline-block;
  }

  /* Имя / название — кликабельная пилюля */
  .info-pill-link{
    display:inline-block;
    padding:2px 8px;
    border-radius:999px;
    background:#eef2ff;
    color:#111827;
    font-size:11px;
    font-weight:500;
    text-decoration:none;
    cursor:pointer;
    line-height:1.2;
  }
  .info-pill-link:hover{
    background:#e0e7ff;
    text-decoration:none;
  }

  @media (max-width: 480px){
    .home-card__title{ font-size:13px; }
    .home-card__price{ font-size:12px; }
  }
</style>
  <style>
    .masonry .masonry-sizer, .masonry .masonry-item { width: calc(50% - 6px); box-sizing: border-box; }
    .masonry .gutter-sizer{ width:12px; }
    .masonry .masonry-item{ margin-bottom:12px; }

    .photo-card { position:relative; display:block; overflow:hidden; border:1px solid #eef0f6;
                  border-radius:12px; background:#fff; text-decoration:none; color:inherit; }
    .photo-wrapper { position:relative; background:#f6f7fb; }
    .photo-wrapper img { width:100%; height:auto; display:block; object-fit:cover; }

    .tile-badge {
      position:absolute; right:8px; top:0px; z-index:2;
      background:#465498; border-radius:999px;
      padding:3px 8px; font-weight:700; font-size:12px;
      color: #ffffff;
    }
    .photo-info-card { position:absolute; inset:auto 0 0 0; padding:10px 12px;
                       background:linear-gradient(to top, rgba(255,255,255,.96), rgba(255,255,255,.85), rgba(255,255,255,0));
                       display:flex; gap:6px; }
    .photo-title { font-weight:700; font-size:14px; line-height:1.25; margin-right:8px; }
    .info-foot { display:flex; justify-content:space-between; width:100%; align-items:center; }
    .info-views { font-size:12px; color:#6c757d; }
    .info-price { font-weight:700; font-size:13px; color:#111; }
  </style>
<style>
  /* Ограничиваем ширину и центрируем */
  .home-grid-wrap{
    width: min(1200px, 100%);
    margin: 0 auto;
  }

  /* Базовые размеры гаттера */
  .masonry .gutter-sizer{ width:12px; }
  .masonry .masonry-item{ margin-bottom:12px; box-sizing:border-box; }
  .masonry .masonry-sizer{ box-sizing:border-box; }

  /* 2 колонки (по умолчанию) */
  .masonry .masonry-sizer,
  .masonry .masonry-item{
    width: calc(50% - 6px);
  }



  /* 4 колонки ≥ 1400px */
  @media (min-width: 1200px){
    .masonry .masonry-sizer,
    .masonry .masonry-item{
      width: calc((100% - 3 * 12px) / 4); /* (100% - 3 гаттера) / 4 */
    }
  }
  .home-card__badge--lock{
  left:8px;
  right:auto;
  top:8px;
  background:#ecfeff;
  opacity:.9;
  color:#6c757d;
}

</style>