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

.main {
  grid-area: main;

  & h2 {
    max-inline-size: 35ch;
    font-size: clamp(var(--font-20), 5vw, var(--font-28));
  }
}

.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 {
    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) {
    & p {
      font-size: clamp(var(--font-16), 3.5vw, var(--font-20));
    }
  }
}