.calendar {
  .week-wrapper {
    position: relative;
  }

  .day-heading-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }
  /* DAYS */
  .days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    height: 180px;
  }

  .day {
    border: 1px solid #dee2e6;
    background: #f8f9fa;
    padding: 4px;
  }

  --event-grid-top: 30px;

  /* EVENTS OVERLAY */
  .events-grid {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;

    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;

    pointer-events: none; /* optional */
  }

  .events-grid:nth-child(1) { top: 30px }
  .events-grid:nth-child(2) { top: 210px }
  .events-grid:nth-child(3) { top: 390px }
  .events-grid:nth-child(4) { top: 570px }
  .events-grid:nth-child(5) { top: 750px }
  .events-grid:nth-child(6) { top: 930px }
  .events-grid:nth-child(7) { top: 1110px }

  .event {
    margin-top: 4px;
    padding: 4px 8px;
    color: #fff;
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    pointer-events: auto;
  }/* vertical slots */

  .event.row-1 { grid-row: 1; }
  .event.row-2 { grid-row: 2; }
  .event.row-3 { grid-row: 3; }
  .event.row-4 { grid-row: 4; }
  .event.row-5 { grid-row: 5; }

  .event a {
    color: #fff;
    text-decoration: none;
  }

  /* Column helpers */
  .start-1 { grid-column-start: 1; }
  .start-2 { grid-column-start: 2; }
  .start-3 { grid-column-start: 3; }
  .start-4 { grid-column-start: 4; }
  .start-5 { grid-column-start: 5; }
  .start-6 { grid-column-start: 6; }
  .start-7 { grid-column-start: 7; }

  .span-0 { grid-column-end: span 1; }
  .span-1 { grid-column-end: span 1; }
  .span-2 { grid-column-end: span 2; }
  .span-3 { grid-column-end: span 3; }
  .span-4 { grid-column-end: span 4; }
  .span-5 { grid-column-end: span 5; }
  .span-6 { grid-column-end: span 6; }

  .prev-month {
    background: #ccc;
  }
  .next-month {
    background: #ccc;
  }
}