#retrospective{
  position:relative;
  background-repeat:no-repeat;
  background-size:1920px 2155px;
  background-position:left -943px bottom 45px;
}

.retrospective{
  position:relative;
}
.retrospective:before, .retrospective:after, .retrospective--dot:after{
  content:"";
  position:absolute;
  top:0px;
  left:2rem;
  width:0.5rem;
  --tw-translate-x:-50%;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property:all;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay:100ms;
  transition-duration:500ms;
  transition-timing-function:linear;
}
@media (min-width: 640px){

  .retrospective:before, .retrospective:after, .retrospective--dot:after{
    left:50%;
  }
}
.retrospective:before{
  bottom:0px;
  z-index:-10;
  --tw-bg-opacity:1;
  background-color:rgb(239 239 239 / var(--tw-bg-opacity));
}
.retrospective:after{
  top:0px;
  z-index:-10;
  height:0px;
  background-color:var(--color_second);
}
.retrospective--dot{
  position:absolute;
  top:0px;
  left:2rem;
  display:block;
  height:32px;
  width:32px;
  --tw-translate-x:-50%;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius:9999px;
  --tw-bg-opacity:1;
  background-color:rgb(239 239 239 / var(--tw-bg-opacity));
  transition-property:all;
  transition-duration:300ms;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 640px){

  .retrospective--dot{
    left:50%;
  }
}
.retrospective--dot:after{
  top:9px;
  left:1rem;
  height:14px;
  width:14px;
  border-radius:9999px;
  background-color:var(--color_main);
}
.retrospective--date{
  margin-bottom:1.5rem;
  font-size:34px;
  color:var(--color_second);
}
@media (min-width: 640px){

  .retrospective--date{
    margin-bottom:2rem;
  }
}
.retrospective--title{
  font-size:28px;
  color:var(--color_main);
}
.retrospective--content{
  margin-left:-0.5rem;
  width:375px;
  max-width:100%;
  border-top-right-radius:0.75rem;
  border-bottom-right-radius:0.75rem;
  border-bottom-left-radius:0.75rem;
  padding-top:1.5rem;
  padding-bottom:1.5rem;
  padding-left:1.5rem;
  padding-right:1.5rem;
  font-size:18px;
  line-height:1.3;
  transition-property:all;
  transition-duration:300ms;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 640px){

  .retrospective--content{
    margin-left:0px;
    padding-left:2rem;
    padding-right:2rem;
  }
}
.retrospective.active:after{
  height:100%;
}
.retrospective.active .retrospective--dot{
  background-color:var(--color_second);
}
.retrospective.active .retrospective--dot:after{
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity));
}
.retrospective.active .retrospective--content{
  background-color:var(--color_main);
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity));
}