JSFiddle - React, Tailwind, and code Playground

HTML

<main>
  <section><div></div></section>
</main>

SCSS

$header-height: 100px;
$aspect-ratio: 2;

body {
  margin: 0;
  margin-top: $header-height;
}

main {
  margin: 0 auto;
  max-width: calc(#{100vh * $aspect-ratio} - #{$aspect-ratio * $header-height});
}

section {
  padding-bottom: 100% / $aspect-ratio;
  position: relative;
}

div {
  position:absolute;
  background-color: red;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}