@import "../css/resources/variables.css";
@import "../css/resources/style_reset.css";
@import "../css/resources/components.css";

:root {
    --header-h-page: 80px;
}
@media screen and (min-width: 1400px) {
    :root {
        --header-h-page: 120px;
    }
}
@media screen and (max-width: 700px) {
    :root {
        --header-h-page: 70px;
    }
}

#obraViewport {
    box-sizing: border-box;
    height: 100vh;
    width: 100%;
    padding-top: var(--header-h-page);
    display: flex;
    justify-content: center;
    align-items: center;
}
#obraViewport iframe {
    display: block;
    height: calc(100vh - var(--header-h-page));
    aspect-ratio: 16 / 9;
    width: auto;
    max-width: 95vw; 
    max-height: calc(100vh - var(--header-h-page));
    border: 0;
    background: #000;
}

@media screen and (max-width: 820px) {
    #obraViewport {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        padding-top: var(--header-h-page);
    }
    #obraViewport iframe {
        width: 90%;
        max-width: 90vw;
        aspect-ratio: 16 / 9;
        height: auto;
        max-height: calc(100vh - var(--header-h-page) - 20px);
    }
}
@supports not (aspect-ratio: 16 / 9) {
    #obraViewport iframe {
        height: calc((100vw * 9) / 16);
    }
}