.timetable{--bg-color-one:rgb(0 0 0 / .05);--bg-color-two:rgb(0 0 0 / .15);--bg-color-entry:rgb(150 150 150);--time-unit-height:1ex;--col-count:2;--col-gap:.75rem;--th-width:3.5rem;--col-min-width:10rem;--col-width:max(calc((100% - var(--th-width) - var(--col-gap) * var(--col-count)) / var(--col-count)), var(--col-min-width));--start-time:8;--end-time:17;--event-duration:calc(var(--end-time) - var(--start-time) + 1);--rows:auto repeat(calc(var(--event-duration) * 12), minmax(var(--time-unit-height), auto));--columns:var(--th-width) repeat(var(--col-count), minmax(var(--col-width), 1fr));font-size:50%;.body{display:grid;gap:0 var(--col-gap);grid-template-rows:var(--rows);grid-template-columns:var(--columns);max-width:100%;overflow-x:auto;scroll-snap-type:x mandatory;p{margin:0;word-break:break-word}.hours{--background:var(--bg-color-one);display:grid;grid-column:1 / -1;grid-row:2 / -1;grid-template-rows:subgrid;>div{grid-row-end:span 12;background:var(--background);&:nth-child(even){--background:var(--bg-color-two)}time{display:block;position:sticky;width:var(--th-width);height:100%;background:rgb(from var(--background) r g b / .1);border-inline-end:1px solid rgb(from var(--background) r g b / .15);inset-inline-start:0;padding-block-start:.75ex;box-sizing:border-box;z-index:2;font-size:2ex;text-align:center}}}.col{display:grid;grid-column:calc(var(--column) + 2);grid-row:1 / -1;grid-template-rows:subgrid;scroll-snap-align:start;scroll-margin-inline-start:calc(var(--th-width) + .5em);&:last-child{padding-inline-end:.25rem}.headline{font-size:4.75ex;margin-block-start:.25ex;margin-block-end:.75ex;padding-inline-start:.25em}.entries{display:grid;grid-column:1;grid-row:2 / -1;grid-template-rows:subgrid;gap:.25ex .1em;list-style-type:none;margin:0;padding:0;.entry{--background:var(--bg-color-entry);--timetable-offset:calc(var(--start-time) * 60);--start-hours-to-minutes:calc(round(down, var(--start) / 100, 1) * 60);--start-minutes:mod(var(--start), 100);--end-hours-to-minutes:calc(round(down, var(--end) / 100, 1) * 60);--end-minutes:mod(var(--end), 100);grid-row-start:calc((var(--start-hours-to-minutes) + var(--start-minutes) - var(--timetable-offset)) / 5 + 1);grid-row-end:calc((var(--end-hours-to-minutes) + var(--end-minutes) - var(--timetable-offset)) / 5 + 1);padding-block:.5ex;padding-inline:.5em;background:rgb(from var(--background) r g b / .8);border:1px solid hsl(from var(--background) h s calc(l * .75) / 1);border-radius:.5ex;box-sizing:border-box;color:hwb(from oklch(from var(--background) l 0 0) h calc(((b - 50) * 999)) calc(((w - 50) * 999)));color:contrast-color(var(--background));&.striped{background:repeating-linear-gradient(-45deg,rgb(from var(--background) r g b / .8),rgb(from var(--background) r g b / .8) 1em,rgb(from var(--background) r g b / .6) 1em,rgb(from var(--background) r g b / .6) 2em)}.time{font-size:2ex}.title{font-size:3.75ex;margin-block-end:.5ex}.description{font-size:2.5ex}}}}}}