:root{
      --gap: 16px;
      --radius: 14px;
      --shadow: 0 6px 18px rgba(0,0,0,.08);
      --bg: #fff;
      --text: #222;
      --muted: #666;
    }

    .zoom:hover img {
      transform: scale(1.1);
      transition: all 0.5s ease;
    }
    bs_body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      color: var(--text);
      background: #f6f7f9;
      line-height: 1.5;
    }

    .bs_wrap{
      max-width: 1200px;
      margin: 40px auto;
      padding: 0 16px;
    }

    .bs_grid{
      display: grid;
      gap: var(--gap);
      /* Radi lepo na mobilnim i tabletima (1–3 kolone) */
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      align-items: start;
    }

    /* Na širim ekranima forsiramo tačno 2 u redu */
    @media (min-width: 1200px){
      .bs_grid{
        grid-template-columns: repeat(3, 1fr);
      }
    }

    figure.card{
      margin:0;
      background: var(--bg);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
     /* transition: transform .2s ease, box-shadow .2s ease;*/
    }

    /* Poštuje korisnike sa smanjenim animacijama */
    @media (prefers-reduced-motion: reduce){
      figure.card{ transition: none; }
    }

    /*figure.card:hover{
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(0,0,0,.12);
    }*/

    .card img{
      width: 100%;
      display:block;
      /* Zadržava konzistentan format sličica */
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }

    figcaption{
      padding: 12px 14px 14px;
      font-size: clamp(14px, 1.5vw, 16px);
    }

    figcaption .title{
      font-weight: 600;
      margin: 0 0 4px;
    }

    figcaption .desc{
      margin:0;
      color: var(--muted);
      font-size: .95em;
    }

    /* Fino poravnanje teksta */
    .desc{ text-wrap: pretty; }

.bs_custom-list-item {
  position: relative; /* Needed for absolute positioning of pseudo-element if used */
  padding-left: 30px; /* Indentation for the text */
  margin-top: 15px; /* Spacing between items */
  font-size: clamp(16px, 1.2vw, 20px);

}

.bs_custom-list-item::before {
  content: "\2022"; /* Bullet point */
  position: absolute;
  left: 10px; /* Position the bullet at the start of the padding */
  color: black; /* Example color */
}