:root {
	--blue: #005fb3;
	--darkblue: #151e55;
	
	--barva1: var(--blue);
	--barva2: var(--darkblue);
	--barva1_opacity: #005fb3dd;
	--barva1_opacity_50: #005fb377;
	--barva2_opacity: #151e55dd;
	--barva2_opacity_50: #151e5577;
}

h1, h2, h3 { color: var(--blue); }

a.tlacitko { color: #FFF; background-color: var(--blue); border-color:var(--blue);}
a.tlacitko:hover { background-color: var(--darkblue); }
a.tlacitko.white { color: var(--blue); background-color: #FFF; border-color:var(--blue);}
a.tlacitko.white:hover { color: #FFF; background-color: var(--darkblue);}
a.tlacitko.darkblue { color: #FFF; background-color: var(--darkblue); border-color:var(--darkblue);}
a.tlacitko.darkblue:hover { background-color: var(--blue); }

.marker { color: var(--blue); }
.marker2 { color: var(--darkblue); }


/* === STOMATO BOX GRID (self-contained) === */
  .stomo-grid {

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    max-width: 100%;
    margin: 0 auto;
    padding: 10px 0;
  }

  .stomo-grid img {
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    color: var(--blue);
  }

  .stomo-grid p {
    text-align: center;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: 0.2px;
    margin: 0;
  }

  /* Tablet: 2 sloupce */
  @media (max-width: 992px) {
    .stomo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Mobil: 1 sloupec + menší boxy */
  @media (max-width: 576px) {
    .stomo-grid { grid-template-columns: 1fr; gap: 14px; }
    .stomo-grid img { width: 34px; height: 34px; margin-bottom: 10px; }
    .stomo-grid p { font-size: 16px; }
  }