@media screen and (max-width: 1023px) {
    html {
        scroll-behavior: smooth;
    }

    body {
        padding-top: 50px;
    }
    
    .body_container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 250px 50px max-content max-content;
    }
    
    /*HEADER START*/
    header {
        grid-column: 1/4;
        grid-row: 1;
        justify-self: center;
        display: flex;
        border-bottom: 1px solid red;
        width: 80%;
        height: 250px;  
        margin: 0;
    }
    
    .header--logo {
        height: auto;
        width: 400px;
        margin: auto;
        border-radius: 100%;
    }
    
    .header--photo {
        grid-column: 2/4;
        grid-row: 2/3;
        justify-self: end;
        width: 100%;
        height: auto;
        border-bottom-left-radius: 75%;
        border-top-left-radius: 75%;
    }
    /*HEADER END*/
    
    /*NAV START*/
    nav {
        grid-column: 1/4;
        grid-row: 2;
        display: flex;
        flex-direction: row;
        justify-content: left;
        margin: 10px 0 0 10%;
        padding-bottom: 20px;
        gap: 15px;
        backdrop-filter: none;
        background-color: rgba(32, 23, 23, 0);
    }
    
    nav > a {
        padding: 2px 8px;
        background-color: rgba(73, 73, 73, 0.545);
        backdrop-filter: blur(4px);
        border-radius: 5px;
        color: white;
        font-size: 12px;
    }
    
    nav > a:hover {
        text-decoration: underline;
        color: black;
    }
    
    /*NAV END*/
    /*MAIN START*/
    main {
        grid-column: 1/4;
        grid-row: 3;
        display: flex;
        flex-direction: column;
    }
    
    main > h2 {
        margin: 0px 0 0 10%;
        padding: 5px 25px 0 25px;
        border-bottom: 1px solid red;
        width: min-content;
    }
    section > h3 {
        margin-left: 10%;
        margin-right: 40%;
        margin-top: 20px;
        backdrop-filter: blur(3px);
        background-color: rgba(255, 255, 255, 0.308);
        width: max-content;
        padding-right: 5px;
        margin-bottom: 1px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    
    section > div {
        padding: 0;
        margin: 0 10%;
        backdrop-filter: blur(3px);
        text-align: left;

    }
    
    .gallery--section {
        background-color: rgb(249, 249, 249);
        padding-bottom: 10px;
    }
    
    .gallery--article {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 20px;
        margin: 30px 10% 0 10%;
    }
    
    .gallery--img {
        display: none;
        flex-grow: 1;
        max-width: 24%;
        border-radius: 10px;
        box-shadow: 1px 2px 5px rgb(154, 77, 77);
    }
    /*MAIN END*/
    /*FOOTER START*/
    footer {
        grid-column: 1/4;
        grid-row: 4;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: min-content max-content;
        background-color: rgb(195, 195, 195);
        box-shadow: inset 0px 4px 5px rgb(249, 249, 249);
        padding-bottom: 40px;
    }
    
    footer > h2 {
        grid-row: 1;
        grid-column: 1/7;
        margin: 10px 0 0 10%;
        padding: 5px 25px 0 25px;
        border-bottom: 1px solid red;
        width: min-content;
    }

    .footer_radim {
        margin-left: 20%;
    }

    .footer_zdena {
        margin-right: 20%;
    }
    
    address {
        font-size: 10px;
    }

    footer>address {
        margin-left: 10%;
    }
    
    .footer_map {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
    }

    .certificates__container {
        margin: 30px 10% 20px 10%;
    }
    
    /*FOOTER END*/

    .container {
        
        display: none;
        grid-template-columns: 8% 84% 8%;
        grid-template-rows: repeat(2, min-content);
        opacity: 0;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }
    
    .images {
        grid-column: 1/4;
        grid-row: 2;
        width: fit-content;
    }
    
    .img__window {
        display: none;
        
        border-radius: 10px;
        animation-duration: 0.2s;
        animation-fill-mode: forwards;
    }
    .languageBtn {
        font-size: 13px;
        line-height: 25px;
        width: 30px;
        height: 30px;
        top: 20px;
        left: 20px;
    }

}