@media (max-width: 500px) {



    body{

        overflow-x: hidden;

    }



    /* NAVIGACE *

    /*

        TODO: hamburger navigace 

    */

    /* TRIDY OVLIVNUJICI VIC ELEMENTU */

    .sekce-nadpis h2:nth-child(2){

        width: 100%;

    }



    /* NAVIGACE */



    /* Skryjeme menu a upravíme jeho styl pro menší zařízení */

    nav ul {

        display: none;

        flex-direction: column;

        position: absolute;

        top: 8em; /* Uprav podle výšky navigace */

        right: 1em;

        background-color: white;

        padding: 1em;

        border-radius: 0.5em;

        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

        z-index: 1000;

    }



    /* Styl jednotlivých odkazů v menu */

    nav ul li {

        padding: 0.5em;

        text-align: center;

    }



    /* Zobrazíme hamburger tlačítko */

    .hamburger {

        display: block;

        background: none;

        border: none;

        font-size: 4em;

        cursor: pointer;

        position: absolute;

        top: 0.5em;

        right: 0.5em;

        color: #3A3A3A;

    }



    /* Při zobrazení menu */

    nav ul.show {

        display: flex;

    }



    /* UVOD */



    .uvod .uvod-grid{

        grid-template-columns: 1fr 1fr 1fr;

        grid-template-rows: 15em 1fr 1fr;

        grid-template-areas:

        "nazev nazev nazev"

        "text-hlavni text-hlavni ."

        "oteviraci-doba oteviraci-doba oteviraci-doba";

        gap: 0;

        height: 80vh;

    }



    .uvod .uvod-grid h1{

        /*font-size: 4em; */

        font-size: 20vw;

        text-align: left;

        padding-left: 1rem;

    }



    .uvod .uvod-grid .text-hlavni{

        display: block;

        font-size: 7.5vw;

        padding-left: 1rem;

    }



    .uvod .uvod-grid .oteviraci-doba{

        display: flex;

        flex-direction: column;

        justify-self: center;

        border-radius: 1em;

        margin: 1em;

        padding: 0;

    }



    .uvod .uvod-grid .oteviraci-doba .casy{

        text-align: center;

        grid-area: oteviraci-doba;

        font-size: 5vw;  

    }



    /* O NÁS */



    .o-nas .o-nas-grid .p-padding{

        padding: 1em;

    }



    .o-nas .o-nas-grid{

        grid-template-columns: 1fr;

        grid-template-rows: repeat(5, 1fr);;

        min-height: 150vh;

    }    



    .o-nas .o-nas-grid .kde-se-nachazime{

        grid-column-start: 1;

        grid-column-end: 1;

        grid-row-start: 1;

        grid-row-end: 1;

    }



    .o-nas .o-nas-grid .proc-zrovna-sumavan{

        grid-column-start: 1;

        grid-column-end: 1;

        grid-row-start: 2;

        grid-row-end: 2;

    }



    .o-nas .o-nas-grid .vybaveni{

        grid-column-start: 1;

        grid-column-end: 1;

        grid-row-start: 3;

        grid-row-end: 3;

    }



    .o-nas .o-nas-grid .nase-sluzby{

        grid-column-start: 1;

        grid-column-end: 1;

        grid-row-start: 4;

        grid-row-end: 4;

    }



    .o-nas .o-nas-grid .prostory{

        grid-column-start: 1;

        grid-column-end: 1;

        grid-row-start: 5;

        grid-row-end: 5;

    }



    /* NASE SLUŽBY */



    .nase-sluzby .nav {

        flex-wrap: nowrap;

        overflow: scroll;

        gap: 3em;

        padding: 0 1em 0 1em;

        justify-content: space-between;

    }



    .sluzby-grid{

        grid-template-columns: repeat(1, 1fr);

        grid-template-rows: repeat(5, 1fr);

        grid-template-areas: 

        "posilovna" 

        "kruhovy-trenink"

        "corefit-women"

        "pilates"

        "pohybove-hry";

        min-height: 200vh;

    }



    .kardio-grid{

        grid-template-columns: repeat(1, 1fr);

        grid-template-rows: repeat(4, 1fr);

        grid-template-areas: 

        "hiit"

        "kardio-posilovani"

        "tabata"

        "kardio-kruhac";

        min-height: 200vh;

    }





    .protazeni-grid{

        grid-template-columns: repeat(1, 1fr);

        grid-template-rows: repeat(6, 1fr);

        grid-template-areas:

        "ranni-protazeni"

        "ranni-valecka"

        "zdrava-zada"

        "joga"

        "aktivni-senior"

        "sm-lana";

        min-height: 200vh;

    }



    /* CENÍK */



    .cenik .grid-cenik{

        display: grid;

        gap: 1em;

        grid-template-columns: 1fr;

        grid-template-rows: 1fr 1fr 1fr 1fr;

        grid-template-areas:

        "cenik-text"

        "cenik-tabulka";

    }



    .cenik .grid-cenik{

        display: block;

    }



    .cenik .grid-cenik .cenik-text p, .cenik .grid-cenik .cenik-text img{

        padding: 1em 1em;

    }



    .cenik-tabulka .tabulka-grid{

        gap: 1em 2em;

        padding: 1em;

        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows: 1fr 1fr 0.5fr 0.5fr;

        grid-template-areas:

        "tabulka-obrazek"

        "tabulka-vrch"

        "tabulka-spodek"

        "tabulka-popisek";

        }



    .cenik-tabulka h2{

        font-size: 3em;

    }



    .cenik-tabulka .tabulka-grid .tabulka-spodek{

        align-items:baseline;

    }



    /* TRENERI */



    .treneri .treneri-cards{

        gap: 1em;

    }



    .treneri .treneri-cards .card{flex-basis: 100%;}

    .treneri .treneri-cards .card .back {max-width: 100vw;}



        /* footer */



    .footer-grid{

        gap: 0;

        grid-template-columns: 1fr;

        grid-template-rows: repeat(5, 0.5fr);

        grid-template-areas:

        "adresa"

        "telefon"

        "email"

        "loga"

        "sumavan";

    }



    .footer-grid .telefon{

        display: block;

        align-self: auto;

    }



    .footer-grid .loga{

        margin-top: 2em;

        display: block;

        align-self: auto;

    }



    .footer-grid .sumavan{

        display: block;

        text-align: left;

    }

}