:root {
    --image-width: 1280px;
    --image-height: 860px;
    --image-ratio: calc(860 / 1280 * 100%);
    --max-width-ratio: 10.7%;
    --max-width-with-ratio: calc(1280px - 10.7%);
    --max-width-with-ratio-middle: calc(1280px - (10.7% / 2));
    --max-height-with-ratio: calc(860px - 10%);
    /**
        aspect ratio  | padding-bottom value
        --------------|----------------------
            16:9      |       56.25%
            4:3       |       75%
            3:2       |       66.66%
            8:5       |       62.5%
    **/
}

body {
    background-color: #dddddd;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    color: #696969;
    height: 100%;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    font-size: 12px;
}

.logo {
    text-align: center;
    padding: 10px;
}

.logo img {
    max-width: 540px;
    min-width: 270px;
    width: 50vw;

}

.page {
    background-color: #fff;
    margin: 20px auto;
    height: auto;
    width: 80vw;
    min-width: 320px;
    max-width: calc(1280px - (10.7% / 2));
    max-width: var(--max-width-with-ratio-middle);
    max-height: 860px;
    max-height: var(--image-height);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.7);
}

.main {
    padding: 15px;
}



.aspect-ratio {
    position: relative;
    overflow: hidden;
    padding-bottom: calc(860 / 1280 * 100%);
    padding-bottom: var(--image-ratio);
    /* The height of the item will now be 73% of the width. */

}

.aspect-ratio iframe {
    max-width: calc(1280px - 10.7%);
    max-width: var(--max-width-with-ratio);
    max-height: calc(860px - 10%);
    max-height: var(--max-height-with-ratio);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0 auto;
}