/* ----------------------------------------------------------------------- Container section ---------------------------- */
#container {
    grid-column: 2/11;
    grid-row: 2/11;

    padding: 25px 25px 15px;
    
    overflow: hidden;
}

#container > div {
    overflow: auto;

    border-radius: 40px;
}

.adres_box {
    width: 100%;
    height: auto;
    padding: 20px;
    margin-bottom: max(6vh, 50px);

    display: flex;
}

.mapa {
    width: 45%;

    border-radius: 20px;
}

.mapa iframe {
    width: 100%;
    height: 100%;

    border-radius: 20px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
}

.adres {
    width: 45%;
    margin-left: 5%;
}

.adres .big {
    font-size: var(--font_l);
    color: var(--green_darker);
    letter-spacing: 2px;
    font-weight: 500;


    margin-bottom: max(.5vh, 5px);
}

.adres .big:first-child {
    margin-bottom: max(1.5vh, 15px);
}

.adres .small {
    font-size: var(--font_m);
    color: var(--black);
    letter-spacing: 2px;
    font-weight: 400;

    margin-bottom: max(2vh, 20px);
    margin-left: 0;
}

.adres .small a {
    color: var(--green);
}









.consulting_box h2 {
    font-size: var(--font_xl);
    color: var(--green_darker);
    letter-spacing: 2px;
    font-weight: 500;


    margin: 0 15px max(2vh, 20px);
}







.kariera h2 {
    font-size: var(--font_xl);
    color: var(--green_darker);
    letter-spacing: 2px;
    font-weight: 500;


    margin-bottom: max(2vh, 20px);
}

.kariera {
    width: 100%;
    height: auto;
    padding: 20px;
}

.kariera h3 {
    font-size: var(--font_l);
    color: var(--black);

    margin-bottom: max(2vh, 20px);
}

.kariera p {
    font-size: var(--font_m);
    color: var(--black);
    line-height: 140%;

    margin-bottom: max(2vh, 20px);
}



/* ------------------------------------------------------------------------ Tablets --------------------------- */
@media screen and (min-width: 801px)  and (max-width: 1024px) and (orientation: portrait) {
    #information_text_vertical :is(h1, h2, h3) {
        font-size: 6vh;
        letter-spacing: 4px;
    }

    main {
        grid-template-columns: 15% 5% repeat(8, 10%);
    }

    #container {
        padding: 5px;
    }

    .adres_box {
        padding: 20px;
        margin-bottom: max(4vh, 30px);
        flex-direction: column;
    }

    .mapa {
        width: 100%;
        height: 30vh;
        margin-bottom: 30px;
    }

    .adres {
        width: 100%;
    }

    .adres .big {
        font-size: var(--font_l);
    }

    .adres .small {
        font-size: var(--font_m);
    }

    .kariera h2 {
        font-size: var(--font_l);
    }

    .workplaces {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .workplace {
        width: 100%;
        margin-bottom: 20px;
    }
}




/* ------------------------------------------------------------------------ Mobile --------------------------- */
@media screen and (max-width: 800px) and (orientation: portrait) {
    #container {
        padding: 5px;
    }

    .adres_box {
        padding: 20px;
        margin-bottom: max(4vh, 30px);
        flex-direction: column;
    }

    .mapa {
        width: 100%;
        margin-bottom: 30px;
    }

    .adres {
        width: 100%;
    }

    .adres .big {
        font-size: var(--font_m);
    }

    .adres .small {
        font-size: var(--font_s);
    }

    .kariera h2 {
        font-size: var(--font_l);
    }
}



@media screen and (max-width: 950px) and (orientation: landscape) {
    #information_text_vertical :is(h1, h2, h3) {
        font-size: 8vh;
        letter-spacing: 4px;
    }

    #container {
        padding: 5px;
    }

    .adres_box {
        padding: 20px;
        margin-bottom: max(4vh, 30px);
        flex-direction: column;
    }

    .mapa {
        width: 100%;
        margin-bottom: 30px;
    }

    .adres {
        width: 100%;
    }

    .adres .big {
        font-size: var(--font_m);
    }

    .adres .small {
        font-size: var(--font_s);
    }

    .kariera h2 {
        font-size: var(--font_l);
    }
}