@media print { /* Define the size of the pages and layout settings */ @page { size: 90mm 148mm; marks: crop cross; margin: 15mm; } /* img{ width: 50%; } */ h1{ break-before: always; } body{ background-color: rgba(107, 207, 107, 0.953); font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; } /* LAYOUTS */ .containers1 { display: flex; flex-direction: row; justify-content: space-between; /* height: 100vh; */ flex-wrap: wrap; } .containers1>* { /* font-size: 5vw */ margin: 10px; border-radius: 3px; /* background: yellowgreen; */ border: 5px solid black; object-fit: cover; } .containers1>*:nth-child(odd) { width: 10%; } .containers1>*:nth-child(even) { width: 20%; } .containers1>*:nth-child(2), .containers1>*:nth-child(4), .containers1>*:nth-child(9) { width: 60%; } .containers2 { display: grid; grid-template-columns: repeat(auto-fill, 60mm); grid-gap: 10px; align-items: start; justify-items: center; margin: auto; /* width: 540px; */ } .containers2 img { border: 1px solid rgba(0, 0, 0, 0.3); /* box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3); */ max-width: 100%; /* max-height: auto; */ object-fit: cover; } .containers2 img:nth-child(4) { grid-column: 3 span; } .containers3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)); grid-gap: 10px; align-items: start; justify-items: center; margin: auto; } .containers3 img { border: 1px solid rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3); max-width: 100%; /* max-height: 75%; */ object-fit: cover; } .containers3 img:nth-child(2) { grid-column: span 3; grid-row: span 2; } .containers4 img,p{ width: 76%; margin-left: 12%; margin-top: 23%; } .containers4 *:nth-child(odd) { break-after: always; } }