@media print {
  .noprint {
    position:absolute;
    left:-9999em;
    display:none;
  }

  @page {
    size: A4 portrait;
    margin: 1cm;
  }




  
  /***************/
  /* MARK: BASIS */
  /***************/

  html {
    --ws:.85cm;
  }

  h1 {
    font-size:20mm;
  }

  h2 {
    font-family:cinzel, serif;
    font-size:5mm; /* 15pt */
  }

  h3 {
    font-size:3.6mm; /* 11pt */
  }

  p, li { 
    font-size:3mm; /* 9pt */
    text-wrap:pretty;
  }

  p.intro {
    font-size:4.3mm; /* 13pt */
  }

  a {
    text-decoration:none;
    color:inherit;
  }

  /* COMPONENTS */

  .block.block--small-only {
    padding:0;
    background:none;
    border:none;
  }

  .ornament {
	  padding-block-end:var( --ws-m);
  }

  .vogel.block--small-only::after {
    content:unset;
  }





  /**************/
  /* MARK: BODY */
  /**************/

  html {

    background-color:#becda9;
    background-image:
		  url("../images/eiken.png");

    background-repeat:
      no-repeat,
      repeat;
  }

  body {
    background-size:5em auto;
    background-position:3.5em top;
  }





  /****************/
  /* MARK: HEADER */
  /****************/

  header {
    padding-block:var(--ws-m) var(--ws-s);
    padding-inline-end:var(--ws);

    gap:var(--ws);
    align-items:center;

    display:grid;
    grid-template-columns:4fr 5fr;
  }

  /* MARK: TITLE */

  h1 {
    padding-block:var(--ws);
    
    grid-template-columns:1fr 1fr 1fr 1fr;

    span:nth-of-type(1) {
      grid-column:1/-1;
    }
    
    span:nth-of-type(2) {
      grid-column:2/-1;
    }

    span:nth-of-type(3) {
      grid-column:3/-1;
    }

    span:nth-of-type(4) {
      grid-column:4/-1;
      justify-self:start;
    }
  }

  header section {
    --vogel-inset:65%;

     margin-inline-start:0;
  }





  /**************/
  /* MARK: MAIN */
  /**************/

  main {
    padding-inline-start:calc(8.5em + var(--ws));
    padding-inline-end:var(--ws);
    padding-block-start:0;
    padding-block-end:0;
    row-gap:0;

    grid-template-columns:
      minmax(0, 1fr)
      min( (100% - var(--ws) ) * .5, 36em)
      0
      min( (100% - var(--ws) ) * .5, 36em)
      minmax(0, 1fr);
  }





  /******************/
  /* MARK: HET HUIS */
  /******************/

  #huis {
    grid-template-columns:calc(8.5rem) 1fr var(--ws-l);
    column-gap:0;

    margin-inline-start:-8.5em;

    break-after:page;
  }
  
  #huis p:nth-of-type(1) {
    grid-area:2/2;
    margin:0;
    font-size:4.3mm; /* 13pt */
  }

  #huis picture {
    grid-area:1/1/2/-1;
  }





  /***********************/
  /* MARK: MOGELIJKHEDEN */
  /***********************/

  #mogelijkheden {
    break-before: page;
    grid-column:1/-1;
    padding-block-start:var(--ws-m);
    margin-block-end:var(--ws-m);
  }

  #mogelijkheden p.intro {
    max-inline-size:unset;
    font-size:3.6mm; /* 11pt */
    margin-inline:unset;
    text-align:start;
  }

  #mogelijkheden ul {
    grid-template-columns:1fr;
    gap:var(--ws-xs);
    padding:0;
  }

  #mogelijkheden li {
    display:grid;
    grid-template-columns:4cm 1fr;
    grid-template-rows:min-content 1fr;
    grid-template-areas:
      "image titel"
      "image tekst";
    gap:0 var(--ws-s);
    justify-items:start;
  }

  #mogelijkheden h3 {
    padding-block-end:0;
    background-image:unset;
    background-size: unset;
    background-position:unset;
    background-repeat:unset;

    text-align:center;
  }

  #mogelijkheden picture {
    grid-area:image;
  }

  #mogelijkheden img {
    order:-1;
    width:100%;
    max-inline-size:40rem;
    

    box-shadow:.05em .05em .1em var(--drop-shaodw);
    
    rotate:var(--r,-.25deg);

    li:nth-of-type(4n + 2) & {
      --r:.33deg;
    }

    li:nth-of-type(4n + 3) & {
      --r:-.75deg;
    }

    li:nth-of-type(4n + 4) & {
      --r:.33deg;
    }
  }

  #mogelijkheden li p {
    grid-area:tekst;

    font-size:3mm; /* 9pt */
    text-align:start;
    padding-inline:0;
    max-inline-size:26em;
    margin-inline:unset;
  }





  /*******************************/
  /* MARK: HUREN & CONTACT & 404 */
  /*******************************/

  #huren,
  #contact,
  #p404 {
    div {
      display:grid;
      gap:calc(var(--ws-xs) * .25);
    
      grid-template-columns:2.2cm 1fr;
    }
  }





  /***************/
  /* MARK: HUREN */
  /***************/

  #huren {
    border-right:0;
	  border-top-right-radius:0;
	  border-bottom-right-radius:0;

    grid-column:1/3;
    translate:.5mm;

    padding:var(--ws-s) var(--ws-s) var(--ws-s) var(--ws);
    gap:var(--ws-s);

    background-image:none;
  }

  #huren ul {
    padding-inline-start:1em;
  }

  #huren .nb {
    display:flex;
    gap:.25em;
    font-size:3mm; /* 9pt */
    
    grid-column:1/-1;
  }

  #huren em {
    color:var(--color-asterix);
  }



  /*****************/
  /* MARK: CONTACT */
  /*****************/

  #contact {
    border-left:0;
	  border-top-left-radius:0;
	  border-bottom-left-radius:0;

    grid-column:4/6;
    translate:-.5mm;

    padding:var(--ws-s) var(--ws) var(--ws-s) var(--ws-s);
    gap:var(--ws-s);

    background-image:none;
  }





  /*************/
  /* MARK: 404 */
  /*************/

  #p404 {
    --ornament-image:url("../images/birds1.svg");

    gap:var(--ws-xs);

    @media (width > 80em) {
      grid-column-start:2;
    }
  }






  /*****************/
  /* MARK: SERVICE */
  /*****************/

  #service {
      grid-column:2/-2;    
      /* margin-block-start:calc( var(--ws-s) * -1 ); */
      margin-block-start:var(--ws);
  }

  #service p {
    max-width:38em;
  }

}