:root {
  --grid-display: flex;
  --grid-flow: column;
  --grid-padding: var(--space);
  --space: 2ch;
  --grid-item-margin-bottom: var(--space);
  --p-width: 100%;
  --section-space: 0;
  --section-side-space: 0;
  --line-height: calc((var(--space))*1.5);
  --font-size: clamp(1rem, 1.34vw + 0.53rem, 1.25rem);
  --min-block-width: 500px;
  --header-position: fixed;
  --header-background: rgba(0,0,0,.5);
  --header-color: #fff;
  --header-flex: space-between;
  --page-width: 95vw;
  --menu-font-size: calc(var(--font-size)*.75);
  --body-font-family: 'Helvetica', sans-serif;
  --heading-font-family: 'Helvetica', sans-serif;
}

@media screen AND (min-width: 1080px) {
  :root {
    --grid-display: grid;
    --grid-flow: column;
    --grid-padding: var(--space);
    --space: 2ch;
    --grid-item-margin-bottom: 0;
    --p-width: 60ch;
    --section-space: var(--space);
    --section-side-space: var(--space);
    --line-height: calc((var(--space))*1.25);
    --font-size: clamp(1rem, 1.34vw + 0.53rem, 1.35rem);
    --min-block-width: 500px;
  }
}

@media screen AND (orientation: portrait) {
  :root {
    --aspect-ratio: 9/16;
  }
}

@media screen AND (orientation: landscape) {
  :root {
    --aspect-ratio: 16/9;
  }
}

html,
body,
section {
  display: flex;
  flex-flow: column;
  align-items: center;
  width: 100vw;
  max-width: 100vw;
  position: relative;
  z-index: 1;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-size: var(--font-size);
}

section {
  width: 100%;
  padding: var(--section-space) var(--section-side-space);
}

.grid-col-2,
.grid-col-3,
.grid-col-4 {
  display: var(--grid-display);
  flex-flow: var(--grid-flow);
  grid-gap: var(--space);
  position: relative;
}

.grid-col-2 {
  grid-template-columns: 1fr 1fr;
}

.grid-col-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.grid-col-4 {
  grid-template-columns: 1fr 1fr 1fr;
}

.grid-item {
  width: 100%;
  padding: var(--grid-padding);
  margin-bottom: var(--grid-item-margin-bottom);
  background: #ddd;
  min-width: var(--min-block-width);
}

p {
  width: 100%;
  max-width: var(--p-width);
  line-height: var(--line-height);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  padding: var(--space);
}

header,
footer {
  width: 100%;
  z-index: 999;
  display: flex;
  align-items: center;
}

header {
  position: var(--header-position);
  top: 0;
  left: 0;
  background: var(--header-background);
  color: var(--header-color);
  justify-content: center;
}

.header-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: var(--header-flex);
  border: 1px solid red;
}

.header-inner ul {
  display: flex;
  list-style: none;
}

.header-inner li {
  margin-left: var(--space);
}

.header-inner li a {
  color: #fff;
  font-size: var(--menu-font-size);
}

.hero-section {
    aspect-ratio: var(--aspect-ratio) !important;
    display: none;
    justify-content: flex-start;
    align-items: center;
      position: relative;
      width: 100vw;
      padding: 0;
}

.hero-section video {
  aspect-ratio: var(--aspect-ratio);
  position: relative;
  aspect-ratio: 16/9;
  width: 100vw;
  object-fit: cover;
  content: normal;
}

.video-overlay {
  position: absolute;
  right: 10vw;
  bottom: 10vh;
  color: #fff;
}