#highlights-section {
  min-width: 100%;
  height: auto;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#highlights-container {
  width: 100%;
  margin: max(8cqw, 8cqh) 0px 0px 0px;

  display: grid;
  grid-template-columns: 10% 80% 10%;
  grid-template-rows: auto auto;
  
  justify-content: center;
  align-items: center;
  row-gap: min(1cqh, 1cqw);

  background-image: radial-gradient(var(--bg-step-1) 15%, transparent 10%);
  background-position: 50% 50%;
  background-size: 15px 15px;
  background-attachment: fixed;
}

#highlights-title {
  height: 100%;

  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;

  grid-column: 2 / -2;
  grid-row: 1 / 2;

  justify-items: center;
  align-items: stretch;

  z-index: 4;
}

#highlights-title h1 {
  color: var(--text-inverse);
  font-family: 'Tomorrow';
  font-size: max(3.5cqw, 4cqh);

  grid-column: 1 / -1;
  grid-row: 1 / 2;

  text-wrap: nowrap;

  margin: max(1.2cqw, 12px);
}

#highlights-title-bg {
  width: max(30cqw, 30cqh);

  grid-column: 1 / -1;
  grid-row: 1 / 2;

  background-color: var(--primary3);
  z-index: -1;

  box-shadow: 
    -0.2em -0.2em var(--primary1),
    0.3em 0.3em var(--primary2);

  transform: skewX(-20deg);
}

#highlights-title h3 {
  grid-column: 1 / -1;
  grid-row: 2 / 3;
  text-align: center;

  font-size: 2cqh;
  font-weight: 200;
}

#highlights-timeline-wrapper {
  width: 100%;
  grid-column: 2 / -2;
  grid-row: 2 / 3;

  display: grid;
  grid-template-columns: 17% auto 3%;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: row;

  justify-items: center;
  align-items: center;

  --timeline-bar-width: max(0.2cqh, 0.2cqw);

  margin-bottom: 15%;
}

#highlights-timeline-item-container {
  grid-column: 1 / -1;
  grid-row: 1 / -1;

  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;

}

#highlights-timeline-bar-container {
  grid-column: 1 / -1;
  grid-row: 1 / -1;

  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;

  justify-items: center;
}

.highlight-timeline-bar{
  grid-column: 1 / 2;
  background: var(--text-sub);
  width: var(--timeline-bar-width);
  z-index: 0;
}

#highlights-timeline-bar-top {
  grid-row: 1 / 2;
  height: 50%;
  align-self: end;
}

#highlights-timeline-bar-main {
  grid-row: 2 / -2;
  align-self: stretch;
}

#highlights-timeline-bar-bottom {
  grid-row: -2 / -1;
  height: 50%;
  align-self: start;
}

.highlight-timeline-item {
  grid-column: 1 / 3;
  height: 100%;

  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto;
  align-items: center;  
}

.timeline-bar-checkpoint {
  grid-column: 1 / 2;
  background-color: var(--text-main);

  width: calc(var(--timeline-bar-width) * 4);
  aspect-ratio: 1;

  z-index: 1;
  justify-self: center;

  transform: rotate(45deg);
}

#highlights-timeline-sticky-scrollmark {
  aspect-ratio: 1;
  width: calc(var(--timeline-bar-width) * 8);
  background-color: var(--text-main);
  z-index: 2;
}

#highlights-timeline-sticky-scrollmark[data-sticky-state="top"] {
  align-self: center;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

#highlights-timeline-sticky-scrollmark[data-sticky-state="middle"] {
  align-self: start;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  position: sticky;
  top: calc(50% - (var(--timeline-bar-width) * 4));
}

#highlights-timeline-sticky-scrollmark[data-sticky-state="bottom"] {
  align-self: center;
  grid-column: 1 / 2;
  grid-row: -2 / -1;
}

#highlights-timeline-sticky-startmarker {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  width: 0px;
  height: 0px;
  justify-self: center;
}

#highlights-timeline-sticky-endmarker {
  grid-column: 1 / 2;
  grid-row: -2 / -1;
  width: 0px;
  height: 0px;
  justify-self: center;
}

#highlights-timeline-gradient {
  align-self: start;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  position: sticky;
  
  width: 100%;
  height: 100vh;
  top: 0%;
  background: linear-gradient(
    to bottom,
    var(--bg-base), var(--bg-base) 8vh, transparent 18vh, transparent 85vh, var(--bg-base) 95vh, var(--bg-base)
  );
  z-index: 3;
}

@media screen and (min-aspect-ratio: 1/1) {
  .timeline-item-content {
    width: 100%;
    height: fit-content;

    grid-column: 2 / -1;
    grid-row: 1 / -1;

    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    column-gap: 2%;

    margin: 8% 0;
  }

  .timeline-item-content-img {
    --border-cut-radius: 5%;
    --border-round-radius: 0.5cqw;
    margin-top: 1%;
    
    aspect-ratio: 3 / 2;
    max-width: 35%;

    mask-image: linear-gradient(-45deg,
      transparent, transparent var(--border-cut-radius),
      #fff var(--border-cut-radius), #fff calc(100% - var(--border-cut-radius)),
      transparent calc(100% - var(--border-cut-radius)), transparent
    );
    border-radius: 0px var(--border-round-radius);
    border-radius: 0px var(0.5cqw);
    object-fit: cover;
  }

  .timeline-item-content-desc {
    flex-grow: 1;
  }

  .timeline-item-content-desc > h2 {
    font-family: 'Tomorrow';
    font-weight: 600;
    font-size: 2.5cqw;

    width: fit-content;

    text-shadow:
      var(--primary1) -0.1cqw -0.1cqw 1px,
      var(--primary2) 0.1cqw 0.1cqw 1px
      ;

    margin: 0 0;
    /* padding-left: 1cqw; */
  }

  .timeline-item-content-desc > h3 {
    font-family: 'Tomorrow';
    font-weight: 300;
    font-size: 1.5cqw;
    color: var(--text-inverse);

    margin: 0 0 1% 0;
    width: fit-content;
    background: var(--primary3);
    padding: 0 0.3cqw;
  }

  .timeline-item-content-desc > p {
    font-size: 1.3cqw;
    margin: 0px;
  } 
}

@media screen and (max-aspect-ratio: 1/1) {
  #highlights-container {
    grid-template-columns: 2% 96% 2%;
  }

  .timeline-item-content {
    width: 100%;
    height: fit-content;

    grid-column: 2 / -1;
    grid-row: 1 / -1;

    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    flex-direction: column;
    column-gap: 2%;

    margin: 18% 0;
  }

  .timeline-item-content-img {
    --border-cut-radius: 5%;
    --border-round-radius: 0.5cqw;
    margin-top: 1%;
    
    aspect-ratio: 3 / 2;
    max-width: 100%;

    mask-image: linear-gradient(-45deg,
      transparent, transparent var(--border-cut-radius),
      #fff var(--border-cut-radius), #fff calc(100% - var(--border-cut-radius)),
      transparent calc(100% - var(--border-cut-radius)), transparent
    );
    border-radius: 0px var(--border-round-radius);
    border-radius: 0px var(0.5cqw);
    object-fit: cover;
  }

  .timeline-item-content-desc {
    flex-grow: 1;
  }

  .timeline-item-content-desc > h2 {
    font-family: 'Tomorrow';
    font-weight: 600;
    font-size: 6cqw;

    width: fit-content;

    text-shadow:
      var(--primary1) -0.2cqw -0.2cqw 1px,
      var(--primary2) 0.2cqw 0.2cqw 1px
      ;

    margin: 0 0;
    /* padding-left: 1cqw; */
  }

  .timeline-item-content-desc > h3 {
    font-family: 'Tomorrow';
    font-weight: 300;
    font-size: 3.5cqw;
    color: var(--text-inverse);

    margin: 0 0 1% 0;
    width: fit-content;
    background: var(--primary3);
    padding: 0 0.3cqw;
  }

  .timeline-item-content-desc > p {
    font-size: 2.2cqh;
    margin: 0px;
  } 

  #highlights-timeline-wrapper {
    margin-bottom: 17%;
    grid-template-columns: 10% auto 5%;
  }
}