/* Základní reset – konzervativní, aby se s Drupalem nehádal. */
* { box-sizing: border-box; }
html, body { height: 100%;}
html {
  scroll-behavior: smooth;
}
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.62; font-style:18px}

/* Messages – ať jsou rozpoznatelné. */
.messages { padding: 12px 14px; border-radius: 12px; margin: 12px 0; border: 1px solid rgba(0,0,0,0.12); }

/* mezera jen když je vedle sebe button a button */
input.button + a.button {
  margin-left: 10px;
}
/* grids */
.grid2 {
  display: grid;
  /* Vytvoří 2 sloupce, každý zabere 1 díl dostupného místa */
  grid-template-columns: 1fr 1fr; 
  /* Volitelné: mezera mezi položkami */
  gap: 40px; 
}

.grid2 img{max-width:100%;height:auto}

.grid2.third{grid-template-columns: 40% 60%;}

.grid3 {
  display: grid;
  /* Definice 3 stejně širokých sloupců */
  grid-template-columns: repeat(3, 1fr);
  /* Mezera 40px vertikálně i horizontálně */
  gap: 40px;
}








/* Zacílíme na ten jeden div, který je uvnitř .autogrid */
.autogrid > div {
  display: grid;
  /* Automaticky vytvoří sloupce pro všechny vnořené divy */
  grid-auto-flow: column;
  grid-auto-columns: 1fr; 
  gap: 40px;
  width: 100%;
}
/* Zajištění, aby se vnořené divy (těch X) neroztahovaly divně */
.autogrid > div > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border:1px solid;
  padding:20px;
  text-align:center;
  border-radius:16px;
  margin:20px 0;
}
.autogrid > div > div p{
 padding:0;
}

@media (max-width: 767px) {
  .autogrid > div {
    display:block;
  }
  .autogrid > div > div{
    margin-bottom:20px;
  }
  .grid2 {
    display: grid;
    /* Vytvoří 2 sloupce, každý zabere 1 díl dostupného místa */
    grid-template-columns: 1fr; 
    /* Volitelné: mezera mezi položkami */
    gap: 40px; 
  }
  
  .grid2.rai{
  display:block
}
.grid2.rai > div { 
  margin-bottom: 40px; 
}
  .grid3 {
    display: grid;
    grid-template-columns: 1fr !important; /* Vynutí jeden sloupec */
    gap: 40px;
  }
}