@media (orientation: portrait) {
    :root {
        --name-size: 4.5vw;
    }

    body {
        display: grid;
        grid-template-columns: 1fr min-content;
        grid-template-rows: repeat(4, min-content);
    }

    .nav-box {
        order:unset;
        grid-column: span 2 / span 2;
        grid-column-start: 1;
        grid-row-start: 1;
        height: fit-content;
    }

    .title-box {
        order: unset;
        grid-column-start: 1;
        grid-row-start: 2;
        margin-top: 0;
        width: 100%;
        margin-top: 1rem;
    }


    .lang-select {
        order: unset;
        grid-column-start: 2;
        grid-row-start: 2;
        margin-top: 0;
        width: fit-content;
        margin-top: 1rem;
    }

    .description {
        grid-column: span 2 / span 2;
        width: 100%;
        font-size: var(--description-size);
    }

    .description::before {
        content: var(--page-title);
        display: block;
        font-size: var(--page-title-size);
        font-style: italic;
        margin: .5rem 0;
    }

    .photos {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 3rem;
        grid-column: span 2 / span 2;
        grid-row-start: 4;
        margin-bottom: 4rem;
        margin-top: 1rem;
    }

    .block .left img {
        width: 100%;
    }

    .right {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, min-content);
        gap: 1rem;
    }

    .block-title {
        grid-column: span 2 / span 2;
    }

    .block-description {
        grid-column: span 2 / span 2;
    }

    .block-footer {
        grid-column: span 2 / span 2;
    }
}

@media (orientation: landscape) {
    body {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, min-content) 1fr;

        padding: 2rem;
    }

    :root {
        --name-size: max(2vw, 1.5rem);
        --description-size: max(1.5vw, 1.15rem);
    }

    .lang-select {
        grid-column-start: 2;
        grid-row-start: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }

    .title-box {
        margin-top: 1rem;
        width: 100%;
        grid-column-start: 1;
        grid-row-start: 1;
    }

    /* .description::before {
        content: var(--page-title);
        display: block;
        font-size: var(--page-title-size);
    } */

    .description {
        margin-top: 2rem;
        width: 100%;
        margin-left: 1rem;
        font-size: var(--description-size);
    }

    .photos {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        grid-column: span 2 / span 2;
        grid-row-start: 3;
        margin-bottom: 2rem;
        margin-top: 2rem;
    }

    .block {
        display: flex;
        flex-direction: row;
        gap: 2rem;
        width: 100%;
    }

    .block .left {
        width: 50%;
    }

    .block .left img {
        width: 100%;
    }

    .block .right {
        width: 50%;
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

    .block-description {
        height: 100%;
    }

    footer {
        bottom: 2rem;
        left: 2rem;
    }
}