Stars and Stripes is a background SVG. Layout helped me understand technically how viewport width and height works as well as object-fit contain.

• View the Layout
• View the code on GitHub

Code

<style type="text/css">
      :root {
        --color-red: #d42629;
        --color-blue: #000554;
      }

      body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas:
          "stars red-stripes"
          "stars white-stripes";
        margin: 0;
        max-height: 100vh;
      }

      .blue {
        background: var(--color-blue);
        background-image: url('img/svg/star.svg');
        grid-area: stars;
        height: 100vh;
        width: 50vw;
      }

      .red,
      .white {
        height: 50vh;
        width: 50vw;
      }

      .red {
        background: var(--color-red);
        grid-area: red-stripes;
      }

      .white {
        background: #fff;
        grid-area: white-stripes;
      }

      .blue img {
        height: 100vh;
        width: 50vw;
        object-fit: contain;
      }

      .red img,
      .white img {
        height: 50vh;
        width: 50vw;
        object-fit: contain;
      }

    </style>