.events {
  display: grid;
  gap: 0 var(--grid-lines);
  grid-template-columns: repeat(3, 1fr);
  position: relative;
  z-index: 0;
}

.events__container {
  display: grid;
  grid-template-columns: 5fr 2fr;
  --column-gap: clamp(var(--inline-space), 3cqmin, calc(var(--inline-space) * 3));
}

.events__day-header {
  background-color: var(--color-bg);
  block-size: var(--grid-lines);
  display: block;
  position: relative;
  z-index: 1;
}

.events__day-header-content {
  background-color: var(--color-bg);
  border-radius: 2em;
  display: inline-flex;
  inset: calc(var(--grid-lines) - 1em) auto -1em;
  padding: 0.3em 1.3em 0.3em;
  position: absolute;
  transform: translateX(-50%);
  z-index: 2;
}

.events__index {
  --grid-lines: 0.2em;
  --row-gap: var(--block-space);
}

.events--none {
  background-color: var(--color-container);
  border-block-start: var(--grid-lines) solid var(--color-bg);
  padding-block: 3em;
  margin: auto var(--grid-lines) calc(var(--grid-lines) * -1) auto;
}

.events__popup {
  .panel:is(&) {
    max-block-size: calc(100dvh - (2 * var(--block-space-double)));
    max-inline-size: calc(100dvw - (2 * var(--block-space-double)));
  }

  #header:has(&) {
    max-inline-size: 100%;
    position: relative;
    z-index: 5;
  }
}

.event {
  --column-gap: 0.7ch;
  --panel-border-color: transparent;
  --panel-border-radius: 0.5em;
  --panel-padding: 0.6em 1.2em 0.6em 0.6em;
  --panel-size: auto; 

  margin: var(--inline-space);
  position: relative;
  z-index: 1;
}

.event--related {
  --hover-color: var(--bubble-color);
  --hover-size: 0.15rem;

  box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
  z-index: 2;
}

.event__grid-item {
  background-color: var(--color-container);
  block-size: 100%;
  border-radius: 0;
  display: flex;
  inline-size: 100%;
}

.event__grid-column-title {
  --z: 3;

  background-color: var(--color-container);
  font-size: 0.9em;
  padding: 2em 0 1em;
  text-transform: uppercase;
}

.event__timestamp {
  align-self: start;
  display: grid;
  font-weight: 600;
  margin-block: var(--grid-lines);
}

.event__title {
  font-size: 1.1em;
  line-height: 1.2;
}

.event__wrapper {
  align-content: end;
  display: grid;
  gap: calc(var(--grid-lines) * 2);
  justify-items: center;
  margin: var(--grid-lines);
  padding: var(--grid-lines);

  .event {
    grid-column-start: unset !important;
    grid-row-start: unset !important;
  }
}