.right .socials {
    display: flex;
    flex-direction: column;
}

.right .socials h2 {
    /* font-size: var(--h2-size); */
    font-weight: 600;
}

.right .socials a {
    color: #fff;
    text-decoration: none;
    font-size: 1.25em;
}

.right .socials a:last-child {
    margin-top: 1rem;
}

.right .socials a:hover {
    color: #a7a7a7;
}

.right .photo {
    background-image: var(--image);
    background-size: cover;
}


@media (orientation: landscape) {
    :root {
        --name-size: max(3.5vw, 2.6rem);
        --sub-name-size: max(2vw, 1.5rem);
    }
    .container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 1rem;
    }

    .left {
        width: max-content;
    }

    .right {
        display: grid;
        grid-template-columns: 1fr min-content;
        grid-template-rows: min-content 1fr;
        /* grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr); */
        width: 60%;
        gap: 1rem;
    }

    .right .text-wall {
        grid-row: span 2 / span 2;
    }

    .right .socials {
        text-wrap: none;
        white-space: nowrap;
    }

    .right .photo {
        aspect-ratio: 4/3;
        background-image: var(--image);
        background-size: cover;
    }
}

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

    .left {
        display: grid;
        grid-template-columns: 1fr min-content;
        grid-template-rows: repeat(2, 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: 1rem;
        width: 100%;
    }
    
    .title-box h2 {
        visibility: hidden;
        display: none;
    }

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

    .right .text-wall::before {
        content: var(--page-title);
        display: block;

        font-size: var(--page-title-size);
        font-style: italic;
        margin: .5rem 0;
    }

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

    .right .text-wall {
        grid-column: span 2 / span 2;
        grid-column-start: 1;
        grid-row-start: 1;
    }

    .right .socials a {
        font-size: 1em;
        text-wrap: none;
        white-space: nowrap;
    }

    .right .photo {
        width: 100%;
        background-position-x: 50%;
    }
}