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; display: flex; justify-content: space-between; } h1, h2, h3 { line-height: 1.2; } h1 { /* margin: 0 0 .2em; */ margin: 0 0 .1em; color: #ff6e40; /* font-size: 20mm; */ font-size: 10mm; } .subtitle { font-size: 14px; } h3 { margin-top: 0; margin-bottom: .2em; color: #ff6e40; } .intestazione { /* padding: 1.5rem; */ padding: 0.5rem 1.5rem; display: grid; grid-template-columns: auto auto auto; /* margin-bottom: 1.5rem; */ margin-bottom: 0.5rem; } .logo, .qrcode { display: flex; align-items: center; height: 100%; } .qrcode { justify-content: flex-end; } .logo img, .qrcode img { /* width: 25%; */ width: 15%; } #events { display: grid; /* grid-template-columns: 33% 33% 33%; */ grid-template-columns: auto auto auto auto; grid-template-rows: auto auto auto auto auto; /* grid-gap: 1.5em; */ grid-gap: 0.5em; /* border: 1px dotted black; */ padding-left: 24px; padding-right: 24px; } .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; */ height: 12px; width: 12px; fill: white; margin-right: 0.2em; } .title { /* font-size: 16px; */ font-size: 14px; } .place_name, .flex { /* font-size: 14px; */ font-size: 12px; } .title, .flex, .location { /* margin: .5rem 1rem; */ } .center { display: flex; flex-direction: column; align-items: center; } .flex, .location { /* display: grid; grid-template-columns: auto auto; justify-content: start; */ display: flex; align-items: center; } .place_name { color: #ff6e40; } .flyer-container { background: #0d1117; } .flyer { width: 100%; object-fit: cover; /* max-height: 40mm; */ max-height: 30mm; border-radius: 4px 4px 0 0; } footer { width: 100%; padding: 1rem; display: grid; grid-template-columns: 66% 33%; padding-left: 24px; padding-right: 24px; } .contacts { padding-left: 24px; } .contacts span { padding-right: 1rem; } .contacts svg { width: 1rem; fill:#c9d1d9; } .published { text-align: right; padding-right: 24px; }