@import url('../components/cookie.css');
@import url('./aside/aside.css');

.main {
  grid-area: main;
}
.video {
  @media screen and (75rem <= width <= 100rem) {
    --outside: clamp(var(--gap-20), 6vw, var(--gap-128));
  }
}

.main__header {
  padding-block: var(--gap-72);

  & > :where(h2, p) {
    margin-inline: auto;
    max-inline-size: 60rem;
    text-align: center;
    text-wrap: balance;
  }

  & h2 {
    max-inline-size: 35ch;
    font-size: clamp(var(--font-28), 6vw, var(--font-36));
    padding-block: var(--gap-10) var(--gap-20);
  }

  & p {
    max-inline-size: 70ch;
    font-size: clamp(var(--font-16), 3.5vw, var(--font-20));
  }

  @media screen and (height <= 48rem) {
    & h2 {
      font-size: clamp(var(--font-28), 7vh, var(--font-36));
    }
    & p {
      font-size: clamp(var(--font-16), 3vh, var(--font-20));
    }
  }
}