/* Zajistíme, že kontejner umožní zalomení na další řádek */
.video-ukazka, 
.foto-ukazka {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 40px;
    
   
}

/* Nastavení boxu pro video/foto */
.video  {
    width: 24%; /* Aby byly dvě vedle sebe (pokud box48 nefunguje správně) */
    
    position: relative;
    overflow: hidden; /* Oříznutí přetékajícího obsahu */
    border-radius: 30px; /* Zaoblení rohů kontejneru */
    margin-bottom: 30px;
    
    box-sizing: border-box;
}

 
.foto {
    width: 24%; /* Aby byly dvě vedle sebe (pokud box48 nefunguje správně) */
    
    position: relative;
    overflow: hidden; /* Oříznutí přetékajícího obsahu */
    border-radius: 30px; /* Zaoblení rohů kontejneru */
    margin-bottom: 30px;
    
    box-sizing: border-box;
}



/* Styl pro samotná média (video, iframe, obrázky) */
.video video,
.video iframe,
.video img
 {
    width: 100%;
    height: 100%; /* KLÍČOVÉ: Fixní výška srovná mřížku */
    object-fit: cover; /* KLÍČOVÉ: Ořízne obsah tak, aby vyplnil plochu a nedeformoval se */
    border-radius: 30px;
    display: block;
}

.foto img {
    height: 100%;
    object-fit: cover; /* KLÍČOVÉ: Ořízne obsah tak, aby vyplnil plochu a nedeformoval se */
    display: block;
    width: 100%;
    margin-bottom: 30px;
}

/* Specifická oprava pro Drupal Media wrapper uvnitř */
.video .media {
    width: 100%;
    height: 100%;
}

.video30 {
    
    height: auto;
    position: relative;
    overflow: hidden; /* Oříznutí přetékajícího obsahu */
    border-radius: 30px; /* Zaoblení rohů kontejneru */
    margin-bottom: 30px; 
}

.video30 video,
.video30 iframe {
    width: 100%;
    height: 600px; /* KLÍČOVÉ: Fixní výška srovná mřížku */
    object-fit: cover; /* KLÍČOVÉ: Ořízne obsah tak, aby vyplnil plochu a nedeformoval se */
    border-radius: 30px;
    display: block;
}

.teabulding-ukazka { 
    padding: 50px 150px;
}

/* Responsivita pro mobily - pod sebe */

@media screen and (max-width: 1600px) {
    .teabulding-ukazka {padding: 50px 0px;}
}

@media screen and (max-width: 900px) {
    .video30 video, .video30 iframe {height: 500px;}
    
}



@media screen and (max-width: 768px) {
    .video, 
    .foto {
    
    width: 48%;
    }
    
}