:root {
  --numDays: 7;
  --numHours: 14;
  --timeHeight: 60px;
  --calBgColor: #eee;
  --eventBorderColor: #f2d3d8;
  --eventColor1: #ffd6d1;
  --eventColor2: #fafaa3;
  --eventColor3: #e2f8ff;
  --eventColor4: #d1ffe6;
}

.calendar {
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr;
  margin: 2rem;
}

.timeline {
  display: grid;
  grid-template-rows: repeat(var(--numHours), var(--timeHeight));
}

.days {
  display: grid;
  grid-column: 2;
  gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.events {
  display: grid;
  grid-template-rows: repeat(var(--numHours), var(--timeHeight));
  border-radius: 5px;
  background: var(--calBgColor);
}

.start-07 { grid-row-start: 1 ;} 
.start-08 { grid-row-start: 2 ;} 
.start-09 { grid-row-start: 3 ;} 
.start-10 { grid-row-start: 4 ;} 
.start-11 { grid-row-start: 5 ;} 
.start-12 { grid-row-start: 6 ;} 
.start-13 { grid-row-start: 7 ;} 
.start-14 { grid-row-start: 8 ;} 
.start-15 { grid-row-start: 9 ;} 
.start-16{ grid-row-start: 10;}
.start-17{ grid-row-start: 11;}
.start-18{ grid-row-start: 12;}
.start-19{ grid-row-start: 13;}
                               
                               
.end-08{ grid-row-end: 2 ;}
.end-09{ grid-row-end: 3 ;}
.end-10{ grid-row-end: 4 ;}
.end-11{ grid-row-end: 5 ;}
.end-12{ grid-row-end: 6 ;}
.end-13{ grid-row-end: 7 ;}
.end-14{ grid-row-end: 8 ;}
.end-15{ grid-row-end: 9 ;}
.end-16{ grid-row-end: 10;}
.end-17{ grid-row-end: 11;}
.end-18{ grid-row-end: 12;}
.end-19{ grid-row-end: 13;}
.end-20{ grid-row-end: 14;}


.title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.event {
  border: 1px solid var(--eventBorderColor);
  border-radius: 5px;
  padding: 0.5rem;
  margin: 0 0.5rem;
  background: white;
}

.space,
.date {
  height: 60px
}



body {
  font-family: system-ui, sans-serif;
}

.corp-fi {
  background: var(--eventColor1);
}

.ent-law {
  background: var(--eventColor2);
}

.writing {
  background: var(--eventColor3);
}

.securities {
  background: var(--eventColor4);
}

.date {
  display: inline;
  gap: 2em;
   text-align: center;
}

.date-num {
  font-size: 2rem;
  font-weight: 300;
  display: inline;
}

.date-day {
  display: inline;
  font-size: 1.5rem;
  font-weight: 100;
  text-align: center;
}

@media (max-width: 991px) {
.date-day {
  display: inline;
  font-size: 1rem;
  font-weight: 50;
}
.calendar {
  display: grid;
  gap: 3px;
  grid-template-columns: auto 1fr;
  margin: 0.1rem;
}
.days {
  display: grid;
  grid-column: 2;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
}
.event {
  border: 1px solid var(--eventBorderColor);
  border-radius: 1px;
  padding: 0.1rem;
  margin: 0 0.1rem;
  background: white;
}
.title {
  font-weight: 150;
  margin-bottom: 0.1rem;
}
.timeline {
  display: grid;
  grid-template-rows: repeat(var(--numHours), var(--timeHeight));
  margin: 0;
  padding: 0;
}
.container{
	margin: 0 0.1rem;
 	padding: 0;
 }
}