.eventcol { display: flex; flex-direction: column; gap: 3mm; height: fit-content; } .flyer-container { max-height: fit-content; min-content: 40mm; max-content: 50mm; overflow: auto; } .flyer { object-fit: cover; max-height: 50px; } body { border: 1px solid yellow; font: 18px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; color: #c9d1d9; background: #0d1117; } h1, h2, h3 { line-height: 1.2; } h1 { margin: 0 0 .1em; color: #ff6e40; font-size: 14mm; } .subtitle { font-size: 18px; } h3 { margin-top: 0; margin-bottom: .2em; color: #ff6e40; } .intestazione { padding: 0.5rem 1.5rem; display: grid; grid-template-columns: auto auto auto; margin-bottom: 0.5rem; } .logo, .qrcode { display: flex; align-items: center; height: 100%; } .qrcode { justify-content: flex-end; } .logo img, .qrcode img { width: 25%; } #events { display: grid; grid-template-columns: auto auto auto auto; grid-gap: 1.5em; border: 1px dotted black; padding-left: 24px; padding-right: 24px; height: 379mm; } .event { background-color: #1e1e1e; border-radius: 4px; box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12); } .event_info { margin: 0.5rem 1rem; } .event_info svg { height: 24px; width: 24px; fill: white; margin-right: 0.2em; } .title { font-size: 14px; } .place_name, .flex { font-size: 12px; } .center { display: flex; flex-direction: column; align-items: center; } .flex, .location { display: grid; grid-template-columns: auto auto; justify-content: start; } .place_name { color: #ff6e40; } .flyer-container { background: #0d1117; } .flyer { width: 100%; object-fit: cover; border-radius: 4px 4px 0 0; } footer { width: 100%; padding: 1rem; display: grid; grid-template-columns: 66% 33%; padding-left: 24px; padding-right: 24px; } footer .flex { display: flex; } .contacts { padding-left: 24px; } .contacts .flex { font-size: initial; } .contacts span { padding-right: 1rem; } .contacts svg { width: 1rem; fill:#c9d1d9; margin-right: 0.3rem; } .published { text-align: right; padding-right: 24px; }