* {box-sizing: border-box;}
html {
}
body {
    --m: 50px;
    --w: 21;
    --h: 29.7;
    --ratio: calc(var(--w)/var(--h));
    margin: 0;
}
div {
    padding: 1em;
    aspect-ratio: var(--ratio);
    scroll-snap-align: start;
    
    border: 1px solid;
    height: calc((100vw - var(--m) * 2) / var(--ratio) / 2);
}
@media (min-aspect-ratio: 29.7/21) {
    div {
        height:  calc((100vmin - var(--m) * 2));
        width: auto
    }
}
main.grid  {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em 0;
    width: fit-content;
    justify-content: start;
    justify-items: start;
    
    div:first-child {
        grid-column: 2;
    }
    div:last-child {
        grid-column: 1;
        grid-row: 1;
    }
    div:nth-child(odd){ margin-left: -1px; }
}
main.flex { 
    height: 100vh;
    padding: var(--m);
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
    display: flex;
    width: 100vw;
    margin-left: 1px;
    div:first-child,
    div:nth-child(3),
    div:nth-child(5),
    div:nth-child(7) { margin-right: 1em;}
    div:nth-child(odd){ margin-left: -1px; }
}
nav {
    position: fixed;
    bottom: var(--m);
}