.portfolio-item {
  margin-top: 0rem;

  opacity: 1;

  transition: all 1s ease-out;
  transition-delay: 1s;
}

.portfolio-item.htmx-added {
  opacity: 0;
  margin-top: 3rem;
}

.portfolio-item.left {
  align-items: start;
}

.portfolio-item.right {
  align-items: end;
}

.portfolio-item .pi-description {
  display: flex;
  flex-direction: column;

  position: relative;
}

.portfolio-item.right .pi-description {
  align-items: end;

  margin-left: var(--pi-description-margin);
}

.portfolio-item.left .pi-description {
  margin-right: var(--pi-description-margin);
}

.portfolio-item .pi-description h2 {
  font-weight: 700;
  font-size: var(--blurb-font-size);
}

.portfolio-item.left .pi-description h2 {
  margin-left: 0.6rem;
  margin-bottom: 0.3rem;
}

.portfolio-item.right .pi-description h2 {
  margin-right: 0.6rem;
  margin-bottom: 0.3rem;
}

.portfolio-item .pi-description p {
  text-align: justify;
}

.portfolio-item .pi-description .divider {
  position: absolute;
  top: 0;
}

.portfolio-item.left .pi-description .divider {
  left: 0;
}

.portfolio-item.right .pi-description .divider {
  right: 0;
}

.pi-example {
  position: relative;
}