:root {
  --tl-line-color: var(--color-brown);
  --tl-line-thickness: 1px;
  --tl-half-line-thickness: 1px;
}
main {
  background-color: var(--color-content-bg_alt);
  overflow: clip;
}
/* the date column */
.wp-block-columns > *:first-child {
  text-align: center;

  flex-grow: 0 !important;
  flex-basis: 16% !important;

  :is(h2, h3) {
    margin: 0 auto;
    padding: .4em;
    display: inline-block;
    border-radius: var(--border-radius);
    background-color: var(--tl-line-color);
    color: var(--color-text-on-dark);
    font-size: 1.2em;
  }
}
.entry-header + .wp-block-group {
  border-top: 2px solid var(--tl-line-color);
}
article > .wp-block-group {
  background:
    linear-gradient(to right, 
      transparent calc(50% - var(--tl-line-thickness)), 
      var(--tl-line-color) calc(50% - var(--tl-line-thickness)),
      var(--tl-line-color) calc(50% + var(--tl-line-thickness)),
      transparent calc(50% + var(--tl-line-thickness))
    );
}
@media (width > 768px) {
  .wp-block-columns {
    gap: 0;
    margin-block: 0;
    transform: scale(1); /* to create a new stacking context exactly like the below animations do */
  }
  @supports (animation-timeline: view()){
    .wp-block-columns {
      animation: transition-in-out linear forwards;
      animation-timeline: view();
    }
    .wp-block-columns:first-child {
      animation: transition-out linear forwards;
      animation-timeline: view();
    }
  }
  /* the date column */
  .wp-block-columns > *:first-child {
    order: 2;
    position: relative;
    align-self: stretch;
    align-content: center;
    padding-inline: var(--space-sm);
    font-feature-settings: "pnum", "onum";
  }
  .wp-block-columns:not(.simple-marker) > *:first-child h2::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: calc(50% - 20px);
    width: 2px;
    height: 40px;
    background: var(--tl-line-color);
  }
  .wp-block-columns > *:first-child h2::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - var(--tl-line-thickness));
    height: calc(2 * var(--tl-line-thickness));
    background: var(--tl-line-color);
    z-index: -1;
  }
  .wp-block-columns.simple-marker > *:first-child h2::after {
    left: 50%;
  }

  .wp-block-columns:nth-child(n) {
    /* the text column on the right */
    > :nth-child(2) {
      order: 3;
      padding-inline: var(--space-sm);
      border-inline-start: calc(var(--tl-line-thickness) * 2) solid var(--tl-line-color);
    }
    /* the image column */
    > :nth-child(3) {
      order: 1;
      padding: 3em var(--space-sm);
    }
  }
  figure {
    margin-inline: calc(-1 * var(--space-sm));
  }
}
figure {
  border-radius: var(--border-radius-lg);
  background: var(--color-content-bg);
  overflow: clip;
}
figure img {
  filter: unset !important;
  width: 100% !important;
}
figcaption {
  padding-inline: var(--space-sm);
  padding-bottom: var(--space-xs) !important;
}

@media (width <= 768px) {
  .wp-block-columns > *:first-child {
    padding-block-start: var(--space-md);
  }
  .wp-block-column:has(p) {
    background-color: var(--color-content-bg);
    padding: var(--space-sm);
    border-block: 1px solid var(--tl-line-color);
  }
  figure {
    display: inline-block;
  }

}
@keyframes transition-in-out {
  0% {
    opacity: 0.5;
    scale: 0.8;
  }
  46% {
    opacity: 1;
    scale: 1;
  }
  80% {
    opacity: 1;
    scale: 1;
  }
  100% {
    opacity: 0.7;
    scale: 0.9;
  }
}
@keyframes transition-out {
  0% {
    opacity: 1;
    scale: 1;
  }
  80% {
    opacity: 1;
    scale: 1;
  }
  100% {
    opacity: 0.7;
    scale: 0.9;
  }
}