.container {
  --grapes-size-button: 36px;
  --grapes-size-col-day: var(--grapes-unit-40);
  --grapes-size-col-calendar: calc(
    7 * var(--grapes-size-col-day) -
      (var(--grapes-size-button) + var(--grapes-unit-16)) * 2
  );
  display: grid;
  grid-template-columns:
    [lcalendar-start] var(--grapes-size-button)
    [ltitle-start] var(--grapes-size-col-calendar) [ltitle-end] var(
      --grapes-size-button
    )
    [lcalendar-end rcalendar-start] var(--grapes-size-button)
    [rtitle-start] var(--grapes-size-col-calendar) [rtitle-end] var(
      --grapes-size-button
    )
    [rcalendar-end];
  gap: var(--grapes-unit-16);
}

.container > div:first-of-type {
  grid-area: lcalendar;
}

.container > div:last-of-type {
  grid-area: rcalendar;
}

.singleContainer {
  grid-template-columns:
    [rcalendar-start] var(--grapes-size-button)
    [rtitle-start] var(--grapes-size-col-calendar)
    [rtitle-end] var(--grapes-size-button)
    [rcalendar-end];
}

.leftTitle {
  grid-column: ltitle;
}
.rightTitle {
  grid-column: rtitle;
}