:root {
  --gap-base : 4rem;
}

body,
ul,
li {
  display: grid;
  grid-template-rows: min-content;
}

body,
h1,h2,h3,
ul, li, p {
  margin: 0;
  padding: 0;
}

h1 span {
  display: none;
}

body {
  font-family: "IBMPlex Mono", monospace;
  font-weight: 400;
  font-style: normal;
  gap: var(--gap-base);
  padding: var(--gap-base);
}

ul {
  gap: calc( var(--gap-base) / 1);
}

li {
  gap: calc( var(--gap-base) / 4);
  line-height: calc( var(--gap-base) / 4);
}

/*h1 {
  font-size: var(--gap-base);
  line-height: calc( var(--gap-base) / 0.8);
}*/

h2, h1 {
  font-size: calc( var(--gap-base) / 2);
  line-height: calc( var(--gap-base) / 1.5);
}

h1 {
  text-transform: uppercase;
}

p {
  line-height: calc( var(--gap-base) / 2);
}


@media (max-width: 767px) and (orientation: portrait) {

  :root {
    --gap-base : 2rem;
  }
  
  body {
    gap: calc( var(--gap-base) / 0.7);
  }

  ul {
    gap: calc( var(--gap-base) / 1);
  }

  li {
    gap: calc( var(--gap-base) / 2);
    line-height: calc( var(--gap-base) / 2);
  }

  h2, h1 {
    font-size: calc( var(--gap-base) / 1.4);
    line-height: calc( var(--gap-base) / 1);
  }

  h1 span {
    display: none;
  }

  p {
    line-height: calc( var(--gap-base) / 1.3);
  }

}