CSS: remove @page footer on the first page

I have defined a HTML/CSS page for printing that utilize CSS @page features to define a header and a footer.

On the first page, I do not want a footer. Here Remove Header from First Page of HTML Generated PDF - CSS it is described how I remove the footer in a sense of "not showing it". That works, but unfortunately, some space is still kind of reserved for the footer. When I want to place an element close to the end of the title page, it will not work, it will be wrapped to the next page.

plenty of room that "some more content" could move down, but as soon as I add some margin-top it will be moved to the next page

In the following the minimal working example. I use Weasyprint to translate HTML/CSS into PDF.

HTML:

<!DOCTYPE html>
<html>
    <head>
      <meta charset="UTF-8">
      <title>test</title>
      <link rel="stylesheet" type="text/css" href="title_page.css" />
    </head>
    <body>
        <div class="header-left">
          some header left
        </div>
        <div class="header-right">
          some header right
        </div>
        <div class="content">
          
          <!-- Title page -->
          
          <div class="main-image-and-sub">
            some content
          </div>
          <div class="lower-detail-box">
            some more content
          </div>


          <!-- Sections -->
          <h2>Section 1</h2>
          <h2>Section 2</h2>
          <h2>Section 3</h2>
        </div>
    </body>
</html>

CSS: (the class lower-detail-box has the margin-top property. When you remove the comment, the element will me moved to the next page)

body {
  font-family: 'Arial';
  margin: 0px;
}

* {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }

  html, body {
    width: 297mm;
    height: 210mm;
  }
}

@page  {
  size: A4 landscape;
  margin-top: 90px;
  margin-left: 0;
  margin-right: 0;

  /*
   * Header
   */
  @top-left{
      content: element(header-left);
      /* margin-top: 27mm; */
  }

  @top-center{
    height: 90px;
  }

  @top-right{
      content: element(header-right);
      height: 90px;
  }


  /*
   * Footer
   */
  @bottom-right {
      content: element(footer-right);
      background-color: yellow;
      margin-top: 20px;
      padding-right: 34px;
      width: 450px;
      height: 50px;
  }

  @bottom-center{
      content: counter(page) ' / ' counter(pages);
      background-color: yellow;
      margin-top: 20px;
      font-family: 'Arial';
      color: white;
      width: 222px;
      height: 50px;
  }

  @bottom-left{
      content: string(heading);
      background-color: yellow;
      margin-top: 20px;
      padding-left: 35px;
      font-family: 'Arial';
      color: white;
      width: 450px;
      height: 50px;
  }
}

/* 
 * Title page, we remove the footer here
 */
 @page:first {
  @bottom-right {
    content: normal;
  }

  @bottom-center{
    content: normal;

  }

  @bottom-left{
    content: normal;
  }
}





/*
 * Header
 */
.header-left {
  position: running(header-left);
  width: 800px;
  margin-left: 35px;
}

.header-right {
  position: running(header-right);
  margin-right: 35px;
  margin-top: 10px;
}


h2 { string-set: heading content() }

.footer-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 50px;
  position: running(footer-right);
}

.main-image-and-sub {
  margin-left: 5px;
  margin-top: 20px;
  height: 496px;
}


.lower-detail-box {
  display: flex;
  justify-content: space-between;
  align-items: center;

  height: 111px;
  /* margin-top: 10px; */
  
  margin-left: 35px;
  margin-right: 33px;

  background-color: lightblue;
}