.event-day { border-top: 7px solid var(--border); width: calc(100vw - 2*var(--side-padding)); position: relative; margin-right: calc(-1 * (100vw - 2 * var(--side-padding))); max-width: calc( 100vw - 2 * var(--side-padding)); display: block; } .event-day[open] { padding-bottom: 4rem; } .event-day-heading { padding: 30px 20px; font-size: 2rem; font-weight: bold; cursor: pointer; } @media print { .event-day-heading { display: block; } } .event { border-top: 3px solid var(--border); margin-left: 20px; padding-bottom: 32px; display: flex; flex-direction: column; break-before: always; page-break-before: always; break-inside: avoid; page-break-inside: avoid; break-after: always; page-break-after: always; } @media screen and (min-width: 1024px) { .event { display: grid; grid-template-columns: 345px 1fr; grid-template-rows: auto auto auto auto 1fr; } } @media print { .event { display: block !important; overflow: hidden; } } .event-time { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } .event-title { grid-column-start: 1; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; margin-top: 0; margin-bottom: 0; } .event-description { grid-column-start: 2; grid-column-end: 3; grid-row-start: 4; grid-row-end: 6; } .event-description > *:first-child { margin: 0; margin-bottom: 2rem; } .event-description > *:last-child { margin-bottom: 0; } @media screen and (min-width: 1024px) { .event-description { margin-bottom: 0; padding-left: 2rem; } } .event-location { grid-column-start: 1; grid-column-end: 2; grid-row-start: 4; grid-row-end: 5; } .event-people { grid-column-start: 1; grid-column-end: 2; grid-row-start: 5; grid-row-end: 6; margin-bottom: 2rem; } .event-people-list { list-style: none; margin: 0; padding: 0; } .event-details { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; margin-bottom: 2rem; } .event-location, .event-people, .event-details { font-size: 1.3rem; line-height: 1.7rem; }