.page {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  page-break-after: always;
  padding-top: 2mm;
}
.mode-recto{
  --basesize: 14px;
}
.mode-rectoverso {
  --basesize: 12px;
}

.print-tip {
  width: 50%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: min-content 1fr min-content;
  /* border: 1px solid rgba(60, 240, 222, 0.568); */
  padding: calc(2 * var(--basesize));
  font-weight: 500;
  line-height: 1.4;
  position: relative;
  text-align: center;
}
.mode-rectoverso .print-tip {
  aspect-ratio: 1000/560;
}
.mode-recto .print-tip {
  aspect-ratio: 100/140;
}

.recto {
  flex-direction: row-reverse;
}
.tip-title,
.tip-content {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.tip-content {
  font-size: calc(var(--fz) / 30 * var(--basesize));
}
.tip-title {
  font-size: calc(2 * var(--basesize));
  line-height: 1;
  text-align: center;
  text-wrap: balance;
  margin-bottom: .5em;
}
.tip-site,
.tip-index {
  /* text-transform: uppercase; */
  font-size: calc(1.15 * var(--basesize));
}
.print-tip footer {
  font-size: calc(1.15 * var(--basesize));
  grid-column: span 2;
  text-align: center;
}
.print-tip footer a {
  font-size: calc(1.15 * var(--basesize));
  text-align: center;
  color: currentColor;
  /* text-decoration: underline; */
  text-decoration: none;
  text-wrap: balance;
  display: block;
  line-height: 1.4;
  margin-top: .5em;
}
.verso .print-tip footer a{
  font-size: calc(.5 * var(--basesize));

}
.tip-index {
  text-align: right;
}

/* crops */
.cross {
  position: absolute;
  inset: 0;  
  /* pointer-events: none; */
}

.cross, .cross::after, .cross::before {
  opacity: 0.5;
}

.print-tip::after, .print-tip::before {
  opacity: 0.25;
}

.print-tip, .cross {
  --s: 10px;
  --ms: calc(var(--s) * -1);
}
/* 
.print-tip:nth-child(even)::before {
  background: url(cross.svg) var(--ms) var(--ms) no-repeat;
}
.print-tip:nth-child(odd) .cross::before{
  left: 0;
  background:  url(cross.svg) var(--ms) var(--ms) no-repeat;
}
.print-tip:nth-child(even)::after{
  bottom: 0;
  background: url(cross.svg) var(--ms) var(--s) no-repeat;
}
.print-tip:nth-child(even) .cross::after{
  bottom: 0;
  background: red  url(cross.svg) var(--ms) var(--s) no-repeat;
}
.print-tip:nth-child(even) .cross::before{
  left: 0;
  bottom: 0;
  background:   url(cross.svg) var(--ms) var(--s) no-repeat;
}
.print-tip:nth-child(odd)::before {
  background: url(cross.svg) var(--s) var(--ms) no-repeat;
  right: 0;
}
.print-tip:nth-child(odd) .cross::after {
  background:  url(cross.svg) var(--s) var(--ms) no-repeat;
  right: 0;
}
.print-tip:nth-child(odd)::after{
  
  bottom: 0;
  right: 0;
  background:  url(cross.svg) var(--s) var(--s) no-repeat;
}
.print-tip:nth-child(even) .cross::after{
  bottom: 0;
  right: 0;
  background:  url(cross.svg) var(--s) var(--s) no-repeat;
} */


.print-tip::before {
  background: url(cross.svg) var(--ms) var(--ms) no-repeat;
  top: 0;
  left: 0;
}

.print-tip::after{
  background: url(cross.svg) var(--ms) var(--s) no-repeat;
  left: 0;
  bottom: 0;
}
.cross::before{
  background: url(cross.svg) var(--s) var(--ms) no-repeat;
  right: 0;
  top: 0;
}
.cross::after{
  background:   url(cross.svg) var(--s) var(--s) no-repeat;
  right: 0;
  bottom: 0;
}

.print-tip::after,
.print-tip::before,
.cross::after,
.cross::before {
  content: "";
  position: absolute;
  height: calc(var(--s) * 2);
  width: calc(var(--s) * 2);
  /* background-size: var(--s) !important; */
}
@media print{
    @page {
      size: A4;
      margin: 0;
    }
    body {
      margin: 0;
      height: auto;
      width: auto;
      padding: 0;
    }
    body > *:not(.page){ display: none;}
    .page,
    .print-tip {
      border: none;
    }
    .page + .page {
      break-before: always;
    }
}