body {
  margin: 0.5lh 5svi;
}

img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  margin-block: 1lh;
}

:root {
  font-family: Verdana, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-size-adjust: 0.5;
  background-color: #F1CF85;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
}

nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1em;
  row-gap: 0.25lh;
  padding-block: 0.25lh;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: bolder;
  color: #C7452B;
  font-size: 19px;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.1lh;
  
  &+:hover {
    text-decoration-thickness: 2px;
  }
}

#logo {
  display: block;
  inline-size: clamp(0ch, 100%, 66ch - 2lh);
  block-size: auto;
  margin-block: 0.25lh;
}

article {
  margin-block: 1lh;
  box-sizing: border-box;
  inline-size: clamp(0ch, 100%, 66ch);
  color: #922927;
}

#release-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(200px + 1lh), 1fr));
  gap: 1lh;
  
  img {
    inline-size: 100%;
  }
  
  article {
    margin-block: 0;
  }
}

p, ol, ul, blockquote {
  margin-block: 1lh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5rlh;
  margin-block: 0;
  text-wrap: balance;
  color: #174C4A;
  
  &+ * {
    margin-block-start: 0;
  }
}

h1 {
  font-size: 1.6em;
}

h2 {
  font-size: 1.4em;
}

h3 {
  font-size: 1.2em;
}

iframe {
  max-inline-size: 100%;
}

.comingsoon {
  background: #58968A;
  color: white;
  font-weight: bold;
  display: inline-block;
  padding: 0.125lh 0.5lh;
  box-sizing: border-box;
  margin-block: 0;
}